Fade-in on scroll

/* HTML: Add .fade-in to any element you want to animate in:
<div class="fade-in">...</div> */

@keyframes fade-up-in {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Progressive enhancement — only applies where supported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fade-in {
      animation: fade-up-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}

/* Staggered variant — add --delay to each element */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fade-in--stagger {
      animation: fade-up-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
      animation-delay: var(--delay, 0ms);
    }
  }
}

You are a senior frontend engineer implementing modern CSS scroll-driven animations.

Goal: Fade and slide elements up as they enter the viewport using CSS scroll-driven animations — animation-timeline: view() — with no JavaScript and no Intersection Observer.

Technical constraints:
- Use animation-timeline: view() to link animation progress to element visibility in the viewport.
- Use animation-range: entry 0% entry 30% so the animation completes as the element enters — not as it exits.
- Wrap all scroll-driven animation rules in @supports (animation-timeline: view()) for progressive enhancement.
- Also wrap in @media (prefers-reduced-motion: no-preference) — users who prefer reduced motion must not see the animation at all.
- Use the translate property (not transform: translateY) for the slide effect.
- animation-fill-mode: both ensures elements stay visible after the animation completes.

Framework variant (pick one):
A) Plain CSS utility class .fade-in — drop onto any element.
B) React component <FadeIn> — renders a wrapper div with the class applied, accepts delay (ms) and direction (up | left | right) props.

Edge cases to handle:
- Elements already in the viewport on page load should still animate in on first render.
- Staggered lists: accept a --delay custom property on each child to offset timing.
- Elements inside overflow: hidden containers may not trigger correctly — document this limitation.
- animation-fill-mode: both can cause opacity: 0 flash before the timeline attaches — test in Chrome and Safari.

Return CSS only (or React + CSS for variant B).