/* Generic scroll-reveal utility, site-wide. Add .scroll-reveal to any
   element to fade+rise it in as it enters the viewport. Tune per
   instance with the custom properties below (set them on the element
   itself, or on a parent to affect a group).

   Gated entirely behind @supports: the opacity:0 "hidden" starting
   state only exists for browsers that can also run the animation
   bringing it back to 1. Without this guard, a browser lacking
   animation-timeline: view() support (Safari, Firefox at time of
   writing) would see the element permanently invisible instead of
   just un-animated — see section-cta.css's .section-cta__image-overlay
   for a real instance of that exact bug, fixed alongside this file. */
@supports (animation-timeline: view()) {
  .scroll-reveal {
    --scroll-reveal-distance: 2rem;
    --scroll-reveal-range-start: entry 10%;
    --scroll-reveal-range-end: entry 50%;

    opacity: 0;
    transform: translateY(var(--scroll-reveal-distance));
    animation: scroll-reveal linear both;
    animation-timeline: view();
    animation-range: var(--scroll-reveal-range-start) var(--scroll-reveal-range-end);
  }

  /* Opacity only, no rise — for content where a vertical shift would
     look wrong (e.g. something already aligned to a grid line). */
  .scroll-reveal--fade {
    --scroll-reveal-distance: 0rem;
  }
}

@keyframes scroll-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--scroll-reveal-distance, 2rem));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}