/* V15: the cinematic chapters are a fixed viewport experience, not a long
   document being scrolled through. This avoids mobile browser chrome changes
   creating a visible gap or shifting the picture vertically. */
html:has(body.home-page.cinema-active),
body.home-page.cinema-active { overflow:hidden !important; overscroll-behavior:none; }
body.home-page.cinema-active { width:100%; }
.home-page.cinema-active .scroll-story { height:100dvh !important; min-height:0 !important; }
.home-page.cinema-active .stage {
  position:fixed !important; inset:0 !important; top:0 !important;
  height:100dvh !important; min-height:100dvh !important; max-height:100dvh !important;
  width:100vw; overflow:hidden !important; transform:none;
}
.home-page.cinema-active .scene-stack,
.home-page.cinema-active .scene { inset:0; height:100%; width:100%; }
/* V14 had an opaque ::before pseudo-element painting over desktop images.
   It was only half-transparent on mobile, which explains the black desktop. */
.home-page.cinema-active .scene-media::before { display:none !important; }
/* A whole scene (including headings) is crossfaded as one visual layer. */
.home-page.cinema-active .scene-copy { opacity:1 !important; transform:translateY(-47%) !important; transition:none !important; }
.home-page.cinema-active .scene { will-change:opacity; }
.home-page .scroll-progress { width:100% !important; transform-origin:0 50%; }
.home-page.cinema-exited .scroll-story { display:none !important; }
.home-page.cinema-exited .stage { display:none !important; }
/* Keep all scene artwork visible at its full intrinsic aspect ratio. */
.home-page.cinema-active .scene-media img { width:100%; height:100%; object-fit:contain !important; object-position:center !important; }
@media (max-width:720px){
  .home-page.cinema-active .stage { height:100dvh !important; min-height:100dvh !important; max-height:100dvh !important; }
  .home-page.cinema-active .scroll-story { height:100dvh !important; }
  .home-page.cinema-active .stage-bottom { bottom:max(14px,env(safe-area-inset-bottom)) !important; }
  .home-page.cinema-active .scene-copy { transform:none !important; }
}
@media(prefers-reduced-motion:reduce){ .home-page.cinema-active .scene {transition:none !important} }