/* ============================================================================
   LANT AUDIO — motion.css  ·  CAPA VIVA ("concierto")
   ----------------------------------------------------------------------------
   Todo lo que se mueve vive aquí (fácil de afinar o apagar). Solo tokens.
   Reglas: el contenido NUNCA depende de esto para verse; JS solo añade
   parallax/spot (aditivo); TODO se neutraliza bajo prefers-reduced-motion.
   ========================================================================== */

/* ---- Barra de progreso de scroll (2px, arriba de todo) ------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 120; pointer-events: none; background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--lant-orange-hover));
  box-shadow: 0 0 12px rgba(255, 78, 0, .55);
}

/* ---- Ambiente global: polvo de luz en el haze (detrás de todo) ----------- */
/* Motas fijas (posiciones handpicked) que derivan muy lento; JS solo les da
   parallax con el mouse. Sobre tarjetas/fondos sólidos no se ven (se pintan
   detrás): solo viven en el "negro", como polvo en un haz de luz. */
.ambient {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ambient__track { width: 100%; height: 100%; will-change: transform; }
.amb {
  position: absolute;
  width: var(--s, 5px); height: var(--s, 5px);
  border-radius: 50%;
  background: var(--c, var(--lant-white));
  opacity: var(--o, .06);
  filter: blur(var(--b, 1px));
  animation: amb-drift var(--d, 34s) ease-in-out var(--dl, 0s) infinite alternate;
  will-change: transform;
}
.amb--orb {
  background: radial-gradient(circle, var(--lant-orange-tint-16), transparent 70%);
  border-radius: 50%;
  filter: blur(14px);
}
@keyframes amb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(12px, -22px) scale(1.15); }
}

/* ---- Dieta móvil: menos capas en pantallas chicas ------------------------- */
@media (max-width: 820px) {
  .hero__beam--c, .hero__beam--e, .hero__fog--2 { display: none; }
  .hero__dust i:nth-child(even) { display: none; }
}

/* ---- Follow-spot: halo de luz que sigue el cursor (Tracker 9R) ----------- */
/* Solo desktop con puntero fino; lo activa motion.js. Blend screen: ilumina
   el negro, no tapa contenido (se pinta detrás de tarjetas y texto). */
.spot {
  position: fixed; left: 0; top: 0; z-index: 1;
  width: 360px; height: 360px; margin: -180px 0 0 -180px;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle,
    rgba(255, 140, 60, .16) 0%,
    rgba(255, 78, 0, .10) 32%,
    transparent 68%);
  mix-blend-mode: screen;
  transition: opacity 1.2s var(--ease-standard);
  will-change: transform;
}
.spot.is-on { opacity: 1; }

