/* Clip decorative overflow: hidden would allow focus to scroll the entire stage.
 * The inner reader remains the only scroll container. */
#chapter-cinema{--scene-accent:#e2bb7a;--look-x:0px;--look-y:0px;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:clip;background:#121b1c;color:#fff6e4;box-shadow:none;isolation:isolate;font-family:var(--sans)}
#chapter-cinema[open]{animation:none;transform:none;opacity:1}
#chapter-cinema:not([open]){display:none}
#chapter-cinema::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#chapter-cinema::after{content:'';position:absolute;inset:0;z-index:20;pointer-events:none;background:#101921;opacity:0}
/* The decoded photo is prepared over the retained artwork, then crossfaded.
   An opaque modal backdrop would hide that artwork before the first frame. */
#chapter-cinema[open].scene-covered{opacity:0}
#chapter-cinema.scene-covered::after{opacity:.16}
#chapter-cinema.scene-covered .cinema-hero,#chapter-cinema.scene-covered #cinema-scroll{visibility:hidden}
#chapter-cinema.scene-enter::after{transition:opacity .35s ease}
.cinema-photo-wrap{position:absolute;inset:-2%;z-index:-5;overflow:hidden;transform:translate(var(--look-x),var(--look-y)) scale(1.035);background:radial-gradient(ellipse at 25% 30%,#59676c,#19252a 75%)}
#cinema-photo{width:100%;height:100%;object-fit:cover;filter:saturate(.85);animation:photo-breathe 26s ease-in-out infinite alternate}
#chapter-cinema[data-scene=arrival] #cinema-photo{filter:saturate(.85) sepia(.12)}
#chapter-cinema[data-scene=daily] #cinema-photo{filter:saturate(.8) sepia(.2)}
#chapter-cinema[data-scene=labor] #cinema-photo{filter:saturate(.65) sepia(.35) contrast(1.04)}
#chapter-cinema[data-scene=history] #cinema-photo{filter:saturate(.7) sepia(.08)}
#chapter-cinema[data-scene=coast] #cinema-photo{filter:saturate(1.05)}
#chapter-cinema[data-scene=future] #cinema-photo{filter:saturate(.9) hue-rotate(-5deg)}
.photo-failed #cinema-photo{visibility:hidden}
.cinema-grade{position:absolute;inset:0;background:linear-gradient(90deg,#0b151b66 0%,#07151c22 40%,#111a20b8 69%,#0d161ee8 100%),linear-gradient(0deg,#0a131fe8 0%,transparent 35%,#07111a99 100%)}
.cinema-light{pointer-events:none;position:absolute;z-index:-3;inset:-20%;background:conic-gradient(from 195deg at 22% 0%,transparent 0deg,#ffe8ac16 12deg,transparent 25deg,#e9d8a619 38deg,transparent 60deg);filter:blur(12px);mix-blend-mode:screen;animation:cinema-rays 18s ease-in-out infinite alternate}
#cinema-particles{position:absolute;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}
.cinema-bokeh{pointer-events:none;position:absolute;inset:0;z-index:-2;filter:blur(9px);background:radial-gradient(circle at 4% 88%,#f4d08e32 0 24px,transparent 55px),radial-gradient(circle at 58% 6%,#ead5ab19 0 40px,transparent 80px),radial-gradient(circle at 87% 87%,#9fc6dd24 0 16px,transparent 60px);animation:bokeh-drift 16s ease-in-out infinite alternate}
.cinema-header{height:94px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #f3d6a326;background:linear-gradient(#09121791,transparent);position:relative;z-index:5}
#chapter-cinema button{font:14px/1.6 var(--sans);color:#fff0d4;min-height:44px}
.cinema-header button{background:#101b244d;border:1px solid #e9d6aa42;padding:9px 17px}
.cinema-header>div{display:flex;gap:12px;align-items:center}
.cinema-brand{font:17px var(--serif);letter-spacing:5px;color:#f5dfb4}
.cinema-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,39%);height:calc(100% - 208px);gap:6vw;padding:0 4% 0 7%;position:relative;z-index:2}
.cinema-hero{align-self:center;max-width:670px;padding:32px 0 48px;text-shadow:0 2px 24px #0009}
#cinema-number{font:11px/1.8 var(--sans);letter-spacing:4px;color:#f5d6a4;margin:0 0 26px}
.cinema-rule{display:block;width:72px;height:1px;background:var(--scene-accent);margin-bottom:26px;box-shadow:0 0 12px #ffe6aa99}
#chapter-cinema #cinema-title{font:400 clamp(64px,6.8vw,130px)/1.22 var(--serif);letter-spacing:.11em;color:#fff7df;margin:0 0 22px;text-shadow:0 3px 35px #0008}
#cinema-place{font:20px var(--serif);letter-spacing:7px;color:#f2d3a0;margin:0 0 24px}
#cinema-opening{font:18px/2.1 var(--serif);color:#f7efdd;max-width:430px;margin:0 0 28px}
.cinema-fiction{font-size:11px;color:#ecddc1c4;letter-spacing:2px;display:block}
#cinema-read{margin-top:28px;background:transparent;border:0;border-bottom:1px solid #d8b77b;padding:12px 0;min-width:158px;display:flex;justify-content:space-between;gap:36px;letter-spacing:3px}
#cinema-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d7b47a66 transparent;margin:26px 0 14px;border:1px solid #e7d2aa29;background:linear-gradient(130deg,#16242cbe,#111e29c7);backdrop-filter:blur(18px);border-radius:2px;box-shadow:0 18px 70px #0002}
#chapter-cinema .story-panel{padding:28px 32px 40px;color:#fff0da;font-size:16px;line-height:1.9}
#chapter-cinema .story-panel>.story-heading,#chapter-cinema .story-panel>.story-eyebrow,#chapter-cinema .story-panel>.story-fiction,#chapter-cinema .story-panel>.story-lead,#chapter-cinema #story-directory{display:none}
#chapter-cinema .story-panel h3{color:#f6ddb5;font-size:22px;letter-spacing:2px}
#chapter-cinema .story-archive{margin:0 0 24px;border-color:#bba78244}
#chapter-cinema .story-archive summary{line-height:1.8;padding:8px 0;color:#e9c694}
#chapter-cinema .story-source,#chapter-cinema .story-back{color:#e8c896}
#chapter-cinema .story-task{color:#eee3d1}
#chapter-cinema .story-button{background:#e7d6b012;color:#fff1d8;border:1px solid #c8ae7c60;border-radius:1px}
#chapter-cinema .story-button:hover:not(:disabled){background:#d2b07828;border-color:#e4bf80}
#chapter-cinema .story-primary{background:linear-gradient(110deg,#d6b374,#f0d5a0);color:#30281b;border:1px solid #eed2a1;letter-spacing:2px}
#chapter-cinema .story-primary:hover:not(:disabled){background:#ffe5b4;color:#30281b}
#chapter-cinema .story-choices .story-button[aria-pressed=true]{background:#d3b27e;color:#241e14;border-color:#f4d69b}
#chapter-cinema .story-hint,#chapter-cinema .story-storage,#chapter-cinema .story-feedback{color:#e4cfac}
#chapter-cinema .storage-warning{background:#74603d66;color:#fff1d5}
#chapter-cinema .story-explanation{color:#f0dec0;border-color:#d8b77b}
#chapter-cinema .story-earned{background:linear-gradient(135deg,#e2c48a1a,#b69a6933);color:#fff0d4;border-color:#ddc08a80}
#chapter-cinema .story-stamp{color:#f0c88a;border-color:#d5aa73}
#chapter-cinema .story-earned p{color:#fff1d8}
#chapter-cinema .story-actions,#chapter-cinema .story-boundary{border-color:#bba78244}
.cinema-footer{height:114px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 4%;position:relative;z-index:5;background:linear-gradient(transparent,#0b1524bc);border-top:1px solid #c8ae7c33}
.cinema-photo-note{font-size:10px;line-height:1.9;color:#ede1cbbb;max-width:45%;display:flex;flex-wrap:wrap;column-gap:12px}
#cinema-photo-caption{display:block;width:100%;color:#fff1d5;font-size:11px}
.cinema-photo-note a{color:inherit;text-decoration:underline;text-underline-offset:3px;min-height:24px}
#cinema-chapters{display:flex;gap:10px}
#cinema-chapters button{width:44px;padding:0;background:transparent;border:1px solid #d8ba7b55;border-radius:50%;font:12px var(--sans);color:#ead5ad}
#cinema-chapters [aria-current=true]{background:#eed5a2;color:#272721;box-shadow:0 0 24px #efdba833;border-color:#eed5a2}
#cinema-progress{font-size:11px;letter-spacing:2px;white-space:nowrap;color:#f4dab1}
#chapter-cinema :focus-visible{outline:2px solid #ffe0a2;outline-offset:5px}
#chapter-transition{position:fixed;inset:0;z-index:1000;color:#fff5de;pointer-events:auto;background:transparent}
#chapter-transition[hidden]{display:none}
.travel-veil{position:absolute;inset:0;background:linear-gradient(0deg,#101921,#10192122 60%,#10192177);opacity:0}
.travelling .travel-veil{animation:travel-fade var(--travel-duration) ease-in forwards}
.travel-caption{position:absolute;left:7%;bottom:17%;display:flex;flex-direction:column;gap:16px;text-shadow:0 2px 20px #0008;opacity:0}
.travelling .travel-caption{animation:travel-caption var(--travel-duration) ease forwards}
.travel-caption span{font-size:12px;letter-spacing:7px}.travel-caption strong{font:48px var(--serif);letter-spacing:5px}.travel-caption small{font-size:10px;color:#e6d4b5}
.travel-actions{position:absolute;right:4%;top:25px;display:flex;gap:12px}
.travel-actions button{min-height:44px;background:#142026dd;color:#ffefd4;border:1px solid #f1d2a377;padding:10px 20px}
.chapter-travelling #place-panel,.chapter-travelling .scroll-title,.chapter-travelling .story-beacon,.chapter-travelling .site-header,.chapter-travelling .map-regions,.chapter-travelling .cinema-actions{visibility:hidden}
.chapter-travelling .site-header,.chapter-travelling .scroll-poem{opacity:0!important}
.chapter-travelling .atlas-pin:not([aria-pressed=true]){opacity:.15;pointer-events:none}
.cinema-open #main *,.cinema-open #main *:before,.cinema-open #main *:after{animation-play-state:paused!important}
/* Once an opaque surface covers the map, its SVG paths and decorations no
   longer need layout/paint. Visibility preserves the map's size and state. */
.travel-covered #main,.cinema-open #main{visibility:hidden}
.travel-covered #main *,.travel-covered #main *:before,.travel-covered #main *:after{animation-play-state:paused!important}
.scene-enter .cinema-hero{animation:hero-open 1.2s .15s both}.scene-enter #cinema-scroll{animation:reading-open 1s .35s both}
@keyframes photo-breathe{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1%,.6%)}}
@keyframes cinema-rays{from{transform:rotate(-4deg);opacity:.6}to{transform:rotate(5deg);opacity:1}}
@keyframes bokeh-drift{from{transform:translate(-20px,15px) scale(1)}to{transform:translate(35px,-25px) scale(1.12)}}
@keyframes hero-open{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes reading-open{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes travel-fade{0%{opacity:0}45%{opacity:.3}75%{opacity:.7}100%{opacity:1;background:#101921}}
@keyframes travel-caption{0%,20%{opacity:0;transform:translateY(12px)}45%,85%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
.page-hidden #chapter-cinema *{animation-play-state:paused!important}
@media(max-height:820px){.cinema-header{height:76px}.cinema-footer{height:100px}.cinema-layout{height:calc(100% - 176px);gap:4vw}.cinema-hero{padding:18px 0}#chapter-cinema #cinema-title{font-size:70px;margin-bottom:16px}#cinema-number{margin-bottom:18px}.cinema-rule{margin-bottom:18px}#cinema-opening{font-size:16px;line-height:1.9;margin-bottom:18px}#cinema-read{margin-top:14px}#cinema-place{margin-bottom:18px}#chapter-cinema .story-panel{padding:20px 24px 32px}}

.travel-ready .travel-veil{animation-play-state:paused;opacity:1;background:#101921}
.atlas-world.map-flying{animation:none!important;will-change:transform}
.atlas-world.map-flying #geo-map{overflow:visible}
.chapter-travelling .coastal-wash,.chapter-travelling .romance-art,.chapter-travelling .romance-art *,.chapter-travelling .surf-art,.chapter-travelling .gold-dust{animation-play-state:paused!important}