/* motion.css — scroll-driven reveals + JS-Fallback */

/* ── JS-Fallback path (low-motion or no SDA support) ─────────────────── */
/* Default: elements are visible (no-JS safety net) */
[data-reveal]{opacity:1}

/* When JS runs and SDA is NOT supported: hide then reveal via observer */
@media (scripting: enabled){
  [data-reveal]:not([data-revealed]){opacity:0;transform:translateY(40px)}
}
[data-revealed]{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease, ease-out),transform .6s var(--ease, ease-out);
}

/* When SDA IS supported: CSS handles it, so reset any JS-fallback hiding */
@supports (animation-timeline: view()){
  [data-reveal]:not([data-revealed]){opacity:1;transform:none}
}

/* ── CSS Scroll-driven animations (native, compositor-only) ──────────── */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    [data-reveal]{
      animation:reveal-up linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    [data-reveal][style*="--i"]{
      animation-delay:calc(var(--i, 0) * .06s);
    }
    @keyframes reveal-up{
      from{opacity:0;transform:translateY(40px)}
      to{opacity:1;transform:none}
    }
    /* Hero parallax on the visual element */
    .hero__visual{
      animation:hero-par linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes hero-par{
      to{transform:translateY(-6%)}
    }
  }
}

/* ── Reduced-motion: everything immediately visible, no movement ─────── */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-revealed],.hero__visual{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
}