/* ───────── Scroll-reveal (GSAP + ScrollTrigger) ─────────
   Fade + rise applied to the sections below the KV: the lead/history
   timeline, the compare cards, and the content-section headings. The KV keeps
   its own intro (styles/kv.css + scripts/animations.js) and is untouched here.

   The initial hidden state is gated behind `html.reveal-ready`, a class added
   synchronously by a tiny inline script in <head> BEFORE first paint. Gating
   it this way means that if JavaScript or GSAP fails to load, the class is
   never added (or is removed by the failsafe) and every element stays visible
   — content is never trapped invisible. scripts/gsap-reveal.js then tweens
   these to their visible state as they scroll into view.

   Two hooks:
     [data-reveal]        a single element that fades + rises on enter.
     [data-reveal-item]   a child of a [data-reveal-stagger] group; the group's
                          items cascade in together when the group scrolls in. */

html.reveal-ready [data-reveal],
html.reveal-ready [data-reveal-item] {
  opacity: 0;
  /* Matches the GSAP tween's starting y (28px) so fromTo() starts seamlessly
     from the painted state with no jump. Keep the two in sync. */
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* Honour reduced-motion: never hide, never move. scripts/gsap-reveal.js also
   bails out early under this query, so the elements just render in place. */
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal],
  html.reveal-ready [data-reveal-item] {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}