/* Motion system: 16–32px travel, 450–850ms, 60–120ms stagger. Content is visible by default;
   hidden states only apply when JS adds .js-motion to <html>. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

.js-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-reveal="left"] { transform: translateX(-28px); }
.js-motion [data-reveal="right"] { transform: translateX(28px); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Image mask reveal */
.js-motion [data-mask] { clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-out); }
.js-motion [data-mask].is-in { clip-path: inset(0); }

/* Header slides in only after the first-visit intro; later pages stay still (View Transitions handle the rest) */
.js-motion.loader-full .site-header { transform: translateY(-100%); transition: transform 700ms var(--ease-out), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2); }
.js-motion.loader-full.is-loaded .site-header { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js-motion [data-reveal], .js-motion [data-mask], .js-motion .site-header { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .slide-copy .line > span, .js .slide-copy [data-in] { transform: none !important; opacity: 1 !important; }
  .slide img { transform: none !important; }
  @view-transition { navigation: none; }
}