/* Option B — entrance motion layer.

   One elegant language across the whole page: elements fade in and slide up a
   short distance as they enter the viewport (headings and their kickers, the
   feature photographs, the card grids, and the hero content). The hero cover
   also drifts subtly under scroll. Driven by Motion (motion.dev) — a
   lightweight, WAAPI-backed library.

   PROGRESSIVE ENHANCEMENT CONTRACT (mirrors the repo's `.reveal` discipline):
   every initial-hidden state below is gated on BOTH `html.motion-b` AND
   `@media (prefers-reduced-motion: no-preference)`. The `motion-b` class is
   added by the head gate ONLY for ESM-capable, no-preference browsers, and is
   stripped again by a load-time watchdog if the motion module never runs. So
   no-JS, reduced-motion, and legacy engines never see a hidden element — they
   get today's static page, unchanged. */

@media (prefers-reduced-motion: no-preference) {
  /* --- Hero content: quick fade + slide up. No clip on the headline so the
     LCP text paints without delay; the cover image (often the LCP) is never
     hidden. --- */
  html.motion-b [data-mfx-hero] > * {
    opacity: 0;
    transform: translateY(16px);
  }

  /* Contain the scroll-linked cover drift (over-scale + downward travel) in
     both the mobile in-flow layout and the desktop absolute-cover layout. */
  html.motion-b .hero,
  html.motion-b .hero__media { overflow: clip; }

  /* --- Section heading groups: kicker, heading and sub-line fade + slide up
     together in a short stagger. --- */
  html.motion-b [data-mfx-head] > * {
    opacity: 0;
    transform: translateY(18px);
  }

  /* --- Feature photographs: fade + slide up as one piece. --- */
  html.motion-b [data-mfx-media] {
    opacity: 0;
    transform: translateY(32px);
  }

  /* --- Grid cards: fade + slide up in sequence. --- */
  html.motion-b [data-mfx-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
  }
}