/* Motion: scroll reveals, hero entrance, image curtains, page transitions. Grain lives in main.css. */

/* Smooth scroll (Lenis via Locomotive Scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Reveals: content is visible by default; motion.js adds .js-motion before hiding anything. */
.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
.js-motion [data-reveal="fade"] { transform: none; }

/* Image curtain: image settles from a slight zoom as a dark panel lifts away. */
.js-motion [data-curtain] { position: relative; overflow: hidden; }
.js-motion [data-curtain]::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: top; transition: transform 1.3s var(--ease-out); transition-delay: var(--d, 0s); }
.js-motion [data-curtain] img { transform: scale(1.12); transition: transform 2s var(--ease-out); transition-delay: var(--d, 0s); }
.js-motion [data-curtain].is-in::after { transform: scaleY(0); }
.js-motion [data-curtain].is-in img { transform: none; }
.section--light [data-curtain]::after { background: var(--ivory-2); }

/* Hero entrance: lines rise, then intro and rule follow. */
.js-motion .hero__title .line > span, .js-motion .phero__title .line > span { transform: translate3d(0, 105%, 0); transition: transform 1.25s var(--ease-out); transition-delay: calc(.15s + var(--i, 0) * .09s); }
.js-motion.is-loaded .hero__title .line > span, .js-motion.is-loaded .phero__title .line > span { transform: none; }
.js-motion .hero__media img { transform: scale(1.08); transition: transform 2.6s var(--ease-out); }
.js-motion.is-loaded .hero__media img { transform: scale(1); }
.js-motion [data-hero] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(.55s + var(--i, 0) * .1s); }
.js-motion.is-loaded [data-hero] { opacity: 1; transform: none; }
.js-motion .hero__foot { border-top-color: transparent; background: linear-gradient(var(--line-strong), var(--line-strong)) top left / 0 1px no-repeat; transition: background-size 1.6s var(--ease-out) .5s; }
.js-motion.is-loaded .hero__foot { background-size: 100% 1px; }

/* Page transitions: native cross-document View Transitions. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .28s var(--ease-in) both; }
::view-transition-new(root) { animation: page-in .6s var(--ease-out) .04s both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  body::after { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}