/* tiers · shared motion vocabulary
   One easing curve, three durations, defined once and reused on every page.
   Motion is gated on html.motion-ok, which only JS adds, and only when the
   visitor has not asked for reduced motion. Without it (no JS, reduced
   motion, old browsers) every element renders in its complete final state. */
:root {
  --m-fast: 180ms;
  --m-base: 420ms;
  --m-slow: 900ms;
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html.motion-ok [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--m-base) var(--m-ease), transform var(--m-base) var(--m-ease);
}
html.motion-ok [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
html.motion-ok [data-reveal="2"] { transition-delay: 100ms; }
html.motion-ok [data-reveal="3"] { transition-delay: 200ms; }
html.motion-ok [data-reveal="4"] { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html.motion-ok [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}