Fade in entrance

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

@starting-style {
  .fade-in {
    opacity: 0;
    transform: translateY(1rem);
  }
}

/* Stagger children */
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }

You are a senior frontend engineer building page entrance animations.

Goal: Fade-in + slide-up entrance for elements when they first render, using @starting-style — no JavaScript.

Technical constraints:
- Use @starting-style to define the "before" state (opacity: 0, translateY(1rem)).
- The element's normal state is the "after" state (opacity: 1, translateY(0)).
- Use transition (not @keyframes) for the animation.
- ease-out timing, 0.4–0.6s duration.
- Stagger siblings with transition-delay using :nth-child().
- Wrap motion in @media (prefers-reduced-motion: no-preference) — disable for users who prefer reduced motion.

Variations:
A) Fade up (translateY).
B) Fade in from left (translateX).
C) Scale in (scale(0.95) to scale(1)).

Return CSS only. No JavaScript.