/* =========================================================
   animations.css — keyframes + initial-state classes
   These are stand-alone CSS animations. GSAP handles all
   scroll-driven and interactive choreography in JS.
   ========================================================= */

/* ----- Initial states (before GSAP runs) ----- */
.js-ready [data-reveal] .word { visibility: hidden; }
.js-ready [data-fade] { opacity: 0; transform: translateY(20rem); }

/* While the preloader is up, lock the body scroll. */
body.is-loading { overflow: hidden; height: 100vh; }

/* Decorative play-button pulse */
@keyframes playPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0;   }
}

/* Soft float for the CTA phone (fallback if GSAP isn't ready) */
@keyframes floatY {
  0%, 100% { transform: rotateY(-12deg) rotateX(6deg) translateY(0); }
  50%      { transform: rotateY(-12deg) rotateX(6deg) translateY(-14rem); }
}

/* CSS marquee fallback */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logos__track.css-fallback { animation: marquee 40s linear infinite; }

/* CTA particles drift fallback */
@keyframes drift {
  0%   { transform: translate(0, 0); opacity: 0.2; }
  50%  { opacity: 0.8; }
  100% { transform: translate(40rem, -60rem); opacity: 0; }
}

/* Reduced motion — kill all the decorative motion */
@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal] .word { visibility: visible; }
  .js-ready [data-fade] { opacity: 1; transform: none; }
  .step { opacity: 1; transform: none; }
  .hero__c, .cta__phone { animation: none !important; transform: none !important; }
  .play-pulse { animation: none !important; }
  .logos__track { animation: none !important; }
}