/* Motion vocabulary. Every moving rule is keyed on html.mo (set by scripts/motion.ts only when
   motion is allowed). Without it, everything renders in its finished state. */
:root { --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.4, 0, .2, 1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* split headline: letters rise from below, stretched, and settle (Card Story) */
.sp-w { display: inline-block; white-space: nowrap; }
.sp-c { display: inline-block; }
.mo .is-split .sp-c { opacity: 0; transform: translateY(50%) scaleY(1.4); transform-origin: 50% 100%;
  transition: opacity .8s var(--ease), transform 1.3s var(--ease); transition-delay: calc(var(--i) * 22ms + 60ms); }
.mo .is-split.in .sp-c { opacity: 1; transform: none; }

/* word-by-word scroll reveal with blur and a slight tilt that straightens (Scroll Landing) */
.wd { display: inline-block; }
.mo [data-words] { transform: rotate(calc((1 - var(--p, 0)) * 1.6deg)); transform-origin: 0 50%; }
.mo [data-words] .wd { --k: clamp(0, calc((var(--p, 0) * (var(--n) + 6) - var(--i)) / 6), 1);
  opacity: calc(.12 + .88 * var(--k)); filter: blur(calc((1 - var(--k)) * 4px)); }

/* risers: fade up with ease-out-expo */
.mo [data-rise] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.mo [data-rise].in { opacity: 1; transform: none; }

/* pinned scene: a tall section whose stage sticks while --p runs 0 → 1 */
.pin { position: relative; }
.pin__stage { position: relative; min-height: 100svh; overflow: hidden; }
.mo .pin { height: calc(var(--span, 2) * 100svh); }
.mo .pin__stage { position: sticky; top: 0; height: 100svh; }

/* marquee rows driven by scroll (Scroll Marquee): JS sets the transform */
[data-marquee] { overflow: hidden; }
[data-marquee] [data-dir] { display: flex; gap: 12px; width: max-content; will-change: transform; }

/* scroll ruler down the right edge */
.ruler { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 50; display: grid; gap: 7px; pointer-events: none; }
.ruler i { display: block; width: 8px; height: 1px; background: #9b917f; margin-left: auto; transition: width .3s var(--ease), background-color .3s; }
.ruler i:nth-child(4n+1) { width: 12px; }
.ruler i.on { width: 22px; background: var(--sc-accent); }
@media (max-width: 900px) { .ruler { display: none; } }

/* nav labels fly up on hover (Scroll Landing NavItem) */
.fly { display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25; vertical-align: bottom; }
.fly > span { display: block; transition: transform .4s var(--ease-io); }
.fly > span::after { content: attr(data-t) / ""; display: block; color: #fff; }
a:hover > .fly > span, a:focus-visible > .fly > span { transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .fly > span { transition: none; } }

/* outlined display type */
.outline { color: transparent; -webkit-text-stroke: 1.5px currentColor; }