/**
 * Hosting506 logo — Vultr-style stroke-draw + idle depart / 506 glow.
 * Light / dark via tokens. Gate draw behind .playing.
 */

:root {
  --hx-logo-ink: #0f4676;
  --hx-logo-accent: #199fda;
  --hx-logo-loader-bg: #ffffff;
}

html.dark {
  --hx-logo-ink: #e8edf4;
  --hx-logo-accent: #4d9ae0;
  --hx-logo-loader-bg: #0f1419;
}

/* Acceso brand panel (navy) — white wordmark */
.xnc-brand .hx-logo-svg,
.xn-brand .hx-logo-svg,
.hx-logo-svg.hx-logo-on-dark {
  --hx-logo-ink: #ffffff;
  --hx-logo-accent: #7ec8f0;
}

.hx-logo-svg {
  display: block;
  width: auto;
  height: 48px;
  max-width: 200px;
  overflow: visible;
}

.xnc-brand .hx-logo-svg,
.xn-brand .hx-logo-svg,
.xnc-logo.hx-logo-svg {
  height: auto;
  width: 100%;
  max-width: 420px;
}

.xnc-brand .xnc-logo-wrap,
.xn-brand .xn-logo-wrap {
  width: clamp(260px, 42vw, 420px);
  max-width: 100%;
}

/* Admin theme header — same size as client-area topbar (200×48) */
.xn-admin-body .main-header .logo.xn-logo--hx-anim {
  overflow: visible !important;
}

.xn-admin-body .main-header .logo .xn-admin-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 200px;
  height: 48px;
  overflow: visible;
}

.xn-admin-body .main-header .logo .logo-lg {
  display: flex !important;
  align-items: center;
  max-width: 200px;
}

.xn-admin-body .main-header .logo .hx-logo-svg,
.xn-admin-body .main-header .logo .xn-admin-hx-logo {
  display: block !important;
  height: 48px !important;
  width: auto !important;
  max-width: 200px !important;
}

html[data-xn-mode='dark'] .xn-admin-body .main-header .logo .hx-logo-svg,
.xn-admin-body[data-xn-mode='dark'] .main-header .logo .hx-logo-svg {
  --hx-logo-ink: #e8edf4;
  --hx-logo-accent: #4d9ae0;
}

.hx-logo-svg .lp {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hx-logo-svg .lp-ink {
  stroke: var(--hx-logo-ink);
  fill: var(--hx-logo-ink);
}

.hx-logo-svg .lp-accent {
  stroke: var(--hx-logo-accent);
  fill: var(--hx-logo-accent);
}

/* —— Colibrí (isotipo SVG del backup, un solo path) —— */
.hx-logo-bird {
  transform-box: fill-box;
  transform-origin: 45% 55%;
  will-change: transform, opacity;
}

@keyframes hx-bird-hover {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  30% {
    transform: translate3d(0.3px, -1.1px, 0) rotate(-2.2deg);
  }
  55% {
    transform: translate3d(-0.2px, -0.35px, 0) rotate(1.6deg);
  }
  78% {
    transform: translate3d(0.15px, -1.35px, 0) rotate(-1.2deg);
  }
}

/*
 * Sale por la izquierda con flip y vuelve (~3.2s).
 * Sin cortar alas ni stroke-redraw — mark intacto.
 */
@keyframes hx-bird-depart {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1);
  }
  8% {
    opacity: 1;
    transform: translate3d(-3px, -5px, 0) rotate(-12deg) scale(1.06, 1.06);
  }
  22% {
    opacity: 1;
    transform: translate3d(-14px, -9px, 0) rotate(-8deg) scale(-1.02, 1.02);
  }
  38% {
    opacity: 0.15;
    transform: translate3d(-42px, -14px, 0) rotate(6deg) scale(-0.82, 0.82);
  }
  44% {
    opacity: 0;
    transform: translate3d(-52px, -18px, 0) rotate(0deg) scale(-0.7, 0.7);
  }
  52% {
    opacity: 0;
    transform: translate3d(-54px, -16px, 0) rotate(0deg) scale(-0.7, 0.7);
  }
  64% {
    opacity: 1;
    transform: translate3d(-30px, -10px, 0) rotate(10deg) scale(-0.92, 0.92);
  }
  78% {
    opacity: 1;
    transform: translate3d(-10px, -5px, 0) rotate(-6deg) scale(1.04, 1.04);
  }
  90% {
    opacity: 1;
    transform: translate3d(-2px, -1.5px, 0) rotate(3deg) scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1);
  }
}

/* Flote suave mientras está vivo */
.hx-logo-svg.hx-logo-alive .hx-logo-bird:not(.is-departing) {
  animation: hx-bird-hover 2.4s ease-in-out infinite;
}

.hx-logo-bird.is-departing {
  animation: hx-bird-depart 3.2s cubic-bezier(0.45, 0.05, 0.28, 1) both;
}

/* —— 506 (accent) — grupo completo, efecto visible —— */
.hx-logo-506 {
  transform-box: fill-box;
  transform-origin: 50% 55%;
  will-change: transform, opacity, filter;
}

