/* Only scene choreography lives here; UI uses the same rules on both stages. */
.journey {position:relative;isolation:isolate;--intro-opacity:1;--intro-shift:0px;--hint-opacity:1;--scene-opacity:1;--scroll-lag:0px;--panel-offset:0px}
html.scroll-journey {overscroll-behavior-y:none}
/* Keep native edge resistance on phones without adding lag to normal swipes.
   Contain preserves local bounce/stretch while preventing pull-to-refresh. */
html.scroll-journey[data-scene-mode="phone-video"] {overscroll-behavior-y:contain}
/* Native scroll anchoring must not counteract this deliberately moving stage. */
html.scroll-journey[data-scene-mode="phone-video"] .journey {overflow-anchor:none}
/* The sticky mobile stage clips artwork without becoming a nested scroller. */
@supports (overflow:clip) {
  html.scroll-journey[data-scene-mode="phone-video"] .opening {overflow:clip}
}
html[data-scene-mode="phone-video"] .prism-control {pointer-events:none!important;touch-action:auto!important}
.scroll-journey .journey {height:calc(var(--scroll-distance,100svh) + var(--page-height,100svh));overflow:clip}
.scroll-journey .opening {position:sticky;top:0;height:var(--stage-height,100svh);min-height:0;z-index:0}
.scroll-journey .opening .copy {opacity:var(--intro-opacity);transform:translate3d(0,var(--intro-shift),0);will-change:opacity,transform}
.scroll-journey .scroll-overview {opacity:var(--hint-opacity)}
.scroll-journey .art {opacity:var(--scene-opacity)}
.scroll-journey .overview {position:absolute;top:var(--scroll-distance,100svh);left:0;right:0;height:var(--page-height,100svh);min-height:0;padding-top:var(--overview-top,32svh);padding-bottom:0;pointer-events:none;z-index:2;background:transparent;align-items:flex-start;scroll-margin-top:0;transform:translate3d(0,var(--panel-offset),0)}
.scroll-journey .overview-inner {pointer-events:auto}
.scroll-journey .site-footer {position:absolute;inset:auto 0 0;padding-block:16px;z-index:4;transform:translate3d(0,var(--panel-offset),0)}
@media (max-width:600px) {
  .scroll-journey .site-footer {padding-top:12px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media (min-height:560px) and (max-height:700px) {
  .scroll-journey .optical-frame {top:64px;height:calc(100% - 260px);min-height:0}
  .scroll-journey .copy {bottom:80px}
}

/* One mobile stage: host toolbar changes resize the viewport, while the hero's
   composition stays anchored. All scroll-linked surfaces share one progress. */
html.scroll-journey[data-scene-mode="phone-video"] .opening {height:var(--page-height)}
html.scroll-journey[data-scene-mode="phone-video"] .art {height:var(--stage-height);bottom:auto}
html.scroll-journey[data-scene-mode="phone-video"] .opening .copy {bottom:calc(var(--phone-copy-bottom) + var(--page-height) - var(--stage-height))}
html[data-scene-mode="phone-video"] .hero-line>span,
html[data-scene-mode="phone-video"] .hero-support {animation:none}
html[data-scene-mode="phone-video"] .glass-control {transition-duration:.18s}
html[data-scene-mode="phone-video"] .glass-control:active,
html[data-scene-mode="phone-video"] .glass-control.is-pressed {transition-duration:.11s}
@media (hover:none) and (pointer:coarse) {
  .hero-line>span,.hero-support {animation:none}
}