/* Scroll reveals. Uses translate/scale (not transform) so it never fights an element's own transform. */
.sr-on .sr { opacity: 0; filter: blur(8px); transition: opacity 800ms var(--ease-out) var(--sd, 0s), translate 900ms var(--ease-out) var(--sd, 0s), scale 900ms var(--ease-out) var(--sd, 0s), filter 800ms var(--ease-out) var(--sd, 0s); }
.sr-on .sr-up { translate: 0 38px; scale: 0.98; }
.sr-on .sr-left { translate: -56px 0; scale: 0.97; }
.sr-on .sr-right { translate: 56px 0; scale: 0.97; }
.sr-on .sr-zoom { translate: 0 24px; scale: 0.93; }
.sr-on .sr.in { opacity: 1; filter: none; translate: 0 0; scale: 1; }

/* headings: a kicker that slides in, a title that wipes open, a line that fades up */
.sr-on .sr-head .kicker { opacity: 0; translate: -24px 0; transition: opacity 600ms var(--ease-out), translate 700ms var(--ease-out); }
.sr-on .sr-head .h2 { opacity: 0.2; translate: 0 18px; clip-path: inset(-12% 100% -18% -2%); transition: clip-path 1100ms cubic-bezier(0.65, 0, 0.2, 1) 120ms, opacity 700ms 120ms, translate 900ms var(--ease-out) 120ms; }
.sr-on .sr-head .sub { opacity: 0; translate: 0 16px; transition: opacity 800ms var(--ease-out) 520ms, translate 900ms var(--ease-out) 520ms; }
.sr-on .sr-head.in .kicker, .sr-on .sr-head.in .sub { opacity: 1; translate: 0 0; }
.sr-on .sr-head.in .h2 { opacity: 1; translate: 0 0; clip-path: inset(-12% -2% -18% -2%); }

/* the aurora behind the page drifts at its own pace */
.spotlight::before { top: calc(-8% + clamp(-60px, calc(var(--sy, 0) * -0.012px), 0px)); }