/* =========================================================
   scroll-gsap.css
   Soporte CSS para las animaciones ligadas al scroll
   (GSAP + ScrollTrigger + Lenis). Se carga EN ÚLTIMO lugar.

   Principios:
   - NO cambia colores, tipografías, textos, imágenes ni espaciados.
     Solo habilita movimiento. Los colores que se usan aquí son los
     mismos tokens ya existentes (var(--bg)): el aspecto no cambia.
   - Nada se oculta desde esta hoja. Si GSAP/Lenis no cargan, la clase
     .gsap-ready NUNCA se añade y el sistema de reveal original sigue
     funcionando igual que antes (red de seguridad intacta).
   - Respeta prefers-reduced-motion: sin animaciones y con todo visible.
   ========================================================= */

/* ---------- Lenis (smooth scroll con inercia) ----------
   Clases que Lenis añade a <html> al iniciarse. */
html.lenis,
html.lenis body { height: auto; }

.lenis.lenis-smooth { scroll-behavior: auto !important; } /* Lenis gobierna el suavizado */
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =========================================================
   Cuando GSAP controla el movimiento (.gsap-ready en <html>)
   ========================================================= */

/* 1 · Neutralizamos el sistema de reveal antiguo para que NO se dupliquen
       las animaciones. Solo "destapa" (hace visible): nunca oculta.
       GSAP vuelve a fijar los estados iniciales con estilos inline,
       que tienen más prioridad que estas reglas. */
html.gsap-ready .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
/* Mata el reveal scroll-driven nativo (base.css) para dejar el control a GSAP */
html.gsap-ready .reveal[data-reveal] { animation: none !important; }

/* 2 · Efecto cortina del hero:
       el hero queda fijo (pin de ScrollTrigger) y la sección siguiente
       sube y lo tapa. Para taparlo de verdad necesita ser opaca y quedar
       por encima. Usamos EL MISMO color de fondo (var(--bg)): idéntico
       aspecto, pero ahora cubre en vez de dejar ver el hero por detrás. */
html.gsap-ready .hero { z-index: 0; }
html.gsap-ready #video {
  position: relative;
  z-index: 2;
  background: var(--bg);
}
/* El resto del contenido viaja por encima del hero fijo */
html.gsap-ready main > section:not(.hero),
html.gsap-ready main > .manifesto { position: relative; z-index: 1; }

/* 3 · Pistas de rendimiento (solo transform/opacity → 60fps) */
html.gsap-ready .hero__title,
html.gsap-ready .hero__subtitle,
html.gsap-ready .hero__actions,
html.gsap-ready .hero__trust { will-change: transform, opacity; }

/* =========================================================
   Movimiento reducido: sin animaciones y TODO visible.
   (Instrucción explícita del encargo; prevalece sobre el
    comportamiento por defecto de base.css.)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* Deshacemos cualquier desplazamiento/parallax que GSAP pudiera haber dejado */
  html.gsap-ready .hero { z-index: auto; }
}