/* Scroll runway: the video holds while the reading apparatus leaves upward. */
.hero-scroll-runway{position:relative;height:180vh;height:180svh}
.hero-scroll-runway #stage{position:sticky;top:0;height:100vh;height:100svh;--hero-exit:0}
.hero-scroll-runway #scene,.hero-scroll-runway .compatible-viewer{transform:translate3d(0,calc(var(--hero-exit)*-112svh),0)}
.hero-scroll-runway #film-panel{translate:0 calc(var(--hero-exit)*-90svh)}
.hero-scroll-runway #stage.is-departing #scene,.hero-scroll-runway #stage.is-departing .compatible-viewer{pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-scroll-runway{height:100svh}.hero-scroll-runway #stage{position:relative}.hero-scroll-runway #scene,.hero-scroll-runway .compatible-viewer{transform:none}.hero-scroll-runway #film-panel{translate:none}}
/* Avoid an intermediate body scroll container intercepting sticky positioning. */
body:has(.hero-scroll-runway){overflow:visible}
html:has(.hero-scroll-runway){overflow-x:clip}
/* Content exits beneath the transparent navigation without crossing its labels. */
.hero-scroll-runway #scene,.hero-scroll-runway .compatible-viewer{clip-path:none}
.hero-scroll-runway #film-panel{clip-path:inset(max(0px,calc(var(--hero-exit)*90svh - 16svh)) 0 0)}
@media(max-width:700px){.hero-scroll-runway #film-panel{clip-path:inset(max(0px,calc(var(--hero-exit)*90svh - 51svh)) 0 0)}}
@media(prefers-reduced-motion:reduce){.hero-scroll-runway #scene,.hero-scroll-runway .compatible-viewer,.hero-scroll-runway #film-panel{clip-path:none}}

.hero-scroll-statement{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:80px 7% 48px;text-align:center;pointer-events:none;opacity:var(--statement-reveal,0);background:linear-gradient(180deg,transparent,#07142066 35%,#07142080 65%,transparent);color:#f5f9ff}
.hero-statement-copy{max-width:960px;transform:translate3d(0,calc((1 - var(--statement-reveal,0))*28px),0)}
.hero-scroll-statement h2{margin:0;font-size:clamp(36px,4.4vw,64px);line-height:1.25;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.hero-scroll-statement h2 span{display:block}.hero-scroll-statement h2 span+span{margin-top:10px}
.hero-scroll-statement p{margin:28px 0 0;font-size:18px;line-height:1.75;color:#d9e7f2;text-wrap:balance}
@media(max-width:700px){.hero-scroll-statement{padding-inline:6%}.hero-scroll-statement h2{font-size:clamp(28px,7.6vw,38px);line-height:1.3}.hero-scroll-statement p{font-size:15px;max-width:22em;margin:24px auto 0}}
@media(prefers-reduced-motion:reduce){.hero-scroll-statement{display:none}}