/* Scroll-driven print sequence. Layout, original artwork and motion stay separate. */
/* Keep the browser's restored scroll offset when the story and credit grid initialize. */
html { overflow-anchor: none; }
/* Fixed header never changes the page geometry when it enters after the opening. */
.landing-motion .site-header {
  position: fixed; inset: 0 0 auto; width: 100%;
  transform: translateY(-105%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .32s cubic-bezier(.22,.7,.2,1), opacity .24s ease;
}
.landing-motion .site-header.is-landing-visible {
  transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
}
.exhibition-hero {
  --hero-screen: calc(100vh - var(--header-height));
  --hero-screen: calc(100svh - var(--header-height));
  position: relative;
  padding: 0;
  background: #fff;
}
.landing-motion .exhibition-hero { --hero-screen: 100vh; --hero-screen: 100svh; }
.landing-motion .hero-paper .motion-target { --motion-opacity: .12; --motion-y: 10px; }
.landing-motion .hero-scene .motion-target { --motion-opacity: .08; --motion-y: 20px; --motion-scale: .965; }
.landing-motion .hero-english .motion-target,
.landing-motion .hero-details .motion-target { --motion-opacity: 0; --motion-y: 14px; }
.landing-motion .print-line > img { visibility: hidden; }
.landing-motion .back-to-top { visibility: hidden; }
.landing-motion .is-story-past .back-to-top { visibility: visible; }
.hero-pin { position: relative; height: var(--hero-screen); min-height: 420px; isolation: isolate; }
.hero-sound { display: none; }
.is-scroll-story .hero-sound:not([hidden]) {
  position: absolute; top: 22px; right: 48px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 13px; border: 1px solid #e0e5e2; border-radius: 2px;
  background: rgba(255,255,255,.94); color: #68726d;
  font: 400 13px/1.4 var(--ui-font); white-space: nowrap; cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.is-scroll-story .hero-sound:not([hidden]):is(:hover, [aria-pressed="true"]) { color: var(--red); border-color: var(--red); }
.hero-sound:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.hero-sound .sound-waves, .hero-sound[aria-pressed="true"] .sound-muted { display: none; }
.hero-sound[aria-pressed="true"] .sound-waves { display: block; }
.is-scroll-story .hero-sound[data-sound-state="waiting"] { color: var(--red); border-color: var(--red); }
.hero-sound[data-sound-state="waiting"] .sound-muted { display: none; }
.hero-sound:disabled { cursor: default; opacity: .6; }
.hero-poster { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px 0 94px; }
.hero-poster > .wrap {
  width: min(calc(100% - 96px), calc((var(--hero-screen) - 124px) * 1.9045), 1720px);
  max-width: none;
}
/* Reveal the artwork inside its original layout, then print the three title lines. */
.print-line { position: relative; }
.strike-glyph { display: none; position: absolute; inset: 0; opacity: 0; transform-origin: var(--glyph-origin) 65%; }
.strike-glyph img { display: block; width: 100%; height: auto; }
.type-caret { display: none; position: absolute; bottom: 5%; width: 10px; height: 2px; background: var(--red); opacity: 0; }
.is-scroll-story .print-line.is-split > img { visibility: hidden; }
.is-scroll-story .strike-glyph, .is-scroll-story .type-caret { display: block; }
.hero-scroll-guide {
  position: absolute; bottom: 24px; left: 48px; right: 48px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  font: 400 13px/1.5 var(--ui-font); color: #69716e; z-index: 3;
}
.hero-scroll-instruction { grid-column: 3; grid-row: 1; justify-self: end; display: none; align-items: center; gap: 12px; white-space: nowrap; }
.scroll-arrow { color: var(--red); font-size: 24px; line-height: 1; }
.hero-skip { grid-column: 1; grid-row: 1; justify-self: start; text-decoration: none; color: var(--ink); padding: 10px 0; }
.is-story-playing .back-to-top { visibility: hidden; opacity: 0; pointer-events: none; }
.hero-skip span { color: var(--red); font-size: 20px; padding-left: 7px; }
.hero-skip:hover { color: var(--red); }
.typing-progress { grid-column: 2; grid-row: 1; display: none; gap: 22px; }
.typing-progress > span { position: relative; padding-top: 12px; white-space: nowrap; min-width: 90px; color: #8c9390; }
.typing-progress b { font-size: 10px; font-weight: 400; margin-right: 5px; }
.typing-progress i { position: absolute; height: 2px; top: 0; left: 0; width: 100%; background: #e4e8e6; }
.typing-progress i::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleX(var(--step-progress, 0)); transform-origin: left; }
.typing-progress > span.is-current { color: var(--red); }
.exhibition-hero.is-scroll-story { height: calc(var(--hero-screen) + 205svh); }
.is-scroll-story .hero-pin { position: sticky; top: 0; }
.is-scroll-story .hero-scroll-instruction, .is-scroll-story .typing-progress { display: flex; }
.story-head-ready .section-index { transition: opacity .35s ease, transform .35s ease; }
.story-head-ready h2 { transition: clip-path .65s cubic-bezier(.22,.7,.2,1), transform .65s cubic-bezier(.22,.7,.2,1); }
.story-head-ready > p:last-child:not(.section-index) { transition: opacity .6s ease .16s, transform .6s ease .16s; }
.story-head-ready:not(.is-visible) .section-index { opacity: 0; transform: translateY(8px); }
.story-head-ready:not(.is-visible) h2 { clip-path: inset(0 100% 0 0); transform: translateY(9px); }
.story-head-ready:not(.is-visible) > p:last-child:not(.section-index) { opacity: 0; transform: translateY(10px); }
.story-head-ready.is-visible h2 { clip-path: inset(0 0 0 0); }

@media (max-width: 1024px) {
  .is-scroll-story .hero-sound:not([hidden]) { right: 32px; }
  .hero-scroll-guide { left: 32px; right: 32px; font-size: 12px; gap: 16px; }
  .typing-progress { gap: 14px; }
  .typing-progress > span { min-width: 72px; }
}
@media (max-width: 640px) {
  .is-scroll-story .hero-sound:not([hidden]) { top: 8px; right: 20px; padding-inline: 10px; gap: 6px; font-size: 12px; }
  .hero-pin { min-height: 460px; }
  .hero-poster { padding: 24px 0 120px; }
  .hero-poster > .wrap { width: min(calc(100% - 40px), 460px); }
  .hero-poster .hero-stage { height: min(calc(var(--hero-screen) - 152px), 690px); min-height: 330px; aspect-ratio: auto; }
  .hero-poster .hero-title-two { top: 15%; }
  .hero-poster .hero-title-three { top: 30%; }
  .hero-poster .hero-paper { top: 18%; }
  .hero-poster .hero-scene { top: 35%; }
  .hero-poster .hero-details { top: auto; bottom: 0; }
  .hero-poster .hero-english { top: auto; bottom: 0; }
  .hero-scroll-guide { left: 20px; right: 20px; bottom: 18px; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 12px; font-size: 11px; }
  .hero-scroll-instruction { grid-column: 2; gap: 8px; white-space: normal; text-align: right; }
  .hero-scroll-copy { word-break: keep-all; }
  .scroll-arrow { font-size: 20px; }
  .hero-skip { padding: 4px 0; }
  .hero-skip span { font-size: 17px; padding-left: 3px; }
  .typing-progress { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 16px; }
  .typing-progress > span { flex: 1; min-width: 0; padding-top: 9px; }
  .exhibition-hero.is-scroll-story { height: calc(var(--hero-screen) + 190svh); }
}
@media (max-height: 600px) and (min-width: 641px) {
  .hero-pin { min-height: 320px; }
  .hero-poster { padding: 16px 0 76px; }
  .hero-poster > .wrap { width: min(calc(100% - 96px), calc((var(--hero-screen) - 92px) * 1.9045)); }
  .hero-scroll-guide { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-motion .site-header { position: sticky; transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .landing-motion .exhibition-hero { --hero-screen: calc(100svh - var(--header-height)); }
  .exhibition-hero.is-scroll-story { height: auto; }
  .is-scroll-story .hero-pin { position: relative; top: auto; }
  .strike-glyph, .type-caret, .hero-scroll-instruction, .typing-progress, .hero-sound { display: none !important; }
  .print-line.is-split > img { visibility: visible !important; }
  .story-head-ready * { transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}