/* Explicit timeline/review seeks retain their original document layout. */
body.story-complete .agent-features { margin-top: 0; }

/* A failed WebGL initialization must leave the rest of the preview reachable. */
body.story-failed .agent-features { margin-top: 0; }

/* A touch browser's address bar must not change animation track geometry.
   Visible scenes paint into the current viewport independently. */
@media (hover: none) and (pointer: coarse) {
 .hp-preview .experience { height: var(--hp-viewport-height, 100svh); }
 .hp-preview .workflow-scroll { height: calc(var(--hp-viewport-height, 100svh) + var(--workflow-travel, 0px)); }
 .hp-preview .workflow-scroll .workflow-sticky, .hp-preview .closing-section { height: 100svh; height: 100dvh; }
}

@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
 .hp-preview:not(.story-complete):not(.story-failed) .agent-features { margin-top: calc(-1 * var(--hp-viewport-height, 100svh)); }
}

/* Bloom's fixed active scene with in-flow endpoints. The first feature sheet
   shares the viewport during docking, then continues from that exact position. */
body.story-native .experience { height: calc(var(--story-travel) + var(--hp-viewport-height)); }
body.story-native .story-content-shell { margin-top: calc(-1 * var(--hp-viewport-height)); }
body.story-native #next { margin-top: 0; }
body.story-native:not(.story-past) #stage { position: fixed; inset: 0 0 auto; height: var(--hp-viewport-height); }
body.story-native:not(.story-past) #next { position: fixed; top: 0; left: 0; right: 0; }
body.story-native.story-past #stage { position: absolute; top: auto; bottom: 0; height: var(--hp-viewport-height); }

/* Restore after the stable story track exists; never expose the top of the
   document for a frame while a lower section is being reconstructed. */
/* Demo timelines set visibility:visible on their own descendants. Opacity on
   the main element keeps those descendants covered until entry is prepared. */
.page-restoring main { visibility: hidden; opacity: 0; }
/* Refresh/history restores resume the current section without a loading screen. */
.page-resuming #loading { display: none !important; }
html.page-restoring, .page-restoring body { background: var(--resume-background, var(--color-background-mute)); }
.page-restoring[data-resume-region="intro"] { --resume-background: var(--color-homepage-backdrop-dark-background); }
.page-restoring[data-resume-region="banner"], .page-restoring[data-resume-region="gathered"] { --resume-background: var(--color-homepage-root-paper); }
.page-restoring[data-resume-region^="agent-"] { --resume-background: var(--color-homepage-feature-card-background); }
.page-restoring[data-resume-region="agent-entry"] { --resume-background: var(--color-homepage-change-world-background-background); }
.page-restoring[data-resume-region="#workflow"] { --resume-background: var(--color-homepage-workflow-scroll-workflow-surface-background); }
.page-restoring[data-resume-region=".closing-reveal"] { --resume-background: var(--color-homepage-closing-reveal-background); }
/* Match the reserved scrollbar area to the original dark loading screen. */
html.js:not(.page-resuming):has(#loading:not([hidden])) { background: var(--color-homepage-backdrop-dark-background); }

/* Only the painted hero follows browser chrome. Its scroll track and the
   shared Agent handoff keep their stable document height and distance. */
@media (hover: none) and (pointer: coarse) {
 .hp-preview #stage, body.hp-preview.story-native #stage { height: 100svh; height: 100dvh; }
}