/* ════════════════════════════════════════════════════════════════
   FSTS.com.my — motion layer
   Only transform + opacity are animated. Everything collapses to
   static under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

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

  /* ── Hero load-in cascade ─────────────────────────────────── */
  @keyframes riseIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero .hero-eyebrow,
  .hero .hero-logo,
  .page-hero .hero-eyebrow { animation: riseIn 0.7s var(--ease) both; }

  .hero .hero-line,
  .page-hero .hero-line { animation: riseIn 0.8s var(--ease) both; }
  .hero .hero-line:nth-child(2),
  .page-hero .hero-line:nth-child(2) { animation-delay: 0.12s; }

  .hero .hero-lede,
  .page-hero .hero-lede { animation: riseIn 0.8s var(--ease) 0.24s both; }

  .hero .hero-actions { animation: riseIn 0.8s var(--ease) 0.36s both; }

  /* ── Scroll reveal (driven by IntersectionObserver in main.js) ── */
  [data-animate] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  [data-animate].revealed { opacity: 1; transform: none; }

  /* Stagger: parent reveals instantly, children cascade */
  [data-animate="stagger"] { opacity: 1; transform: none; }
  [data-animate="stagger"] > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  }
  [data-animate="stagger"] > .revealed { opacity: 1; transform: none; }

  /* ── Insurance logo marquee ───────────────────────────────── */
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ── Testimonial slide change ─────────────────────────────── */
  @keyframes quoteIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .quote-slide.active { animation: quoteIn 0.5s var(--ease) both; }
}

/* ── Reduced motion: everything static, marquee becomes a row ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-animate],
  [data-animate="stagger"] > * { opacity: 1; transform: none; transition: none; }

  .logo-marquee-track,
  .partner-marquee-track { animation: none; flex-wrap: wrap; width: auto; }

  .btn:hover, .wa-float:hover, .phone-tile:hover { transform: none; }
}