/* Scroll-triggered entrance animations, wired up by
   src/components/scroll_reveal.js. Mark any element `data-reveal` (default:
   fade + translateY), `data-reveal="scale"` / `data-reveal="fade"` for the
   alternate motion, or `data-reveal="pop"` for a playful spring/overshoot
   entrance (a single-authored moment — reach for it sparingly). Wrap a
   repeated set of `data-reveal` elements in a `data-reveal-group` ancestor to
   stagger them via the JS-assigned `--reveal-delay` custom property.

   The reveal `transition` itself is set inline by the JS, not here — several
   cards (.metric-card, .impact-metrics__publication, …) already own a
   `transition` for their hover lift, and a stylesheet rule here would win or
   lose that cascade fight unpredictably. Inline wins cleanly during the
   reveal and is cleared right after, handing the property back to the
   card's own hover transition. */

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}

[data-reveal="scale"] {
  transform: translateY(calc(var(--reveal-distance) * 0.6)) scale(0.96);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="pop"] {
  /* Overrides the shared duration/ease: this variant is one authored,
     playful moment (a speech-bubble-style pop-in), not the calm settle the
     other variants use — a "back out" curve overshoots past 1 before
     settling, giving the scale/lift its bounce. */
  --reveal-duration: 620ms;
  --reveal-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(calc(var(--reveal-distance) * 0.5)) scale(0.6);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: opacity var(--reveal-duration) linear;
    transform: none;
  }
}