@keyframes hx-506-glow {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  30% {
    opacity: 1;
    transform: translate3d(0, -1.5px, 0) scale(1.1);
    filter: drop-shadow(0 0 8px var(--hx-logo-accent));
  }
  55% {
    opacity: 0.7;
    transform: translate3d(0, -0.5px, 0) scale(1.04);
    filter: drop-shadow(0 0 4px var(--hx-logo-accent));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* Idle 506: solo burst esporádico vía JS (.is-506-glow) — no loop continuo ni con el colibrí */
.hx-logo-svg .hx-logo-506.is-506-glow,
.hx-logo-svg.is-506-glow .hx-logo-506 {
  animation: hx-506-glow 1.6s ease-in-out both;
}

/* Static / settled fills — NO pisa opacity del grupo 506 */
.shell-topbar-logo .hx-logo-svg.hx-logo-static .lp,
.shell-topbar-logo.hx-logo-ready .hx-logo-svg .lp,
.hx-logo-svg.hx-logo-alive .lp,
.xnc-brand .hx-logo-svg:not(.hx-logo-redrawing) .lp,
html:not(.hx-logo-intro-pending):not(.hx-logo-intro-active) .shell-topbar-logo .hx-logo-svg:not(.hx-logo-redrawing) .lp {
  fill-opacity: 1;
  stroke-opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

html.hx-logo-intro-pending .shell-topbar-logo .hx-logo-svg,
html.hx-logo-intro-active .shell-topbar-logo .hx-logo-svg {
  opacity: 0;
  transform: scale(0.96);
}

.shell-topbar-logo.hx-logo-ready .hx-logo-svg {
  opacity: 1;
  transform: scale(1);
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* —— Loader overlay —— */
.hx-logo-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  background: var(--hx-logo-loader-bg);
  pointer-events: none;
  opacity: 1;
  transition: opacity 420ms ease;
}

html.hx-logo-intro-pending .hx-logo-loader,
html.hx-logo-intro-active .hx-logo-loader {
  display: flex;
}

.hx-logo-loader.is-exit {
  opacity: 0;
}

html.hx-logo-intro-active {
  overflow: hidden;
}

.hx-logo-loader .loader-logo-flight {
  transform-origin: center center;
  will-change: transform;
}

.hx-logo-loader .hx-logo-svg {
  height: 72px;
  max-width: 340px;
  width: auto;
}

@keyframes hx-lp-draw {
  0% {
    stroke-dashoffset: 1;
    stroke-opacity: 0;
  }
  6% {
    stroke-opacity: 1;
  }
  88% {
    stroke-opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-opacity: 0;
  }
}

@keyframes hx-lp-fill {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

@keyframes hx-lp-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  45% {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--hx-logo-accent) 45%, transparent));
  }
}

/* Shared draw base */
.hx-logo-loader .lp,
.hx-logo-svg.hx-logo-redrawing .lp-mark {
  fill-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-opacity: 0;
}

.hx-logo-loader .lp-mark,
.hx-logo-svg.hx-logo-redrawing .lp-mark {
  stroke-width: 1.35;
}

.hx-logo-loader .lp-word,
.hx-logo-loader .lp-accent {
  stroke-width: 1.05;
}

/* Full intro sequence (loader) */
.hx-logo-loader.playing .lp-mark {
  animation:
    hx-lp-draw 1.15s 0.12s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.65s 0.95s ease-out forwards;
}

.hx-logo-loader.playing .lp-word-0 {
  animation:
    hx-lp-draw 0.85s 0.95s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.55s 1.55s ease-out forwards;
}
.hx-logo-loader.playing .lp-word-1 {
  animation:
    hx-lp-draw 0.85s 1.08s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.55s 1.68s ease-out forwards;
}
.hx-logo-loader.playing .lp-word-2 {
  animation:
    hx-lp-draw 0.85s 1.21s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.55s 1.81s ease-out forwards;
}
.hx-logo-loader.playing .lp-word-3 {
  animation:
    hx-lp-draw 0.85s 1.34s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.55s 1.94s ease-out forwards;
}
.hx-logo-loader.playing .lp-word-4 {
  animation:
    hx-lp-draw 0.85s 1.47s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.55s 2.07s ease-out forwards;
}
.hx-logo-loader.playing .lp-word-5 {
  animation:
    hx-lp-draw 0.85s 1.6s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.55s 2.2s ease-out forwards;
}
.hx-logo-loader.playing .lp-word-6 {
  animation:
    hx-lp-draw 0.85s 1.73s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.55s 2.33s ease-out forwards;
}

.hx-logo-loader.playing .lp-accent-0 {
  animation:
    hx-lp-draw 0.8s 2.2s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.5s 2.75s ease-out forwards;
}
.hx-logo-loader.playing .lp-accent-1 {
  animation:
    hx-lp-draw 0.8s 2.32s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.5s 2.87s ease-out forwards;
}
.hx-logo-loader.playing .lp-accent-2 {
  animation:
    hx-lp-draw 0.8s 2.44s cubic-bezier(0.65, 0.05, 0.35, 1) forwards,
    hx-lp-fill 0.5s 2.99s ease-out forwards;
}

.hx-logo-loader.playing .hx-logo-svg {
  animation: hx-lp-glow 1.35s 3.15s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
  .hx-logo-loader {
    display: none !important;
  }

  html.hx-logo-intro-pending .shell-topbar-logo .hx-logo-svg,
  html.hx-logo-intro-active .shell-topbar-logo .hx-logo-svg {
    opacity: 1;
    transform: none;
  }

  .hx-logo-svg.hx-logo-alive .hx-logo-bird,
  .hx-logo-bird.is-departing,
  .hx-logo-svg.is-506-glow .hx-logo-506,
  .hx-logo-svg .hx-logo-506.is-506-glow,
  .hx-logo-loader.playing .lp,
  .hx-logo-loader.playing .hx-logo-svg {
    animation: none !important;
  }
}