/* ---- Hero vivo ------------------------------------------------------------ */
/* Cámara VIVA: zoom + deriva multi-parada (leve "handheld" de concierto) */
.hero__img {
  animation: hero-live 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-live {
  0%   { transform: scale(1.02) translate(0, 0); }
  26%  { transform: scale(1.07) translate(-1.4%, -0.8%); }
  52%  { transform: scale(1.04) translate(0.8%, 0.4%); }
  76%  { transform: scale(1.09) translate(-0.6%, -1.2%); }
  100% { transform: scale(1.02) translate(0, 0); }
}

/* ---- EL CONCIERTO: rig de 6 haces tipo cabeza móvil ---------------------- */
.hero__beam {
  position: absolute; top: -20%; height: 140%;
  width: var(--bw, 26vw); min-width: 220px;
  right: var(--bx, 20%);
  background: linear-gradient(to bottom, rgba(255, 130, 40, var(--bo, .34)), transparent 74%);
  clip-path: polygon(47% 0, 53% 0, 86% 100%, 14% 100%);
  filter: blur(14px);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  will-change: transform, opacity;
  animation: beam-show var(--bd, 7s) ease-in-out var(--bdl, 0s) infinite;
}
.hero__beam--a { --bx: 10%; --bw: 28vw; --bo: .38; --bd: 6.5s; --bdl: 0s; }
.hero__beam--b { --bx: 30%; --bw: 20vw; --bo: .30; --bd: 8.5s; --bdl: -3.1s; animation-name: beam-show-rev; }
.hero__beam--c { --bx: 48%; --bw: 24vw; --bo: .26; --bd: 7.4s; --bdl: -5.2s; }
.hero__beam--d { --bx: 66%; --bw: 18vw; --bo: .30; --bd: 9.2s; --bdl: -1.7s; animation-name: beam-show-rev; }
.hero__beam--e { --bx: -4%; --bw: 22vw; --bo: .24; --bd: 8.1s; --bdl: -6.4s; }
.hero__beam--w {
  --bx: 40%; --bw: 14vw; --bo: .20; --bd: 5.6s; --bdl: -2.4s;
  background: linear-gradient(to bottom, rgba(255, 245, 235, var(--bo)), transparent 70%);
}
/* Coreografía multi-parada (no un péndulo): así se mueven las cabezas reales */
@keyframes beam-show {
  0%   { transform: rotate(-20deg); opacity: .55; }
  28%  { transform: rotate(6deg);   opacity: .95; }
  47%  { transform: rotate(-9deg);  opacity: .6; }
  72%  { transform: rotate(22deg);  opacity: 1; }
  100% { transform: rotate(-20deg); opacity: .55; }
}
@keyframes beam-show-rev {
  0%   { transform: rotate(18deg);  opacity: .6; }
  24%  { transform: rotate(-12deg); opacity: 1; }
  55%  { transform: rotate(8deg);   opacity: .55; }
  78%  { transform: rotate(-22deg); opacity: .9; }
  100% { transform: rotate(18deg);  opacity: .6; }
}

/* ---- Humo volumétrico rodando -------------------------------------------- */
.hero__fog {
  position: absolute; top: 18%; height: 70%; width: 58vw; min-width: 420px;
  background: radial-gradient(ellipse at center, rgba(255, 120, 40, .16), transparent 62%);
  filter: blur(34px);
  mix-blend-mode: screen;
  will-change: transform;
}
.hero__fog--1 { left: -25%; animation: fog-roll 26s linear infinite; }
.hero__fog--2 {
  left: -35%; top: 34%; width: 44vw; opacity: .75;
  background: radial-gradient(ellipse at center, rgba(255, 200, 150, .10), transparent 60%);
  animation: fog-roll 37s linear -14s infinite;
}
@keyframes fog-roll {
  0%   { transform: translateX(0) translateY(0) scale(1); }
  50%  { transform: translateX(70vw) translateY(-4%) scale(1.25); }
  100% { transform: translateX(150vw) translateY(2%) scale(1); }
}

/* ---- Pulso al beat (~110 BPM, 4 tiempos con acento) ----------------------- */
/* Lavado cálido de baja amplitud (max .14): energía sin estrobo real. */
.hero__pulse {
  position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 62% 30%, rgba(255, 110, 25, 1), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: beat 2.18s linear infinite;
  will-change: opacity;
}
@keyframes beat {
  0%   { opacity: .10; } 6%  { opacity: 0; }
  25%  { opacity: .07; } 31% { opacity: 0; }
  50%  { opacity: .09; } 56% { opacity: 0; }
  75%  { opacity: .14; } 84% { opacity: 0; }
  100% { opacity: .08; }
}

/* ---- Polvo subiendo por los haces (lo genera motion.js) ------------------- */
.hero__dust { position: absolute; inset: 0; overflow: hidden; }
.hero__dust i {
  position: absolute; bottom: -12px; left: var(--x, 50%);
  width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: rgba(255, 190, 130, .8);
  filter: blur(.5px);
  opacity: 0;
  animation: dust-rise var(--du, 9s) linear var(--dl, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes dust-rise {
  0%   { transform: translateY(0);      opacity: 0; }
  12%  { opacity: .7; }
  70%  { opacity: .35; }
  100% { transform: translateY(-105vh); opacity: 0; }
}

/* Glow que respira (el "amber wash" del venue) */
.hero__glowfx {
  position: absolute; right: 6%; top: 22%;
  width: 46vw; height: 60%;
  background: radial-gradient(ellipse at center, rgba(255, 100, 20, .22), transparent 65%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: glow-breathe 9s ease-in-out infinite alternate;
}
@keyframes glow-breathe {
  from { opacity: .45; transform: scale(.96); }
  to   { opacity: .9;  transform: scale(1.06); }
}

/* Cascada del titular: cada línea sube enmascarada, con delay */
.hero__lw { display: block; overflow: hidden; }
.hero__line { display: block; }
.js .hero__title .hero__line {
  opacity: 0;
  transform: translateY(108%);
}
.js .hero__title.is-in .hero__line {
  animation: line-rise .85s var(--ease-standard) forwards;
}
.js .hero__title.is-in .hero__line--2 { animation-delay: .14s; }
@keyframes line-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* El contenido del hero recibe un tilt sutil desde motion.js (parallax) */
.hero .wrap { will-change: transform; }

/* ---- Ecualizador vivo (firma de audio) ----------------------------------- */
.eqviz {
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: .9em; vertical-align: baseline;
  margin-left: .55em;
}
.eqviz i {
  display: block; width: 3px; height: 100%;
  border-radius: 1px;
  background: var(--accent);
  transform-origin: bottom;
  animation: eq-bounce 1s ease-in-out infinite alternate;
}
.eqviz i:nth-child(1) { transform: scaleY(.35); animation-duration: .9s;  }
.eqviz i:nth-child(2) { transform: scaleY(.8);  animation-duration: .7s;  animation-delay: -.2s; }
.eqviz i:nth-child(3) { transform: scaleY(.5);  animation-duration: 1.1s; animation-delay: -.5s; }
.eqviz i:nth-child(4) { transform: scaleY(.9);  animation-duration: .8s;  animation-delay: -.35s; }
.eqviz i:nth-child(5) { transform: scaleY(.45); animation-duration: 1s;   animation-delay: -.6s; }
@keyframes eq-bounce {
  from { transform: scaleY(.2); }
  to   { transform: scaleY(1); }
}
.eqviz--hero { height: 1em; margin-left: .7em; }

/* ---- Stagger de reveals (motion.js reparte --rd por sección) -------------- */
.js [data-reveal].is-in { transition-delay: var(--rd, 0ms); }

/* ---- Fotos con vida (zoom sutil al hover) --------------------------------- */
.eq-thumb { overflow: hidden; }
.eq-thumb img, .pr-media img {
  transition: transform .9s var(--ease-standard);
  will-change: transform;
}
.eq-card:hover .eq-thumb img { transform: scale(1.06); }
.pr-step:hover .pr-media img { transform: scale(1.05); }

/* ---- CTA primario: barrido de brillo al hover ----------------------------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(-130%) skewX(-16deg);
  pointer-events: none;
}
.btn--primary:hover::after { animation: btn-shine .7s var(--ease-standard) forwards; }
@keyframes btn-shine {
  to { transform: translateX(300%) skewX(-16deg); }
}

/* ---- WhatsApp flotante: ping de luz --------------------------------------- */
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: wa-ping 5.5s ease-out infinite;
}
@keyframes wa-ping {
  0%   { box-shadow: 0 0 0 0 rgba(255, 78, 0, .5); }
  55%  { box-shadow: 0 0 0 18px rgba(255, 78, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 78, 0, 0); }
}

/* ---- Hero en VIDEO (cinemagraph Sora): funde sobre la foto ---------------- */
.hero__img { opacity: 0; transition: opacity 1.8s var(--ease-standard); }
.hero__img.is-active { opacity: 1; }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  opacity: 0; transition: opacity 1.6s var(--ease-standard);
}
.hero__video.is-playing { opacity: 1; }

/* ---- Tarjetas de equipo: la foto cobra vida al hover (cinemagraph) -------- */
.eq-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity .4s var(--ease-standard);
  pointer-events: none;
}
.eq-card.is-live .eq-video.is-playing {
  opacity: 1;
  animation: video-ken 6s ease-in-out infinite alternate;  /* zoom vivo sobre el clip */
}
@keyframes video-ken {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
.hero__video.is-playing { animation: hero-live 22s ease-in-out infinite; }

/* ---- Espectro de audio gigante (pie del hero; lo genera motion.js) -------- */
.spectrum {
  position: absolute; left: 0; right: 0; bottom: 0; height: 88px;
  display: flex; align-items: flex-end; gap: 4px;
  padding-inline: 2vw;
  pointer-events: none;
  mix-blend-mode: screen; opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.spectrum i {
  flex: 1 1 0; height: 100%;
  background: linear-gradient(to top, var(--accent), rgba(255, 140, 60, .25));
  border-radius: 1px;
  transform-origin: bottom;
  transform: scaleY(.12);
  animation: spec-bounce calc(var(--du, 1s) * .6) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes spec-bounce {
  from { transform: scaleY(.1); }
  to   { transform: scaleY(var(--h, .7)); }
}

/* ---- Bandas de tipografía cinética (estilo lamalama) ---------------------- */
.band {
  overflow: hidden;
  padding-block: clamp(1.6rem, 4.5vw, 3rem);
  border-block: .5px solid var(--border-subtle);
  will-change: transform;               /* recibe skew por velocidad de scroll */
}
.band__track {
  display: flex; width: max-content;
  animation: band-scroll 44s linear infinite;
  will-change: transform;
}
.band--rev .band__track { animation-direction: reverse; animation-duration: 52s; }
.band__group { display: flex; flex: none; align-items: baseline; }
.band__seg {
  flex: none;
  margin-right: clamp(1.6rem, 4vw, 3rem);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  letter-spacing: var(--ls-tight); line-height: 1.05;
  text-transform: uppercase; white-space: nowrap;
}
.band__seg--fill    { color: rgba(255, 255, 255, .16); }
.band__seg--outline { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .30); }
.band__seg--accent  { color: var(--accent); opacity: .85; }
@keyframes band-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Barrido de luz por secciones oscuras (cabeza móvil pasando) ---------- */
.sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sweep::before {
  content: ""; position: absolute; top: -20%; bottom: -20%;
  width: 22vw; min-width: 200px; left: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 110, 30, .10), transparent);
  transform: translateX(-140%) rotate(6deg);
  mix-blend-mode: screen;
  animation: sweep-pass var(--sw, 16s) ease-in-out var(--swd, 0s) infinite;
}
@keyframes sweep-pass {
  0%   { transform: translateX(-140%) rotate(6deg); }
  38%  { transform: translateX(560%) rotate(6deg); }
  100% { transform: translateX(560%) rotate(6deg); }
}

/* ---- Proceso: números 01–05 de contorno → relleno al entrar --------------- */
.js .pr-step[data-reveal] .pr-num {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  transition: color 1s var(--ease-standard) .25s;
}
.js .pr-step[data-reveal].is-in .pr-num { color: var(--accent); }

/* ---- CTAs magnéticos / tilt 3D: la transición de regreso ------------------ */
.js .btn--primary { transition: background var(--duration-fast) var(--ease-standard),
                                transform .35s var(--ease-standard); }
.js .eq-card { transform-style: preserve-3d; }

/* ============================================================================
   REDUCED MOTION — todo lo de arriba se apaga; estados finales visibles.
   (La barra de progreso se queda: refleja el scroll, no es movimiento propio.)
   ========================================================================== */
/* Nota: `:root:not(.force-motion)` permite el modo demo ?vida (motion.js pone
   la clase .force-motion), que restaura la vida aunque el sistema pida calma.
   Los videos de HOVER quedan permitidos bajo reduce: los inicia el usuario. */
@media (prefers-reduced-motion: reduce) {
  :root:not(.force-motion) .amb, :root:not(.force-motion) .ambient__track { animation: none; }
  :root:not(.force-motion) .spot { display: none; }
  :root:not(.force-motion) .hero__img { animation: none; transition: none; }
  :root:not(.force-motion) .hero__beam,
  :root:not(.force-motion) .hero__beam--a,
  :root:not(.force-motion) .hero__beam--b { animation: none; opacity: .3; }
  :root:not(.force-motion) .hero__fog,
  :root:not(.force-motion) .hero__pulse,
  :root:not(.force-motion) .hero__dust { display: none; }
  :root:not(.force-motion) .hero__glowfx { animation: none; opacity: .55; }
  :root:not(.force-motion).js .hero__title .hero__line,
  :root:not(.force-motion).js .hero__title.is-in .hero__line { opacity: 1; transform: none; animation: none; }
  :root:not(.force-motion) .eqviz i { animation: none; }
  :root:not(.force-motion).js [data-reveal].is-in { transition-delay: 0ms; }
  :root:not(.force-motion) .eq-thumb img, :root:not(.force-motion) .pr-media img { transition: none; }
  :root:not(.force-motion) .eq-card:hover .eq-thumb img,
  :root:not(.force-motion) .pr-step:hover .pr-media img { transform: none; }
  :root:not(.force-motion) .btn--primary:hover::after { animation: none; }
  :root:not(.force-motion) .wa-float::before { animation: none; }
  :root:not(.force-motion) .spectrum { display: none; }
  :root:not(.force-motion) .band__track { animation: none; transform: none; }
  :root:not(.force-motion) .band { transform: none !important; }
  :root:not(.force-motion) .sweep { display: none; }
  :root:not(.force-motion).js .pr-step[data-reveal] .pr-num { color: var(--accent); -webkit-text-stroke: 0; transition: none; }
  :root:not(.force-motion).js .btn--primary { transition: background var(--duration-fast) var(--ease-standard); transform: none !important; }
  :root:not(.force-motion) .hero__video { display: none; }  /* sin autoplay bajo reduce; hover-videos sí */
  :root:not(.force-motion) .eq-card.is-live .eq-video.is-playing,
  :root:not(.force-motion) .hero__video.is-playing { animation: none; }  /* hover-video sí, pero sin zoom */
}