/* The film runs on time; page scrolling always remains native and independent. */
.experience{height:100svh}
.experience>.hero{position:relative;top:auto}
.experience-progress{display:none}
.experience-bottom .scroll-cue{opacity:1;visibility:visible;position:relative;padding:10px 0;transition:color .2s;pointer-events:auto}
.experience-bottom .scroll-cue:hover{color:#fff}
.experience-bottom .scroll-cue:focus-visible{outline-color:#f4f5df}
.experience-bottom .scroll-cue i{transition:transform .3s}
.experience-bottom .scroll-cue:hover i{transform:translateY(4px)}
.hero.at-ending .experience-bottom{color:#f3f6e8d4;text-shadow:0 1px 8px #123b38aa}
.hero.at-ending .hero-topline{opacity:1}
.film-copy{transition:none}
.film-copy .scene-description{font-size:12px}
.motion-description{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){.experience{height:100svh}.film-copy .scene-description{font-size:10px}.experience-bottom .scroll-cue{font-size:9px}}
@media(prefers-reduced-motion:reduce){.experience-bottom .scroll-cue{visibility:visible}.experience-counter{display:none}}

/* Keep the memory caption clear of the newly stacked chest hands. */
.film-copy-memory{max-width:25vw}
.film-copy-memory h2{font-size:clamp(30px,3.1vw,48px)}
@media(max-width:700px){
  .film-copy-memory{top:18%;bottom:auto;max-width:none}
  .film-copy-memory .scene-kicker{display:none}
  .film-copy-memory h2{font-size:22px;max-width:none;margin:0;letter-spacing:-.04em;text-shadow:0 2px 12px #062e2e}
  .film-copy-memory h2 br{display:none}
}

@media(max-width:700px){
  .hero[data-chapter='4']:after{content:'一歩、その先へ。';font-size:27px;bottom:9.5%;text-shadow:0 2px 14px #123f36}
}

/* A single decoded image is reused by the poster and the opening GPU texture.
   object-fit keeps the eye round even before any JavaScript has arrived. */
.film-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:48% 48%;transform:scale(1.025)}
@media(max-aspect-ratio:9/10){
  .film-copy-invitation{top:auto;bottom:10%;left:6vw;max-width:88vw}
  .film-copy-invitation h2{font-size:clamp(28px,8.1vw,38px);line-height:1.3;margin:12px 0}
  .film-copy-invitation h2 br{display:none}
  .film-copy-invitation .scene-description{font-size:9px}
}