/*
 * Motion — header / menu / column-guide animations and the image parallax setup (the scroll reveals were dropped).
 * Animations use `backwards` fill so hover/active styles keep working after they finish.
 */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

@keyframes m-up   { from { opacity: 0; translate: 0 28px; } }
@keyframes m-grow { from { scale: 1 0; } }
@keyframes m-in   { from { opacity: 0; } }

/* ── Images: parallax moves the image inside its frame ────────────────── */
.js-motion .site-main figure { overflow: hidden; }
.js-motion .site-main figure:not([data-motion="off"]) img { scale: 1.1; will-change: translate; }

/* ── Column guides draw from the top on load ────────────────────────────── */
.js-motion .site-main > .grid-lines span {
    transform-origin: top;
    animation:        m-grow 1.6s var(--ease-out) calc(var(--i, 0) * .07s) backwards;
}
.js-motion .site-main > .grid-lines span:nth-child(1) { --i: 0; }
.js-motion .site-main > .grid-lines span:nth-child(2) { --i: 1; }
.js-motion .site-main > .grid-lines span:nth-child(3) { --i: 2; }
.js-motion .site-main > .grid-lines span:nth-child(4) { --i: 3; }
.js-motion .site-main > .grid-lines span:nth-child(5) { --i: 4; }
.js-motion .site-main > .grid-lines span:nth-child(6) { --i: 5; }

/* ── Header on load ─────────────────────────────────────────────────────── */
.js-motion .site-header__inner > * { animation: m-in 1s var(--ease-out) .1s backwards; }

/* ── Menu overlay: items rise in one by one on every open ───────────────── */
.js-motion .site-menu.is-open :is(.site-menu__group, .site-menu__aside, .site-menu__move, .site-menu__cta) {
    animation: m-up .8s var(--ease-out) calc(.12s + var(--k, 0) * .07s) backwards;
}
.js-motion .site-menu .site-menu__nav > :nth-child(1) { --k: 0; }
.js-motion .site-menu .site-menu__nav > :nth-child(2) { --k: 1; }
.js-motion .site-menu .site-menu__nav > :nth-child(3) { --k: 2; }
.js-motion .site-menu .site-menu__nav > :nth-child(4) { --k: 3; }
.js-motion .site-menu .site-menu__nav > :nth-child(5) { --k: 4; }

@media (prefers-reduced-motion: reduce) {
    .js-motion *, .js-motion *::before, .js-motion *::after { animation: none !important; }
}