/* ==========================================================================
   Yelo Autosports — animations.css
   All motion respects prefers-reduced-motion. JS adds .is-inview via GSAP;
   these are CSS fallbacks + the marquee.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Initial state for scroll-reveal elements (GSAP animates to visible).
     The .no-js fallback below keeps content visible without JavaScript. */
  .js [data-animate="fade-up"] { opacity: 0; transform: translateY(24px); }
  .js [data-animate="fade-up"].is-inview { opacity: 1; transform: none;
    transition: opacity .6s ease, transform .6s ease; }

  /* Trust bar marquee */
  .trust-track { animation: marquee 28s linear infinite; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .trust-bar:hover .trust-track,
  .trust-bar:focus-within .trust-track { animation-play-state: paused; }

  /* Hero entrance */
  .js .hero [data-animate="fade-up"] { opacity: 0; transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; transform: none !important; }
  .trust-track { animation: none; flex-wrap: wrap; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}