/* ============================================================
   VARTEX 14 — animations.css
   Fotogramas clave, estados previos a la animación JS y
   soporte para movimiento reducido.
   ============================================================ */

/* ---------- Nebulosa: derivas marcadas con respiración de luz ---------- */
@keyframes aurora-drift-one {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  50%  { transform: translate3d(10vw, 8vh, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(-6vw, -4vh, 0) scale(0.94); opacity: 0.6; }
}

@keyframes aurora-drift-two {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.9; }
  50%  { transform: translate3d(-8vw, 6vh, 0) scale(0.92); opacity: 0.5; }
  100% { transform: translate3d(6vw, 9vh, 0) scale(1.14); opacity: 1; }
}

@keyframes aurora-drift-three {
  0%   { transform: translate3d(0, 0, 0) scale(0.96); opacity: 0.6; }
  100% { transform: translate3d(8vw, -7vh, 0) scale(1.1); opacity: 1; }
}

@keyframes aurora-drift-four {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
  100% { transform: translate3d(-7vw, 10vh, 0) scale(1.14); opacity: 0.95; }
}

@keyframes aurora-swirl {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.aurora__layer--one {
  animation: aurora-drift-one 32s var(--ease) infinite alternate;
}

.aurora__layer--two {
  animation: aurora-drift-two 42s var(--ease) infinite alternate;
}

.aurora__layer--three {
  animation: aurora-drift-three 48s var(--ease) infinite alternate;
}

.aurora__layer--four {
  animation: aurora-drift-four 56s var(--ease) infinite alternate;
}

.aurora__swirl {
  animation: aurora-swirl 85s linear infinite;
}

/* ---------- Indicador de scroll ---------- */
@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Marquesina ---------- */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee__track {
  animation: marquee 42s linear infinite;
}

/* ---------- Destello del fotograma ---------- */
@keyframes still-sheen {
  0%, 55%   { transform: translateX(-100%); }
  90%, 100% { transform: translateX(100%); }
}

/* ---------- Entrada de ítems del menú móvil ---------- */
@keyframes menu-item-in {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Estados previos a la animación JS ----------
   Solo cuando JS está activo. Sin JS todo el contenido es visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
}

.js .js-split .line > .char {
  opacity: 0;
}

/* Los elementos fuera de pantalla del hero entran con GSAP */
.js [data-hero] {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
}

/* Fallback: si GSAP no cargó, mostramos todo (lo activa app.js) */
html.no-gsap.js [data-reveal],
html.no-gsap.js [data-hero],
html.no-gsap.js .js-split .line > .char {
  opacity: 1;
  transform: none;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee__track {
    animation: none;
  }

  .still::after {
    animation: none;
    transform: none;
  }

  .hero__scroll::after {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* La nebulosa de fondo siempre se anima (requisito del proyecto) */
  .aurora__layer--one {
    animation-duration: 32s !important;
    animation-iteration-count: infinite !important;
  }

  .aurora__layer--two {
    animation-duration: 42s !important;
    animation-iteration-count: infinite !important;
  }

  .aurora__layer--three {
    animation-duration: 48s !important;
    animation-iteration-count: infinite !important;
  }

  .aurora__layer--four {
    animation-duration: 56s !important;
    animation-iteration-count: infinite !important;
  }

  .aurora__swirl {
    animation-duration: 85s !important;
    animation-iteration-count: infinite !important;
  }

  .js [data-reveal],
  .js [data-hero],
  .js .js-split .line > .char {
    opacity: 1;
    transform: none;
  }
}