/* Native layout owns vertical position; never counter-translate on scroll. */
#story .story-stage { transform: none; opacity: 1; mask-image: none; }
.story-surface { position: relative; width: 100%; }
.story-animated:not(.story-immersive-entry) #story .story-stage { mask-image: none; }
.story-animated #home-scene :is(.wallpaper,.wash,.petals) { opacity: 1; }
.story-native-entry #story {
  margin-top: calc(-1 * var(--entry-length));
  height: calc(var(--entry-length) + var(--story-surface-height));
  scroll-margin-top: calc(-1 * var(--entry-length));
}
.story-native-entry #story .story-surface {
  position: sticky; top: 0;
  animation: story-native-enter linear both;
  animation-timeline: scroll(root block);
  animation-range: 0px var(--entry-length);
}
.story-native-entry:not(.story-engaged) #story .story-surface { pointer-events: none; }
.story-native-entry #home-scene .page > :is(header,main),
.story-native-entry #home-scene footer > :not(.music-home-slot),
.story-native-entry #home-scene .story-cue {
  animation: story-home-leave linear both;
  animation-timeline: scroll(root block);
  animation-range: 0px var(--entry-length);
}
.story-native-entry.story-home-hidden #home-scene .page > :is(header,main),
.story-native-entry.story-home-hidden #home-scene footer > :not(.music-home-slot) { visibility: hidden; pointer-events: none; }
@keyframes story-native-enter { 0% { opacity: 0; } 85%,100% { opacity: 1; } }
@keyframes story-home-leave { 0%,8% { opacity: 1; } 65%,100% { opacity: 0; } }
@supports (animation-timeline: view()) {
  .story-animated:not(.story-native-entry) #story .story-stage {
    animation: story-natural-enter linear both;
    animation-timeline: view(block);
    animation-range: entry 0% entry 85%;
  }
}
@keyframes story-natural-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .story-native-entry #story { margin-top: 0; height: auto; scroll-margin-top: 0; }
  .story-native-entry #story .story-surface { position: relative; }
  #story .story-surface, #story .story-stage,
  .story-native-entry #home-scene .page > :is(header,main),
  .story-native-entry #home-scene footer > :not(.music-home-slot),
  .story-native-entry #home-scene .story-cue { animation: none !important; }
}

/* One story viewport. Preserve the entire original; fill only outside it. */
#story .story-surface, #story .story-stage { height: 100svh; }
#story .story-stage { aspect-ratio: auto; }
#story .story-frame::before {
  content: ""; position: absolute; inset: -32px; z-index: 0;
  background: var(--story-image) center / cover;
  filter: blur(28px) saturate(.82) brightness(.82); opacity: 1;
}
#story .story-art { z-index: 1; object-fit: contain; object-position: center; }
#story .story-ambient { z-index: 2; }
#story .story-reading-surface { max-height: calc(100svh - 190px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1200px) {
  #story:has(.story-slide.is-active) .story-content {
    position: absolute; top: auto; bottom: 128px; left: 4%; right: 4%;
    width: 92%; max-width: 820px; margin-inline: auto; transform: none;
    border-radius: 3px; background: rgba(30,40,56,.86);
  }
  #story .story-reading-surface { max-height: calc(100svh - 220px); }
  #story:has(.story-slide--academy.is-active) .story-content,
  #story:has(.story-slide--japan.is-active) .story-content { background: rgba(242,236,223,.94); }
  #story .story-controls { bottom: 24px; }
  #story .story-reading-buttons { bottom: 84px; }
  .story-reading-inner { padding: 22px; }
}

/* Keep touch/keyboard reading available without a bright scrollbar over art. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
#story .story-reading-surface { scrollbar-width: none; }
#story .story-reading-surface::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Invisible story interaction */
#story .story-controls, #story .story-reading-buttons,
#story .story-back, #story .story-reading-close { display: none; }
#story .story-stage { outline: none; }
#story .story-surface { cursor: default; }
.story-home-hidden #music-home-slot .music-player { visibility: hidden; pointer-events: none; }