/* Warm regional theatre: landscape, graphic takeover, destination. */
#chapter-transition,.sea-page-curtain{--motion-bg:#f5eddd;--motion-ink:#51433b;--motion-soft:#7c6857;--motion-accent:#a95d40;--motion-1:#fff4dc;--motion-2:#e5b46b;--motion-3:#b9724b}
.sea-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.sea-wave{transform-box:view-box;transform-origin:center}.sea-wave-foam{fill:var(--motion-1)}.sea-wave-gold{fill:var(--motion-2)}.sea-wave-blue{fill:var(--motion-3)}.sea-wave-ink{fill:var(--motion-bg)}.sea-wind{color:var(--motion-accent);opacity:0}.sea-gull{width:190px;height:90px;overflow:visible}
#chapter-transition{overflow:clip;isolation:isolate;background:transparent;color:var(--motion-ink)}#chapter-transition .travel-veil{z-index:0;background:var(--motion-bg)}#chapter-transition.travelling .travel-veil{animation:regional-underlay var(--travel-duration) linear both}
.regional-theatre{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;isolation:isolate}.regional-scene{--scene-start:polygon(0 50%,100% 50%,100% 50%,0 50%,0 50%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%,0 70%);position:absolute;inset:-3%;will-change:transform,opacity;background:linear-gradient(145deg,var(--region-warm),var(--region-cool));opacity:0;--scene-window:polygon(50% 0,100% 0,100% 100%,75% 100%,61% 70%)}.regional-plane{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}.regional-scene[data-ready=ready] .regional-plane{opacity:1}.regional-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#f7d49120,transparent 60%,#73543518)}
.regional-field{--field-open:polygon(0 0,100% 0,100% 70%,100% 100%,0 100%);position:absolute;inset:0;background:var(--region-bg,var(--motion-bg));overflow:hidden;opacity:0;--field-window:polygon(0 0,50% 0,61% 70%,75% 100%,0 100%)}.regional-field:after{content:'';position:absolute;inset:0;pointer-events:none;background:url('assets/graphic/ps-paper-grain.webp') repeat;background-size:384px;opacity:.11;mix-blend-mode:multiply}
.regional-kinetic{position:absolute;left:3%;bottom:18%;display:flex;white-space:nowrap;line-height:.9;font-family:var(--serif);font-weight:900;font-size:30vw;letter-spacing:-.08em;color:var(--region-accent);transform:rotate(-7deg)}.regional-kinetic span{display:block}
.regional-english{position:absolute;left:-5%;top:4%;font:900 19vw/.85 Arial,sans-serif;letter-spacing:-.075em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--region-accent);opacity:.25;transform:rotate(-7deg)}
.regional-symbol{position:absolute;inset:0;color:var(--region-ink);opacity:.25;transform:translate(15%,2%) scale(.8)}.regional-symbol svg,.regional-pattern svg{width:100%;height:100%;display:block}.regional-pattern{position:absolute;inset:0;color:var(--region-accent);opacity:.15}
.regional-rails{position:absolute;inset:4% 6%;color:var(--region-ink);opacity:.25}.regional-rails i{position:absolute;display:block;background:currentColor}.regional-rails i:nth-child(1){top:12%;left:0;right:0;height:1px}.regional-rails i:nth-child(2){bottom:9%;left:0;right:0;height:1px}.regional-rails i:nth-child(3){height:20px;width:1px;left:0;top:calc(12% - 10px)}.regional-rails i:nth-child(4){height:20px;width:1px;right:0;bottom:calc(9% - 10px)}
.regional-shutters{position:absolute;inset:0;overflow:hidden}.regional-shutter{position:absolute;left:calc(var(--strip)*16.6667%);top:0;height:100%;width:16.8%;background:var(--region-accent);transform:translateY(110%)}.regional-shutter:nth-child(3n+2){background:var(--region-warm)}.regional-shutter:nth-child(3n+3){background:var(--region-bg)}
.regional-tag{position:absolute;top:22%;left:7%;display:flex;flex-direction:column;gap:10px;color:var(--motion-ink)}.regional-tag b{font:600 12px/1.5 var(--sans);letter-spacing:.35em}.regional-tag span{font:10px/1.6 var(--sans);letter-spacing:.14em;color:var(--motion-accent)}.regional-number{position:absolute;right:5%;bottom:10%;font:italic 100px/.9 Georgia,serif;color:var(--region-bg);text-shadow:0 1px 16px #5d492a30}.regional-art-credit{position:absolute;right:6%;bottom:6%;font:9px/1.5 var(--sans);letter-spacing:.08em;color:var(--motion-ink);background:var(--region-bg);padding:3px 7px}
.sea-travel-graphic:after{content:attr(data-coordinate);position:absolute;right:6%;bottom:4%;font:9px/1.5 var(--sans);letter-spacing:1px;color:var(--motion-soft);background:var(--region-bg);padding:2px 5px}
#chapter-transition .travel-caption{z-index:8;left:7%;top:35%;bottom:auto;width:47%;max-width:none;gap:18px;text-shadow:none;box-sizing:border-box}#chapter-transition .travel-caption>span{font:11px/1.6 var(--sans);letter-spacing:.2em;color:var(--motion-accent)}#chapter-transition .travel-caption strong{font:400 clamp(30px,3.6vw,67px)/1.36 var(--serif);letter-spacing:.025em;overflow-wrap:anywhere;white-space:normal;text-wrap:balance}#chapter-transition .travel-caption small{font:10px/1.7 var(--sans);color:var(--motion-soft);letter-spacing:.06em}
.sea-travel-meta{position:absolute;left:6%;right:6%;top:9%;z-index:8;display:flex;justify-content:space-between;gap:16px;font:10px/1.8 var(--sans);letter-spacing:.2em;color:var(--motion-soft)}
.sea-travel-meta>span{background:var(--region-bg,var(--motion-bg));padding:2px 4px;width:max-content;max-width:100%;box-sizing:border-box}
.sea-travel-track{position:absolute;left:6%;bottom:3.4%;display:flex;gap:16px;align-items:center;z-index:8}.sea-travel-track:empty{display:none}.sea-travel-track:before{content:'';position:absolute;left:3px;right:3px;top:3px;height:1px;background:var(--motion-accent);transform:scaleX(var(--journey-position,0));transform-origin:left}.sea-travel-track i{width:7px;height:7px;border:1px solid var(--motion-soft);background:var(--motion-bg);position:relative;transform:rotate(45deg)}.sea-travel-track i.is-saved{background:var(--motion-accent);border-color:var(--motion-accent)}.sea-travel-track i.is-current{background:var(--motion-ink);box-shadow:0 0 0 4px #a95d4020}.sea-journey-caption{position:absolute;left:calc(6% + 255px);bottom:2.9%;z-index:8;font:10px/1.6 var(--sans);color:var(--motion-soft)}
#chapter-transition .travel-actions{z-index:12;top:19px;right:4%}#chapter-transition .travel-actions button{background:var(--motion-bg);border:1px solid color-mix(in srgb,var(--motion-ink) 35%,transparent);border-radius:2px;min-height:44px;color:var(--motion-ink);font:12px/1.6 var(--sans)}#chapter-transition .travel-actions button:focus-visible{outline:2px solid var(--motion-ink);outline-offset:4px}
#chapter-transition .sea-trip{z-index:9;left:7%;width:44%;bottom:14%;background:transparent}#chapter-transition .journey-departure{background:#f7efddf5;color:#51433b;border-color:#af6d42}#chapter-transition .departure-counter{color:#af6d42;border-color:#af6d4240}#chapter-transition .journey-departure small,#chapter-transition .departure-origin{color:#7c6857}#chapter-transition .journey-departure>i{background:linear-gradient(90deg,#ba7851,#e8bc76,#f4e5c8)}
#chapter-cinema::after{background:var(--arrival-paper,#f5eddd)}
/* Each aperture keeps matching shape types and vertex counts at every keyframe,
   including mobile overrides, so the browser interpolates instead of jumping.
   The action families retain their panel directions and silhouette movement. */
.travelling .regional-scene{animation:bridge-scene var(--travel-duration) cubic-bezier(.25,.55,.25,1) both}.travelling .regional-field{animation:field-takeover var(--travel-duration) cubic-bezier(.3,0,.2,1) both}.travelling .regional-shutter{animation:shutter-rise var(--travel-duration) cubic-bezier(.7,0,.25,1) both;animation-delay:calc(var(--strip)*18ms)}
/* Keep the three transparent artwork planes on one paint surface. Independent
   transforms inside the animated scene clip can lose tiles in Edge at high DPR.
   The scene still performs each region's reveal, camera move and window cut. */
.travelling .regional-kinetic span{animation:type-gather var(--travel-duration) cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--letter)*35ms)}.travelling .regional-english{animation:type-cross var(--travel-duration) ease both}.travelling .regional-symbol{animation:symbol-bridge var(--travel-duration) ease both}.travelling .regional-pattern{animation:pattern-open var(--travel-duration) ease both}
#chapter-transition.travelling .travel-caption,.travelling .sea-travel-meta,.travelling .regional-tag,.travelling .regional-number,.travelling .regional-art-credit,.travelling .sea-travel-track,.travelling .sea-journey-caption,#chapter-transition.travelling .sea-trip{animation:regional-caption var(--travel-duration) ease both}
[data-playback=street-pan] .regional-scene{--scene-start:polygon(0 0,0 0,0 100%,0 100%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%);--scene-window:polygon(0 0,50% 0,43% 100%,0 100%);animation-name:street-scene}[data-playback=street-pan] .regional-field{--field-open:polygon(0 0,100% 0,100% 100%,0 100%);--field-window:polygon(50% 0,100% 0,100% 100%,43% 100%);animation-name:field-side}[data-playback=street-pan] .regional-shutter{animation-name:shutter-side}[data-playback=street-pan] .regional-symbol{animation-name:symbol-street}[data-playback=street-pan] .regional-tag{left:55%}#chapter-transition[data-playback=street-pan] .travel-caption{left:55%;top:35%;width:38%}#chapter-transition[data-playback=street-pan] .sea-trip{left:55%;width:38%}
[data-playback=harbor-fold] .regional-scene{--scene-start:polygon(50% 0,50% 0,50% 100%,50% 100%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%);--scene-window:polygon(45% 0,100% 0,100% 100%,80% 100%);animation-name:lighthouse-scene}[data-playback=harbor-fold] .regional-field{--field-open:polygon(0 0,100% 0,100% 100%,0 100%);--field-window:polygon(0 0,45% 0,80% 100%,0 100%);animation-name:field-fold}[data-playback=harbor-fold] .regional-symbol{animation-name:symbol-light}[data-playback=harbor-fold] .regional-shutter{animation-name:shutter-diagonal}
[data-playback=archive-open] .regional-scene{--scene-start:inset(0 50%);--scene-open:inset(0);--scene-window:inset(8% 5% 8% 64%);animation-name:archive-scene}[data-playback=archive-open] .regional-field{--field-open:polygon(0 0,100% 0,100% 8%,100% 8%,100% 92%,100% 92%,100% 100%,0 100%);--field-window:polygon(0 0,100% 0,100% 8%,64% 8%,64% 92%,100% 92%,100% 100%,0 100%);animation-name:field-side}[data-playback=archive-open] .regional-shutter{animation-name:shutter-page;transform-origin:left}[data-playback=archive-open] .regional-symbol{animation-name:symbol-page}[data-playback=archive-open] .regional-kinetic{font-weight:400;opacity:.12}[data-playback=archive-open] .regional-pattern{opacity:.08}
[data-playback=reef-slice] .regional-scene{--scene-start:polygon(0 0,0 0,0 100%,0 100%,0 70%,0 42%,0 22%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%,0 70%,0 42%,0 22%);--scene-window:polygon(57% 0,100% 0,100% 100%,73% 100%,54% 70%,60% 42%,48% 22%);animation-name:reef-scene}[data-playback=reef-slice] .regional-field{--field-open:polygon(0 0,100% 0,100% 22%,100% 42%,100% 70%,100% 100%,0 100%);--field-window:polygon(0 0,57% 0,48% 22%,60% 42%,54% 70%,73% 100%,0 100%)}[data-playback=reef-slice] .regional-shutter{animation-name:shutter-diagonal}[data-playback=reef-slice] .regional-symbol{animation-name:symbol-reef}
[data-playback=port-grid] .regional-scene{--scene-start:polygon(0 100%,100% 100%,100% 100%,0 100%,0 100%,0 100%,0 100%,0 100%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%,0 60%,0 60%,0 30%,0 30%);--scene-window:polygon(54% 0,100% 0,100% 100%,75% 100%,75% 60%,62% 60%,62% 30%,54% 30%);animation-name:port-scene}[data-playback=port-grid] .regional-field{--field-open:polygon(0 0,100% 0,100% 30%,100% 30%,100% 60%,100% 60%,100% 100%,0 100%);--field-window:polygon(0 0,54% 0,54% 30%,62% 30%,62% 60%,75% 60%,75% 100%,0 100%)}[data-playback=port-grid] .regional-shutter:nth-child(even){animation-name:shutter-drop}[data-playback=port-grid] .regional-symbol{animation-name:symbol-port}
[data-playback=page-fan] .regional-scene{--scene-start:polygon(0 100%,0 100%,100% 100%,100% 100%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%);--scene-window:polygon(54% 8%,97% 0,97% 93%,64% 100%);animation-name:campus-scene}[data-playback=page-fan] .regional-field{--field-open:polygon(0 0,100% 0,100% 8%,100% 100%,0 100%);--field-window:polygon(0 0,97% 0,54% 8%,64% 100%,0 100%);animation-name:field-fold}[data-playback=page-fan] .regional-shutter{animation-name:shutter-fan;transform-origin:50% 120%}[data-playback=page-fan] .regional-symbol{animation-name:symbol-page}
[data-playback=stadium-orbit] .regional-scene{--scene-start:ellipse(0 0 at 60% 50%);--scene-open:ellipse(90% 100% at 50% 50%);--scene-window:ellipse(32% 47% at 83% 53%);animation-name:stadium-scene}[data-playback=stadium-orbit] .regional-field{--field-open:polygon(0 0,100% 0,100% 26%,100% 53%,100% 77%,100% 100%,0 100%);--field-window:polygon(0 0,65% 0,55% 26%,51% 53%,55% 77%,65% 100%,0 100%)}[data-playback=stadium-orbit] .regional-shutter{animation-name:shutter-orbit;transform-origin:center}[data-playback=stadium-orbit] .regional-symbol{animation-name:symbol-orbit}[data-playback=stadium-orbit] .regional-pattern{animation-name:pattern-orbit}
[data-playback=ticket-wipe] .regional-scene{--scene-start:polygon(100% 0,100% 0,100% 100%,100% 100%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%);--scene-window:polygon(62% 0,100% 0,100% 100%,48% 100%);animation-name:arrival-scene}[data-playback=ticket-wipe] .regional-field{--field-open:polygon(0 0,100% 0,100% 100%,0 100%);--field-window:polygon(0 0,62% 0,48% 100%,0 100%);animation-name:field-side}[data-playback=ticket-wipe] .regional-symbol{animation-name:symbol-flight}
[data-playback=forest-rise] .regional-scene{--scene-start:polygon(0 100%,100% 100%,100% 100%,0 100%,0 100%,0 100%,0 100%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%,0 74%,0 48%,0 25%);--scene-window:polygon(55% 0,100% 0,100% 100%,50% 100%,61% 74%,52% 48%,62% 25%);animation-name:forest-scene}[data-playback=forest-rise] .regional-field{--field-open:polygon(0 0,100% 0,100% 25%,100% 48%,100% 74%,100% 100%,0 100%);--field-window:polygon(0 0,55% 0,62% 25%,52% 48%,61% 74%,50% 100%,0 100%)}[data-playback=forest-rise] .regional-symbol{animation-name:symbol-forest}
[data-playback=island-drift] .regional-scene{--scene-start:ellipse(0 25% at 100% 50%);--scene-open:ellipse(100% 100% at 50% 50%);--scene-window:ellipse(39% 68% at 90% 60%);animation-name:island-scene}[data-playback=island-drift] .regional-field{--field-open:polygon(0 0,100% 0,100% 25%,100% 58%,100% 81%,100% 100%,0 100%);--field-window:polygon(0 0,68% 0,55% 25%,51% 58%,55% 81%,66% 100%,0 100%)}[data-playback=island-drift] .regional-symbol{animation-name:symbol-island}
[data-playback=ticket-wipe] .regional-shutter,[data-playback=island-drift] .regional-shutter{left:0;top:calc(var(--strip)*16.6667%);width:100%;height:16.8%;animation-name:shutter-side}
[data-quiet=true] .regional-english{opacity:.14}[data-quiet=true] .regional-pattern{opacity:.1}[data-quiet=true] .regional-number{display:none}
/* Keep settled animation instances alive until the reader takes over. Removing
   them here invalidates the clipped surfaces and can flash an empty final frame.
   cinema.js settles and pauses the shared clock for both finish and skip. */
