@charset "UTF-8";
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#fff}
body{overflow:hidden;font-family:"STKaiti","KaiTi","FangSong",serif;color:#51402b}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #ad7836;outline-offset:2px}
[hidden]{display:none!important}
main{width:100%;height:100%;display:grid;place-items:center}
.stage{position:relative;width:min(100vw,200svh);aspect-ratio:2/1;isolation:isolate;touch-action:pan-y pinch-zoom}
.scene{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.scene.arriving{animation:arrive .4s ease-out both}
@property --book-rx{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --book-ry{syntax:'<percentage>';inherits:false;initial-value:0%}
.book-open-scene{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;z-index:0;pointer-events:none;--book-rx:0%;--book-ry:0%;mask-image:radial-gradient(ellipse var(--book-rx) var(--book-ry) at 50% 86%,#000 85%,transparent 100%)}
.book-open-scene.is-open{--book-rx:120%;--book-ry:150%}
.book-open-scene.blooming{animation:book-bloom 1.9s cubic-bezier(.2,.65,.25,1) both}
.book-open-scene.closing{animation:book-fold .85s ease-in-out both}
.book-effects{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.book-glow{position:absolute;left:50%;top:85%;width:18%;height:32%;border-radius:50%;background:radial-gradient(ellipse,#fffde5 0%,#ffe9a1aa 30%,#ffd16344 55%,transparent 72%);mix-blend-mode:screen;animation:book-light 1.9s ease-out both}
.book-spark{position:absolute;left:50%;top:85%;width:var(--spark-size);height:var(--spark-size);background:#fff4b4;box-shadow:0 0 9px #ffdb6e,0 0 2px #fff;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);animation:book-spark-flight 1.45s var(--spark-delay) ease-out both}
@keyframes book-bloom{0%{--book-rx:0%;--book-ry:0%;filter:brightness(1.6)}18%{--book-rx:17%;--book-ry:12%;filter:brightness(1.3)}60%{--book-rx:66%;--book-ry:82%;filter:brightness(1.08)}100%{--book-rx:120%;--book-ry:150%;filter:brightness(1)}}
@keyframes book-fold{0%{--book-rx:120%;--book-ry:150%;opacity:1}70%{--book-rx:22%;--book-ry:16%;opacity:.9}100%{--book-rx:0%;--book-ry:0%;opacity:0}}
.book-cover-flap{position:absolute;left:33%;top:84%;width:32%;height:6%;background-image:url('assets/08-library-closed-curious.webp');background-size:312.5% 1666.6667%;background-position:48.5294% 89.3617%;transform-origin:50% 100%;animation:cover-lift .65s ease-out both;backface-visibility:hidden}
@keyframes cover-lift{0%{opacity:1;transform:perspective(600px) rotateX(0deg)}60%{opacity:.85;transform:perspective(600px) rotateX(-75deg) translateY(-4px)}100%{opacity:0;transform:perspective(600px) rotateX(-100deg) translateY(-10px)}}
@keyframes book-light{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}65%{opacity:.75;transform:translate(-50%,-65%) scale(4)}100%{opacity:0;transform:translate(-50%,-70%) scale(5)}}
@keyframes book-spark-flight{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4) rotate(150deg)}}
.page-edge{position:absolute;top:0;bottom:0;width:11%;border:0;background:transparent;z-index:1;touch-action:pan-y pinch-zoom;padding:0}
.previous{left:0;cursor:w-resize}.next{right:0;cursor:e-resize}
.page-edge:disabled{pointer-events:none}.page-edge:focus-visible{outline-offset:-6px;outline-style:dashed}
.hotspots{position:absolute;inset:0;pointer-events:none;z-index:2}
.hotspot{position:absolute;pointer-events:auto;background:transparent;border:0;cursor:pointer;padding:0;transition:filter .2s}
.hotspot:focus-visible{outline:2px dashed #c89c4a;border-radius:6px}
.knowledge{
 position:absolute;left:0;top:0;width:clamp(205px,18vw,258px);max-width:65%;max-height:65%;overflow:auto;
 overscroll-behavior:contain;z-index:4;background:rgba(255,250,236,.82);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid #d3b980;border-radius:7px 12px 8px 5px;
 padding:12px 15px 11px;box-shadow:0 4px 16px #5b432326;scrollbar-width:thin;color:#44321f;
 text-shadow:0 1px 2px #fffaf099;animation:note-arrive .25s ease-out;
}
.knowledge h1{font-size:clamp(16px,1.35vw,20px);font-weight:400;letter-spacing:1px;line-height:1.3;margin:0 12px 7px 0}
.knowledge p{font-size:clamp(12px,1vw,14px);line-height:1.7;letter-spacing:.2px;margin:0 0 7px}
.knowledge .example{display:none}
.knowledge a{font-size:9px;color:#937947;line-height:1.4;text-decoration:none}
.knowledge a:hover{text-decoration:underline}
.close-note{position:absolute;right:5px;top:4px;border:0;background:transparent;cursor:pointer;color:#9e875d;font-size:18px;line-height:1;padding:2px;text-shadow:none}
.hotspot:hover,.hotspot.active{background:#fff7c91a;outline:1px solid #e5bb6570;border-radius:6px}
.hotspot.topic-hotspot,
.hotspot.topic-hotspot:hover,
.hotspot.topic-hotspot.active,
.hotspot.topic-hotspot:focus-visible{
 background:transparent;border:0;outline:0;box-shadow:none;border-radius:0;
}
.topic-hotspot::before{
 content:"";position:absolute;left:50%;top:50%;width:87%;height:87%;
 transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
 background:radial-gradient(ellipse at center,rgba(255,248,194,.52),rgba(255,226,133,.2) 35%,rgba(255,225,129,.05) 57%,transparent 78%);
 mix-blend-mode:screen;filter:blur(9px);opacity:0;scale:.87;
 transition:opacity .3s ease,scale .45s ease;
}
.topic-hotspot:hover::before,.topic-hotspot.active::before{opacity:.72;scale:1}
.topic-hotspot:focus-visible::before{opacity:1;scale:1.08}
.hotspot.book-hotspot,
.hotspot.book-hotspot:hover,
.hotspot.book-hotspot.active,
.hotspot.book-hotspot:focus-visible{
 background:transparent;border:0;outline:0;box-shadow:none;border-radius:0;
}
.book-hotspot::before{
 content:"";position:absolute;left:50%;top:52%;width:78%;height:94%;
 transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
 background:radial-gradient(ellipse at center,rgba(255,239,173,.65) 0%,rgba(255,218,119,.34) 27%,rgba(255,218,119,.13) 49%,rgba(255,226,149,.035) 64%,transparent 80%);
 filter:blur(11px);mix-blend-mode:screen;opacity:0;
 transition:opacity .35s ease,filter .35s ease;
}
.book-hotspot.book-invitation::before{opacity:.78;animation:book-hint-breathe 2.8s ease-in-out infinite}
.book-hotspot:hover::before,.book-hotspot:focus-visible::before{opacity:.95;filter:blur(14px)}
@keyframes book-hint-breathe{0%,100%{scale:.88;opacity:.7}50%{scale:1.12;opacity:1}}
.ink-char{display:inline-block;white-space:pre-wrap;opacity:0;animation:ink-reveal .38s cubic-bezier(.2,.7,.3,1) forwards}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes arrive{from{opacity:.35}to{opacity:1}}
@keyframes note-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ink-reveal{from{opacity:0;filter:blur(2px);transform:translateY(4px)}to{opacity:1;filter:blur(0);transform:none}}
@media(max-width:700px){
 .knowledge{width:205px;max-width:65%;max-height:77%;padding:9px 12px 8px}
 .knowledge h1{font-size:14px;letter-spacing:.5px;margin-bottom:5px}
 .knowledge p{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:11px;line-height:1.55;letter-spacing:0;margin-bottom:5px}
 .knowledge a{font-size:8px}.close-note{font-size:16px}
}


/* The caption remains the original artwork, revealed after the scene settles. */
.page-first .scene{clip-path:inset(0 0 10.5% 0)}
.first-caption{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;clip-path:inset(89.5% 0 0 0);pointer-events:none;opacity:0;display:none;user-select:none}
.page-first .first-caption{display:block}
.page-first .first-caption.revealing{animation:caption-reveal 1.4s .6s ease-out both}
@keyframes caption-reveal{from{opacity:0}to{opacity:1}}
.hotspot.map-hotspot,.hotspot.map-hotspot:hover,.hotspot.map-hotspot:focus-visible{background:transparent;border:0;outline:0;box-shadow:none;border-radius:0}
/* One continuous breathing halo invites the reader to open the map. */
.map-hotspot::before{content:"";position:absolute;inset:-18% -18%;border-radius:50%;pointer-events:none;background:url('assets/halo-ellipse43.png') center/contain no-repeat;mix-blend-mode:normal;filter:none;animation:map-hint-breathe 2.2s ease-in-out infinite}
.map-hotspot:hover::before,.map-hotspot:focus-visible::before{animation-duration:1.5s}
@keyframes map-hint-breathe{0%,100%{transform:scale(.88);opacity:.48}50%{transform:scale(1.08);opacity:.95}}

.story-motion{position:absolute;inset:0;pointer-events:none;animation:arrive .4s ease-out both}
.story-motion .story-svg{display:block;width:100%;height:100%;overflow:hidden}
.has-story-motion>.scene{visibility:hidden}
.story-caption{opacity:0;animation:story-caption-reveal 1.25s var(--caption-delay,.65s) ease-out both}
@keyframes story-caption-reveal{from{opacity:0}to{opacity:1}}
.story-fall{transform-box:view-box;animation-duration:1.65s;animation-delay:.45s;animation-fill-mode:both}
.story-fall-red{transform-origin:1360px 420px;animation-name:story-red-fall}
.story-fall-green{transform-origin:1360px 570px;animation-name:story-green-fall;animation-delay:.62s}
@keyframes story-red-fall{
 0%{transform:translate(-70px,-750px) rotate(-15deg);animation-timing-function:cubic-bezier(.5,0,1,1)}
 82%{transform:translate(-120px,220px) rotate(-55deg);animation-timing-function:ease-out}
 91%{transform:translate(-120px,205px) rotate(-59deg);animation-timing-function:ease-in}
 100%{transform:translate(-120px,220px) rotate(-55deg)}
}
@keyframes story-green-fall{
 0%{transform:translate(20px,-760px) rotate(-20deg);animation-timing-function:cubic-bezier(.5,0,1,1)}
 82%{transform:translate(50px,73px) rotate(24deg);animation-timing-function:ease-out}
 91%{transform:translate(50px,61px) rotate(28deg);animation-timing-function:ease-in}
 100%{transform:translate(50px,73px) rotate(24deg)}
}
.story-paper{animation:story-paper-fall 1.9s .4s ease-in both;transform-origin:center;transform-box:fill-box}
@keyframes story-paper-fall{0%{transform:translate(0,-600px) rotate(-18deg);opacity:0}20%{opacity:1}65%{transform:translate(12px,-130px) rotate(12deg)}100%{transform:none;opacity:1}}


.map-departing,.map-arriving{overflow:hidden}
.map-transition{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:auto;background:transparent}
.map-transition-image{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 60%;will-change:transform,opacity;pointer-events:none}
.map-arriving>.story-motion *{animation-play-state:paused!important}
.map-departing>.first-caption{animation:none;opacity:0}
.page-map{overflow:hidden}
.page-map>.story-motion{animation:none}
.story-page-2{transform:none}
/* A brief glance around the enlarged map, ending before the pony enters. */
@property --map-look-angle{syntax:'<angle>';inherits:false;initial-value:45deg}
@property --map-look-radius{syntax:'<number>';inherits:false;initial-value:0}
.map-inspection{will-change:transform;transform-box:view-box;transform:translate(calc(sin(var(--map-look-angle)) * var(--map-look-radius) * 6.5%),calc(-1 * cos(var(--map-look-angle)) * var(--map-look-radius) * 10%));animation:map-eye-orbit 2.45s .15s linear both,map-eye-envelope 2.45s .15s linear both}
@keyframes map-eye-orbit{from{--map-look-angle:45deg}to{--map-look-angle:405deg}}
@keyframes map-eye-envelope{0%{--map-look-radius:0;animation-timing-function:cubic-bezier(.4,0,.6,1)}18%{--map-look-radius:1}82%{--map-look-radius:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}100%{--map-look-radius:0}}
.story-map{will-change:transform;transform-box:view-box;transform-origin:65% 54%;animation:map-reframe 1.45s 3.85s cubic-bezier(.4,0,.2,1) both}
@keyframes map-reframe{from{transform:translateX(-15%) scale(2.1)}to{transform:translateX(0) scale(1)}}
.story-character{will-change:transform,opacity;animation:character-enter 1.25s 2.6s cubic-bezier(.22,.61,.36,1) both}
@keyframes character-enter{from{transform:translateX(-610px);opacity:0}12%{opacity:1}to{transform:none;opacity:1}}

.page-turn{position:absolute;inset:0;overflow:hidden;z-index:6;pointer-events:auto;isolation:isolate;touch-action:none}
.turn-front,.turn-back,.turn-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.turn-front{z-index:1;background:#fff;will-change:clip-path}
.turn-back{z-index:2;transform-origin:0 0;background:linear-gradient(105deg,#dccbad 0%,#f4ead5 7%,#fffdf5 24%,#fffaf0 77%,#d8c6a3 100%);filter:drop-shadow(12px 6px 14px #30241140);will-change:transform,clip-path}
.turn-back .turn-reverse-ink{opacity:.095;filter:sepia(.4)}
.turn-crease{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.crease-shadow{fill:none;stroke:#392b13;stroke-opacity:.2;stroke-width:22;filter:blur(9px)}
.crease-light{fill:none;stroke:#fff8e8;stroke-opacity:.9;stroke-width:2}
.page-turning>.scene,.page-turning>.first-caption,.page-turning>.story-motion,.page-turning>.story-motion *,.page-turning .book-invitation::before{animation-play-state:paused!important}
.turn-arrival>.scene,.turn-arrival>.story-motion,.turn-arrival .story-page-2{animation:none!important;opacity:1}


.hotspot.reading-trigger,.hotspot.reading-trigger:hover,.hotspot.reading-trigger:focus-visible{background:transparent;border:0;outline:0;box-shadow:none;border-radius:0}
.reading-trigger:focus-visible::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(ellipse,#ffe39a55,transparent 72%);pointer-events:none}
.gravity-book,.gravity-paper{opacity:0;transform:translateY(-850px)}
.books-caption-last{opacity:0}
.books-ground{animation:story-caption-reveal 1.25s .65s ease-out both}
.gravity-book{transform-box:view-box;transform-origin:var(--landing-x) var(--landing-y);will-change:transform}
.books-dropping .gravity-book{opacity:1;transform:none;animation:all-books-gravity var(--fall-duration,1.1s) var(--drop-delay,0s) both}
.books-dropping .gravity-paper{opacity:1;transform:none;animation:papers-gravity 1.9s var(--drop-delay,0s) both}
.books-dropping .books-caption-last{opacity:1;animation:story-caption-reveal 1.25s .85s both}
@keyframes all-books-gravity{
 0%{transform:translate(var(--drop-x),var(--start-y)) rotate(var(--drop-tilt));animation-timing-function:cubic-bezier(.333333,0,.666667,.333333)}
 76%{transform:translate(var(--impact-x),0) rotate(var(--impact-tilt));animation-timing-function:cubic-bezier(.333333,.666667,.666667,1)}
 84%{transform:translate(calc(var(--impact-x) * .5),var(--rebound-y)) rotate(calc(var(--impact-tilt) * -.3));animation-timing-function:cubic-bezier(.333333,0,.666667,.333333)}
 92%{transform:translate(calc(var(--impact-x) * .15),0) rotate(calc(var(--impact-tilt) * .15));animation-timing-function:ease-out}
 100%{transform:translate(0,0) rotate(0deg)}
}
@keyframes papers-gravity{0%{transform:translateY(-850px);animation-timing-function:cubic-bezier(.4,0,.8,1)}100%{transform:none}}
.library-leaves{animation:story-caption-reveal .65s ease-out both}
.library-characters{animation:story-caption-reveal .75s 5.5s ease-out both}
.library-sign{animation:story-caption-reveal .75s 6.6s ease-out both}
.library-building{opacity:0}
.library-revealed .library-building{opacity:1;animation:story-caption-reveal 1s ease-out both}
.page-turning>.story-motion *{animation-play-state:paused!important}

.map-caption-invitation::before,.books-invitation::before,.pickup-invitation::before,#library-caption-hotspot::before{content:"";position:absolute;inset:-8% -10%;border-radius:50%;pointer-events:none;background:url("assets/caption-halo-gold.png") center/100% 100% no-repeat;mix-blend-mode:multiply;filter:blur(1px);animation:caption-invitation-breathe 2.8s ease-in-out infinite}
@keyframes caption-invitation-breathe{0%,100%{opacity:.32;transform:scale(.92)}50%{opacity:.9;transform:scale(1.06)}}


.books-invitation::before{inset:auto;left:39%;top:50%;width:52%;height:auto;aspect-ratio:1;animation-name:books-cue-breathe}
@keyframes books-cue-breathe{0%,100%{opacity:.32;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}

.story-page-5 .story-caption{animation:none;opacity:0}
.story-page-5.dialogue-started .story-caption{animation:story-caption-reveal 1.25s var(--caption-delay) ease-out both}
.pickup-invitation::before{inset:auto;left:42%;top:40%;width:72%;height:auto;aspect-ratio:1;mix-blend-mode:normal;filter:blur(1px) drop-shadow(0 0 6px #ffd05580);animation-name:pickup-cue-breathe}
@keyframes pickup-cue-breathe{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

#library-caption-hotspot::before{inset:auto;left:50%;top:44%;width:90%;height:auto;aspect-ratio:1;animation-name:books-cue-breathe}
.lunch-people,.lunch-caption-left,.lunch-interior,.lunch-dialogue-first,.lunch-dialogue-last{opacity:0}
.lunch-bell{opacity:0;animation:story-caption-reveal .6s 1.1s ease-out both}
.lunch-score{animation:story-caption-reveal .15s 1.4s both}
.lunch-score>path{stroke:#805027;stroke-width:3;opacity:.95}
.lunch-score>g{fill:#98541e;stroke:#78431f}
.music-reveal-window{animation:lunch-score-write 2.6s 1.4s cubic-bezier(.3,0,.7,1) both}
@keyframes lunch-score-write{from{width:0}to{width:740px}}
.lunch-score-cue{opacity:0;animation:story-caption-reveal .4s 4.05s ease-out both}
.lunch-score-halo{transform-box:fill-box;transform-origin:center;animation:lunch-score-breathe 2.8s ease-in-out infinite}
@keyframes lunch-score-breathe{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:.92;transform:scale(1.08)}}
.lunch-started .lunch-bell,.lunch-started .lunch-score-cue{animation:lunch-score-fade 1.15s ease-in-out both}
@keyframes lunch-score-fade{from{opacity:1}to{opacity:0}}
.leaflet-invitation::before{content:"";position:absolute;left:46%;top:63%;width:40%;aspect-ratio:1;border-radius:50%;background:url('assets/caption-halo-gold.png') center/contain no-repeat;filter:none;pointer-events:none;animation:leaflet-cue-breathe 2.8s ease-in-out infinite}
@keyframes leaflet-cue-breathe{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.94)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.leaflet-title{animation-duration:.65s}
.leaflet-art{animation-duration:1s}
.leaflet-dialogue-right{animation-name:story-caption-reveal;animation-duration:.45s;animation-delay:5.387s;animation-timing-function:ease-out}
.dining-invitation::before{content:"";position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;border-radius:50%;background:url('assets/caption-halo-gold.png') center/contain no-repeat;pointer-events:none;animation:pickup-cue-breathe 2.8s ease-in-out infinite}
.lunch-started .lunch-people,.lunch-started .lunch-caption-left{animation:story-caption-reveal 1.1s ease-in-out both}
.lunch-started .lunch-interior{animation:story-caption-reveal 1.1s 1.9s ease-in-out both}
.lunch-started .lunch-dialogue-first{animation:story-caption-reveal .9s 4.2s ease-out both}
.lunch-started .lunch-dialogue-last{animation:story-caption-reveal .9s 7.231s ease-out both}
.club-thumbnail{animation:story-caption-reveal .7s .15s ease-out both}
.club-middle-caption,.club-right-scene,.club-last-caption{opacity:0}
.club-sequence-started .club-middle-caption{animation:story-caption-reveal 1s ease-out both}
.club-sequence-started .club-right-scene{animation:story-caption-reveal 1.1s 2.3s ease-out both}
.club-sequence-started .club-last-caption{animation:story-caption-reveal 1.25s 4s ease-out both}
.club-zoom{position:absolute;inset:0;z-index:5;isolation:isolate;touch-action:none}
.club-zoom::before{content:"";position:absolute;inset:0;background:#fff9eee6;animation:story-caption-reveal .35s ease-out both}
.club-zoom.closing::before{animation:lunch-score-fade .38s ease-out both}
.club-zoom-card{position:absolute;left:8%;top:16.85%;width:84%;height:66.3%;padding:0;border:0;background:transparent;cursor:zoom-out;transform-origin:0 0;box-shadow:0 8px 30px #543b2926;overflow:hidden}
.club-zoom-card svg{display:block;width:100%;height:100%}
.brochure-panel{transform-box:view-box;backface-visibility:hidden}
.brochure-panel-1{animation:story-caption-reveal .4s ease-out both}
.brochure-panel-0{transform-origin:517.33px 388px;animation:brochure-unfold-left 1.25s .25s cubic-bezier(.22,.61,.36,1) both}
.brochure-panel-2{transform-origin:1034.67px 388px;animation:brochure-unfold-right 1.25s .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes brochure-unfold-left{0%{opacity:0;transform:perspective(1800px) rotateY(88deg);filter:brightness(.7)}15%{opacity:1}100%{opacity:1;transform:perspective(1800px) rotateY(0deg);filter:brightness(1)}}
@keyframes brochure-unfold-right{0%{opacity:0;transform:perspective(1800px) rotateY(-88deg);filter:brightness(.7)}15%{opacity:1}100%{opacity:1;transform:perspective(1800px) rotateY(0deg);filter:brightness(1)}}
.brochure-horse{animation:story-caption-reveal .8s 2.05s ease-out both}
.brochure-dialogue-horse{animation:story-caption-reveal .75s 2.65s ease-out both}
.brochure-qilin{animation:story-caption-reveal .8s 5.696s ease-out both}
.brochure-dialogue-qilin{animation:story-caption-reveal .75s 6.396s ease-out both}
.brochure-restored{animation:story-caption-reveal .35s 5.3s ease-out both}
.courtroom-invitation::before{content:"";position:absolute;left:50%;top:77%;width:44%;aspect-ratio:1;background:url('assets/caption-halo-gold.png') center/contain no-repeat;pointer-events:none;animation:pickup-cue-breathe 2.8s ease-in-out infinite}
.courtroom-intro-text{animation:story-caption-reveal .75s ease-out both}
.courtroom-art-first-text{animation:story-caption-reveal 1.2s 1.25s ease-out both}
.farewell-scene{animation:story-caption-reveal .65s ease-out both}
.farewell-horse-dialogue{animation:story-caption-reveal 1s 1.1s ease-out both}
.farewell-qilin-dialogue{animation:story-caption-reveal 1s 2.800s ease-out both}
.farewell-invitation::before{content:"";position:absolute;left:50%;top:50%;width:115%;aspect-ratio:1;background:url('assets/caption-halo-gold.png') center/contain no-repeat;pointer-events:none;animation:pickup-cue-breathe 2.8s ease-in-out infinite}
#club-caption-hotspot::before{content:"";position:absolute;left:52%;top:50%;width:20%;aspect-ratio:1;background:url('assets/caption-halo-gold.png') center/contain no-repeat;pointer-events:none;animation:pickup-cue-breathe 2.8s ease-in-out infinite}
.finale-book-photo{height:776px;animation:finale-book-reframe 1.2s 1.15s ease-in-out both}
@keyframes finale-book-reframe{from{height:776px}to{height:705.766px}}
.music-toggle{position:fixed;z-index:20;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;align-items:center;gap:7px;min-height:44px;padding:9px 13px;border:1px solid #c7aa6d99;border-radius:24px;background:#fffaf0ed;box-shadow:0 2px 10px #62472012;color:#927444;cursor:pointer;touch-action:manipulation;font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:12px;line-height:1;transition:background .2s,color .2s}
.music-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.music-toggle[data-playing=true]{color:#9a6a20;background:#fff5dcf2}
.music-toggle[data-playing=true] .music-muted-mark{display:none}
.music-toggle:hover{background:#fff2d0}
.music-toggle:focus-visible{outline:2px solid #ad7836;outline-offset:3px}
@media(max-width:700px){.music-toggle{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));padding:9px 11px;gap:5px}}

#dining-sign-hotspot{border-radius:50%;clip-path:circle(50%)}

.story-page-2 [data-layer="last-narration"]{animation:none;opacity:0}
.story-page-2.map-narration-finished [data-layer="last-narration"]{animation:story-caption-reveal 1.25s ease-out both}

.pickup-invitation::before{background-image:url("assets/halo-ellipse43.png");mix-blend-mode:normal;filter:none}

#library-caption-hotspot[data-revealed="true"]::before{display:none}
#route-hotspot.leaflet-invitation{border-radius:50%;clip-path:circle(50%)}
#route-hotspot.leaflet-invitation::before{left:50%;top:50%;width:100%}
.dining-arriving>.story-motion{transform-origin:50% 100%;animation:dining-food-reframe 9.3s cubic-bezier(.22,.65,.3,1) both;will-change:transform}
@keyframes dining-food-reframe{0%,23.6559%{transform:scale(2.05)}34.4086%{transform:translateX(16%) scale(2.05)}46.2366%{transform:scale(2.05)}58.0645%{transform:translateX(-16%) scale(2.05)}69.8925%{transform:scale(2.05)}100%{transform:none}}
.dining-arriving .meal-dialogue-left{animation-delay:9.6s}
.dining-arriving .meal-dialogue-right{animation-delay:14.691s}

.courtroom-invitation::before{background-image:url('assets/halo-ellipse43.png');mix-blend-mode:normal;filter:none}
.camera-arriving .finale-book-photo{height:705.766px;transform-origin:50% 50%;animation:camera-photo-settle 2.1s cubic-bezier(.2,.65,.3,1) both}
.camera-arriving .story-caption{animation-delay:1.7s}
.camera-shutter{position:absolute;inset:0;z-index:65;overflow:hidden;pointer-events:none}
.camera-previous{position:absolute;inset:0;background:#fff;animation:camera-crossfade 1.5s cubic-bezier(.3,0,.25,1) both}
.camera-flash{position:absolute;inset:0;background:#fff;animation:camera-flash 1.15s ease-out both}
@keyframes camera-crossfade{0%,8%{opacity:1}100%{opacity:0}}
@keyframes camera-flash{0%{opacity:0}18%{opacity:.65}55%{opacity:.12}100%{opacity:0}}
@keyframes camera-photo-settle{from{transform:scale(1.018)}to{transform:scale(1)}}

.ending-arriving>.scene{animation:ending-text-reveal 1.6s .7s ease-in-out both}
.ending-previous{position:absolute;inset:0;z-index:64;background:#fff;pointer-events:none;animation:ending-photo-fade 1.1s ease-in-out both}
@keyframes ending-photo-fade{0%,12%{opacity:1}100%{opacity:0}}
@keyframes ending-text-reveal{from{opacity:0}to{opacity:1}}

.dining-previous{position:absolute;inset:0;z-index:63;background:#fff;pointer-events:none;transform-origin:50% 45%;animation:dining-entrance-fade 1.8s ease-in-out both}
@keyframes dining-entrance-fade{0%{opacity:1;transform:scale(1)}65%{opacity:1;transform:scale(1.65)}100%{opacity:0;transform:scale(1.9)}}
#cover-start-hotspot .cover-start-label{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);white-space:nowrap;padding:.48em 1.15em;border:1px solid #c89c56;border-radius:999px;background:#fff8e6ee;color:#88591f;box-shadow:0 2px 9px #76501e20;font-size:clamp(13px,1.7vw,21px);letter-spacing:.08em;animation:cover-invite 2.6s ease-in-out infinite;pointer-events:none}
@keyframes cover-invite{0%,100%{box-shadow:0 2px 9px #76501e20}50%{box-shadow:0 2px 17px #d39c4655}}
.dining-arriving{overflow:hidden}

.court-arriving{overflow:hidden}
.court-arriving>.story-motion{animation:courtroom-arrive 1.8s ease-in-out both;transform-origin:center}
.court-previous{position:absolute;inset:0;z-index:63;pointer-events:none;background:#fff;animation:courtroom-depart 1.4s ease-in-out both}
@keyframes courtroom-arrive{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
@keyframes courtroom-depart{0%,12%{opacity:1}100%{opacity:0}}

/* Keep narration cues aligned with the picture when a reader changes tabs. */
html[data-story-paused] #stage,html[data-story-paused] #stage *,html[data-story-paused] #stage *::before,html[data-story-paused] #stage *::after{animation-play-state:paused!important}