#chapter-transition.travel-ready .travel-veil{animation-play-state:paused;opacity:1}#chapter-transition.travel-ready .regional-shutters{display:none}#chapter-transition.travel-ready .regional-scene{animation-play-state:paused;opacity:1;clip-path:var(--scene-window)}#chapter-transition.travel-ready .regional-field{animation-play-state:paused;opacity:1;clip-path:var(--field-window)}#chapter-transition.travel-ready .travel-caption,#chapter-transition.travel-ready .sea-travel-meta,#chapter-transition.travel-ready .sea-travel-track,#chapter-transition.travel-ready .sea-journey-caption,#chapter-transition.travel-ready .regional-tag,#chapter-transition.travel-ready .regional-number,#chapter-transition.travel-ready .regional-art-credit{animation-play-state:paused;opacity:1;transform:none}
.page-hidden .regional-theatre *{animation-play-state:paused!important}
.regional-route-label{position:absolute;top:9%;left:7%;max-width:55%;display:flex;flex-direction:column;gap:7px;background:var(--region-bg);color:var(--region-ink);padding:11px 16px;border-left:3px solid var(--region-accent);opacity:0}.regional-route-label span{font:9px/1.5 var(--sans);letter-spacing:.18em}.regional-route-label b{font:400 19px/1.5 var(--serif)}.travelling .regional-route-label{animation:route-anchor var(--travel-duration) ease both}
.travelling[data-playback=page-fan] .regional-symbol{animation-name:symbol-campus}
@keyframes symbol-campus{0%,44%{opacity:0;transform:translate(12%,45%) rotate(-12deg) scale(.9)}56%,61%{opacity:1;transform:translateX(14%) scale(.9)}76%,100%{opacity:.1;transform:translate(15%,2%) scale(.8)}}
@keyframes route-anchor{0%,48%{opacity:0}53%,64%{opacity:1}72%,100%{opacity:0}}
.regional-city-grid{position:absolute;inset:-10%;display:flex;align-items:flex-end;gap:2.2%;transform:rotate(-8deg);background:repeating-linear-gradient(90deg,transparent 0 15%,#fff3 15% 15.2%,transparent 15.2% 20%)}.regional-city-grid i{display:block;flex:1;height:calc(32% + var(--block)*5%);background:var(--region-bg);border:2px solid var(--region-ink);border-bottom:0;box-shadow:18px -18px 0 color-mix(in srgb,var(--region-warm) 75%,white);background-image:repeating-linear-gradient(0deg,transparent 0 30px,var(--region-accent) 30px 32px)}.regional-city-grid i:nth-child(even){height:40%;background-color:var(--region-cool)}.travelling .regional-city-grid{animation:city-drift var(--travel-duration) ease both}
@keyframes city-drift{0%{transform:rotate(-8deg) translateX(-12%)}100%{transform:rotate(-8deg) translateX(4%)}}
@keyframes regional-underlay{0%,18%{opacity:0}30%,100%{opacity:1}}
@keyframes bridge-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:scale(1.2)}32%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.04)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes street-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:translateX(-8%) scale(1.12)}32%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.03)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes lighthouse-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:scale(1.13)}34%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.03)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes archive-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:scale(1.04)}35%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.02)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes reef-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:translateX(9%) scale(1.1)}32%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.03)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes port-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:translateY(7%) scale(1.1)}34%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.04)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes campus-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:rotate(-7deg) scale(1.2)}34%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.02)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes stadium-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:scale(1.2)}34%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.03)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes arrival-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:translateX(12%) scale(1.1)}32%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.03)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes forest-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:translateY(13%) scale(1.18)}34%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.04)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes island-scene{0%,18%{opacity:0;clip-path:var(--scene-start);transform:translateX(6%) scale(1.1)}34%,48%{opacity:1;clip-path:var(--scene-open);transform:scale(1.03)}72%,100%{opacity:1;clip-path:var(--scene-window);transform:scale(1)}}
@keyframes field-takeover{0%,44%{opacity:0;transform:translateY(110%);clip-path:var(--field-open)}52%,61%{opacity:1;transform:none;clip-path:var(--field-open)}73%,100%{opacity:1;transform:none;clip-path:var(--field-window)}}
@keyframes field-side{0%,44%{opacity:0;transform:translateX(110%);clip-path:var(--field-open)}52%,61%{opacity:1;transform:none;clip-path:var(--field-open)}73%,100%{opacity:1;transform:none;clip-path:var(--field-window)}}
@keyframes field-fold{0%,44%{opacity:0;transform:rotate(18deg) translateY(120%);clip-path:var(--field-open)}53%,61%{opacity:1;transform:none;clip-path:var(--field-open)}73%,100%{opacity:1;transform:none;clip-path:var(--field-window)}}
@keyframes shutter-rise{0%,14%{transform:translateY(110%)}25%,28%{transform:none}42%,100%{transform:translateY(-110%)}}
@keyframes shutter-drop{0%,14%{transform:translateY(-110%)}25%,28%{transform:none}42%,100%{transform:translateY(110%)}}
@keyframes shutter-side{0%,14%{transform:translateX(-700%)}25%,28%{transform:none}42%,100%{transform:translateX(700%)}}
@keyframes shutter-diagonal{0%,14%{transform:translate(250%,110%) skewX(-18deg) scaleX(1.7)}25%,28%{transform:skewX(-18deg) scaleX(1.7)}42%,100%{transform:translate(-250%,-110%) skewX(-18deg) scaleX(1.7)}}
@keyframes shutter-page{0%,14%{transform:scaleX(0)}25%,28%{transform:scaleX(1)}42%,100%{transform:scaleX(0)}}
@keyframes shutter-fan{0%,14%{transform:rotate(-75deg) translateY(120%) scaleX(3)}25%,28%{transform:rotate(0) scaleX(1.1)}42%,100%{transform:rotate(75deg) translateY(-180%) scaleX(3)}}
@keyframes shutter-orbit{0%,14%{transform:rotate(-30deg) scaleY(0)}25%,28%{transform:rotate(0) scaleY(1.8)}42%,100%{transform:rotate(30deg) scaleY(0)}}
@keyframes type-gather{0%,44%{opacity:0;transform:translate(25%,-30%) rotate(8deg)}54%,62%{opacity:1;transform:none}76%,100%{opacity:.1;transform:translateY(10%)}}
@keyframes type-cross{0%,44%{opacity:0;transform:translateX(-30%) rotate(-7deg)}54%,62%{opacity:.7;transform:translateX(4%) rotate(-7deg)}76%,100%{opacity:.15;transform:translateX(-5%) rotate(-7deg)}}
@keyframes pattern-open{0%,44%{opacity:0;transform:scale(.5)}54%,63%{opacity:.38;transform:scale(1)}76%,100%{opacity:.13;transform:scale(1.04)}}@keyframes pattern-orbit{0%,44%{opacity:0;transform:rotate(-70deg) scale(.5)}54%,63%{opacity:.4;transform:rotate(0) scale(1)}76%,100%{opacity:.13;transform:rotate(30deg) scale(1.04)}}
@keyframes symbol-bridge{0%,44%{opacity:0;transform:translateY(45%) scale(1.3)}56%,61%{opacity:1;transform:scale(1.04)}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-street{0%,44%{opacity:0;transform:translateX(-90%)}56%,61%{opacity:1;transform:translateX(0)}76%,100%{opacity:.13;transform:translate(38%,8%) scale(.8)}}
@keyframes symbol-light{0%,44%{opacity:0;transform:rotate(-25deg) scale(.6)}56%,61%{opacity:1;transform:rotate(0) scale(1)}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-page{0%,44%{opacity:0;transform:translateY(45%) rotate(-12deg)}56%,61%{opacity:.8;transform:none}76%,100%{opacity:.1;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-reef{0%,44%{opacity:0;transform:translate(30%,45%) rotate(8deg)}56%,61%{opacity:1;transform:none}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-port{0%,44%{opacity:0;transform:translateY(-75%)}56%,61%{opacity:1;transform:none}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-orbit{0%,44%{opacity:0;transform:rotate(-35deg) scale(.5)}56%,61%{opacity:1;transform:scale(1.08)}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-flight{0%,44%{opacity:0;transform:translate(-70%,50%)}56%,61%{opacity:1;transform:none}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-forest{0%,44%{opacity:0;transform:translateY(100%)}56%,61%{opacity:1;transform:none}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes symbol-island{0%,44%{opacity:0;transform:translate(-60%,15%)}56%,61%{opacity:1;transform:none}76%,100%{opacity:.13;transform:translate(15%,2%) scale(.8)}}
@keyframes regional-caption{0%,64%{opacity:0;transform:translateY(17px)}76%,100%{opacity:1;transform:none}}
@keyframes sea-uncover{0%,22%{transform:translateX(-15%)}100%{transform:translateX(145%)}}@keyframes page-uncover{0%{transform:translateX(-15%)}100%{transform:translateX(145%)}}@keyframes sea-cover{0%{transform:translateX(-145%)}100%{transform:translateX(-15%)}}@keyframes home-letter{0%,8%{opacity:0;transform:translateY(10px)}22%,48%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateY(-10px)}}@keyframes sea-home-lines{0%{opacity:0}35%{opacity:.4}100%{opacity:0}}
/* Material details follow the cut edge: small contact shadows, ink, fibres and
   regional marks. Local movement continues after the main shape settles. */
.regional-paper-wrap{position:absolute;inset:0;filter:none}
.regional-underpaper{margin:10px -12px -10px 12px;background:color-mix(in srgb,var(--region-cool) 32%,#e5d3b2)}.regional-underpaper:after{display:none}
[data-material=folio] .regional-underpaper{background:#c7b6b2;margin:8px -14px -8px 14px}[data-material=ticket] .regional-underpaper{background:#dec485}
.regional-symbol .symbol-mid{stroke:var(--region-bg);stroke-width:2.2;paint-order:stroke fill;filter:none}
.regional-symbol .symbol-back,.regional-symbol .symbol-front{transform-box:fill-box;transform-origin:center}.regional-symbol .symbol-front{color:var(--region-cool)}
.travelling .symbol-back{animation:detail-back-drift var(--travel-duration) ease both}.travelling .symbol-front{animation:detail-front-drift var(--travel-duration) ease both}
.travelling .detail-engraving{stroke-dasharray:1;animation:detail-engrave var(--travel-duration) ease both;animation-delay:calc(var(--stroke)*22ms)}
.travelling .detail-glint{animation:detail-gleam var(--travel-duration) ease both;transform-box:view-box}
.regional-ornaments{position:absolute;inset:0;opacity:0;color:var(--region-ink)}.regional-ornament-svg{display:block;width:100%;height:100%;overflow:visible}.detail-paper{fill:var(--region-bg)}.detail-accent{fill:var(--region-warm)}
.travelling .regional-ornaments{animation:detail-stage var(--travel-duration) ease both}.regional-ornaments .detail-back{opacity:.5}.regional-ornaments .detail-front{opacity:.85}.regional-ornaments .detail-stroke{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}.regional-ornaments .detail-stroke.detail-accent{color:var(--region-accent)}.regional-ornaments .detail-stroke.detail-paper{color:var(--region-bg)}
.travelling .regional-ornaments .detail-stroke{stroke-dasharray:1;animation:detail-engrave var(--travel-duration) ease both}.travelling .regional-ornaments .detail-float{transform-box:fill-box;transform-origin:center;animation:detail-breeze 2.8s ease-in-out infinite alternate}.regional-ornaments .detail-float:nth-child(even){animation-delay:-.9s;animation-duration:3.3s}
.travelling .regional-pattern .pattern-geometry{transform-origin:center;animation:detail-pattern-drift var(--travel-duration) linear both}
.regional-collage{position:absolute;inset:0;opacity:0;color:var(--region-accent)}.travelling .regional-collage{animation:detail-collage var(--travel-duration) ease both}
.detail-tape{position:absolute;width:155px;height:48px;background:url('assets/regional/detail-tape.webp') center/100% 100% no-repeat;filter:drop-shadow(0 1px .3px #694b3033) drop-shadow(1px 3px 3px #694b301a);opacity:.92;--rest-angle:-16deg}
.detail-tape-a{left:calc(var(--detail-edge-top,53%) - 77px);top:16%;transform:rotate(var(--rest-angle))}.detail-tape-b{left:calc(var(--detail-edge-bottom,64%) - 55px);bottom:24%;width:110px;height:35px;--rest-angle:14deg;transform:rotate(var(--rest-angle));opacity:.72}
.travelling .detail-tape{animation:detail-tape-land var(--travel-duration) ease both}.detail-tape-b{animation-delay:95ms}
.detail-paper-tab{position:absolute;left:calc(57.5% - 34px);top:31%;width:64px;height:116px;box-sizing:border-box;background:#ece2c6;border:1px solid #fff7e2;box-shadow:1px 2px 0 #4d3a2a24,5px 8px 9px #4d3a2a19;transform:rotate(8deg);padding:44px 9px 0;display:none}.detail-tab-title{display:block;font:9px/1.6 var(--serif);letter-spacing:.15em;color:var(--region-ink);white-space:nowrap;position:relative;margin-bottom:13px}
.detail-paper-tab:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#fff4 0 35%,transparent 36% 87%,#9e804326 88% 90%,transparent 91%),url('assets/graphic/ps-paper-grain.webp') center/256px;opacity:.4}
.detail-tab-rule{position:relative;display:block;width:80%;height:1px;background:var(--region-accent);opacity:.5;margin-top:14px}.detail-tab-rule:last-child{width:55%}
.detail-paper-clip{position:absolute;left:26px;top:-29px;width:13px;height:55px;border:2px solid #937b55;border-radius:10px;box-shadow:inset 1px 0 0 #fff9e4,1px 1px 1px #4e3a2940;transform:rotate(-12deg)}.detail-paper-clip:after{content:'';position:absolute;left:3px;top:7px;width:5px;height:35px;border:1px solid #c5b18c;border-bottom:0;border-radius:6px;box-shadow:1px 0 0 #fff9e4}
.detail-stamp{position:absolute;right:10%;bottom:21%;width:102px;height:102px;color:var(--region-accent);opacity:.8;transform:rotate(-13deg);background:#f4ecd6aa;border-radius:50%;mix-blend-mode:multiply}.detail-stamp svg{width:100%;height:100%;font-family:var(--serif)}
[data-material=folio] .detail-paper-tab{display:block}[data-material=folio] .detail-tape-b,[data-material=folio] .detail-stamp{display:none}[data-material=ticket] .detail-stamp{border-radius:0;transform:rotate(6deg);width:84px;height:84px;right:7%;bottom:25%}
[data-playback=street-pan]{--detail-edge-top:48.5%}[data-playback=street-pan] .regional-ornaments{scale:-1 1}[data-playback=street-pan] .detail-tape-a{top:17%;--rest-angle:13deg}[data-playback=street-pan] .detail-paper-tab{display:none}[data-playback=street-pan] .regional-pattern{mask-image:radial-gradient(ellipse 45% 23% at 77% 45%,transparent 30%,#000 100%)}
[data-playback=harbor-fold]{--detail-edge-top:51%;--detail-edge-bottom:72%}[data-playback=archive-open]{--detail-edge-top:64%}[data-playback=reef-slice]{--detail-edge-top:50.5%;--detail-edge-bottom:58%}[data-playback=port-grid]{--detail-edge-top:54%;--detail-edge-bottom:75%}[data-playback=page-fan]{--detail-edge-top:55%}[data-playback=stadium-orbit]{--detail-edge-top:59%;--detail-edge-bottom:55%}[data-playback=ticket-wipe]{--detail-edge-top:60%;--detail-edge-bottom:51%}[data-playback=forest-rise]{--detail-edge-top:60%;--detail-edge-bottom:60%}[data-playback=island-drift]{--detail-edge-top:59%;--detail-edge-bottom:54%}
[data-quiet=true] .regional-ornament-svg{opacity:.45}.travelling[data-quiet=true] .regional-ornaments .detail-float{animation:none}[data-quiet=true] .detail-glint{display:none}[data-quiet=true] .detail-paper-tab{width:52px;height:96px;left:calc(64% - 22px);top:23%;padding:37px 9px 0}[data-quiet=true] .detail-tab-title{font-size:8px;letter-spacing:0;margin-bottom:6px}[data-quiet=true] .detail-tape-a{width:112px;height:35px;left:calc(var(--detail-edge-top) - 56px);top:14%}
.page-hidden .regional-collage *,.page-hidden .regional-ornaments *{animation-play-state:paused!important}
#chapter-transition.travel-ready .regional-collage{animation-play-state:paused;opacity:1}#chapter-transition.travel-ready .detail-tape{animation-play-state:paused;transform:rotate(var(--rest-angle))}#chapter-transition.travel-ready .regional-ornaments{animation-play-state:paused;opacity:.5}
@keyframes detail-back-drift{0%,38%{transform:translate(-12px,7px)}64%{transform:translate(3px,-2px)}100%{transform:translate(18px,-7px)}}
@keyframes detail-front-drift{0%,38%{transform:translate(22px,8px)}64%{transform:translate(-3px,-2px)}100%{transform:translate(-30px,-8px)}}
@keyframes detail-pattern-drift{0%,38%{transform:translate(-12px,4px) rotate(-1deg)}100%{transform:translate(18px,-5px) rotate(1deg)}}
@keyframes detail-engrave{0%,38%{stroke-dashoffset:1}72%,100%{stroke-dashoffset:0}}
@keyframes detail-gleam{0%,48%{opacity:0;transform:translateX(-35%)}55%{opacity:.28}79%{opacity:.18;transform:translateX(80%)}100%{opacity:0;transform:translateX(125%)}}
@keyframes detail-stage{0%,29%{opacity:0;transform:translateY(12px)}42%{opacity:.24;transform:translateY(3px)}59%{opacity:.85;transform:translateY(0)}76%{opacity:.5;transform:translateY(-3px)}100%{opacity:.55;transform:translateY(-8px)}}
@keyframes detail-breeze{from{transform:translate(0,0) rotate(-2deg)}to{transform:translate(7px,-5px) rotate(3deg)}}
@keyframes detail-collage{0%,66%{opacity:0}78%,100%{opacity:1}}
@keyframes detail-tape-land{0%,67%{transform:translate(7px,-12px) rotate(calc(var(--rest-angle) + 4deg)) scale(1.04)}80%{transform:translate(0,1px) rotate(calc(var(--rest-angle) - 1deg)) scale(.995)}100%{transform:rotate(var(--rest-angle))}}
@media(max-width:700px){
 .regional-paper-wrap{filter:none}.regional-underpaper{margin:6px -7px -6px 7px}
 .regional-ornaments{clip-path:polygon(0 20%,100% 17%,100% 51%,0 48%)}.regional-ornament-svg{width:180%;height:100%;margin-left:-80%}.regional-ornaments .detail-back{opacity:.25}.regional-ornaments .detail-front{opacity:.55}[data-playback=street-pan] .regional-ornaments{scale:1}
 .detail-tape-a,[data-playback=street-pan] .detail-tape-a,[data-quiet=true] .detail-tape-a{left:auto;right:15%;top:18%;width:84px;height:27px;--rest-angle:-12deg}.detail-tape-b,.detail-paper-tab,[data-material=folio] .detail-paper-tab{display:none}.detail-stamp,[data-material=ticket] .detail-stamp{right:7%;bottom:auto;top:39%;width:56px;height:56px;opacity:.7}.regional-symbol .symbol-mid{filter:none}
 #chapter-transition .travel-actions{top:12px;right:5%}#chapter-transition .travel-actions button{font-size:10px;padding:8px 13px}.sea-travel-meta{top:10.3%;left:7%;right:7%;font-size:8px;gap:6px;flex-direction:row;align-items:flex-start}.regional-tag,[data-playback=street-pan] .regional-tag{top:14.6%;left:7%;gap:5px}.regional-tag b{font-size:10px}.regional-tag span{font-size:8px}
 .regional-route-label{top:11%;left:7%;max-width:86%;box-sizing:border-box;padding:8px 10px;gap:4px}.regional-route-label b{font-size:14px}.regional-route-label span{font-size:8px}
 #chapter-transition .regional-scene{--scene-start:polygon(0 50%,100% 50%,100% 50%,0 50%);--scene-open:polygon(0 0,100% 0,100% 100%,0 100%);--scene-window:polygon(0 22%,100% 18%,100% 51%,0 47%)}#chapter-transition .regional-field{--field-open:polygon(0 0,100% 0,100% 50%,0 50%,0 50%,100% 50%,100% 100%,0 100%);--field-window:polygon(0 0,100% 0,100% 18%,0 22%,0 47%,100% 51%,100% 100%,0 100%)}.regional-plane{background-position:center}.regional-symbol{inset:5% -35% 24%}.regional-pattern{inset:0 -50%}.regional-kinetic{font-size:63vw;bottom:35%}.regional-english{font-size:36vw;top:13%}.regional-number{display:none}.regional-rails{inset:6% 7%}.regional-art-credit{right:7%;bottom:8.3%;font-size:7px}.sea-travel-graphic:after{right:7%;bottom:6.6%;font-size:7px}
 #chapter-transition .travel-caption,#chapter-transition[data-playback=street-pan] .travel-caption{left:7%;top:55%;width:86%;gap:11px}#chapter-transition .travel-caption strong{font-size:30px;line-height:1.35}#chapter-transition .travel-caption>span{font-size:9px;letter-spacing:.12em}#chapter-transition .travel-caption small{font-size:9px}#chapter-transition[data-kind=story] .travel-caption{top:53%}#chapter-transition[data-kind=story] .travel-caption strong{font-size:24px}
 #chapter-transition .sea-trip,#chapter-transition[data-playback=street-pan] .sea-trip{left:7%;width:86%;bottom:14%}.sea-travel-track{left:7%;bottom:3.3%;gap:12px}.sea-travel-track i{width:5px;height:5px}.sea-journey-caption{left:auto;right:7%;bottom:2.8%;font-size:8px;max-width:43%;text-align:right}
}
@media(prefers-reduced-motion:reduce){.regional-theatre,.sea-page-curtain{display:none!important}#chapter-transition.travelling .travel-veil{animation:none;opacity:1}#chapter-transition.travelling .travel-caption,.travelling .sea-travel-meta,.travelling .sea-travel-track,.travelling .sea-journey-caption,#chapter-transition.travelling .sea-trip{animation:none;opacity:1;transform:none}}

/* Keep the existing paper offset, etched strokes and small tape shadows.
   Avoid filtering full-screen animated descendants and nested SVG groups. */
#chapter-transition:not([data-materials=ready]) .detail-tape{background-image:none;background-color:#ead9b5aa}
#chapter-transition:not([data-materials=ready]) .regional-field:after{background-image:none}
/* Loading keeps the map visible, so a fast decode never flashes a paper frame. */
.travel-loading-status{position:absolute;z-index:10;left:7%;top:calc(50% - 22px);max-width:76%;margin:0;padding:12px 18px;border:1px solid #a68b6159;background:var(--motion-bg);color:var(--motion-ink);font:13px/1.6 var(--sans);box-sizing:border-box}.travel-loading-status[hidden]{display:none}.travel-photo-wait .travel-loading-status{top:auto;bottom:10%}
@media(max-width:700px){.travel-loading-status{font-size:12px}.travel-photo-wait .travel-loading-status{bottom:9%;max-width:86%}}

/* Navigation curtains use the same inks as the graphic scenes. */
.sea-page-curtain{position:fixed;inset:0;z-index:2000;pointer-events:none;overflow:clip;contain:strict}.sea-page-curtain .sea-wind{opacity:.35;animation:sea-home-lines 1.1s ease both}.sea-page-curtain .sea-wave{animation:sea-uncover 1.15s cubic-bezier(.65,0,.2,1) both}.sea-page-curtain .sea-wave-foam{animation-delay:.11s}.sea-page-curtain .sea-wave-gold{animation-delay:.075s}.sea-page-curtain .sea-wave-blue{animation-delay:.04s}.sea-page-return .sea-wave,.sea-page-page .sea-wave{animation-duration:.65s}.sea-page-page .sea-wave{animation-name:page-uncover}.sea-page-out .sea-wave{animation:sea-cover .34s cubic-bezier(.5,0,.2,1) both}.sea-page-out .sea-wave-ink{animation-delay:0s}
.sea-home-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--motion-ink);animation:home-letter 1.15s ease both}.sea-home-letter .sea-gull{width:125px;height:64px;transform:rotate(-8deg);margin-bottom:25px;color:var(--motion-ink)}.sea-home-ring{position:absolute;width:min(480px,80vw);height:240px;border-block:1px solid #47818a66;transform:rotate(-7deg)}.sea-home-ring:before,.sea-home-ring:after{content:'';position:absolute;inset:18px -16px;border-block:1px dashed #47818a44}.sea-home-ring:after{inset:-14px 18px;border-style:solid}.sea-home-name{font:400 clamp(28px,3vw,48px)/1.5 var(--serif);letter-spacing:.32em;padding-left:.32em}.sea-home-note{margin-top:16px;font:10px/1.5 Georgia,serif;letter-spacing:.3em}