:root{--scene-paper-bg:#e5dbcf;--scene-paper-gold-bg:#e5dbcf}
.scroll-prelude{height:320svh;position:relative;background:#c8c3b8;color:#55574e;--journey:0}
.scroll-stage{position:sticky;top:0;height:100svh;min-height:540px;overflow:hidden;background:var(--scene-paper-bg);isolation:isolate}
.scroll-moon{position:absolute;left:13.5%;top:10%;width:35vw;max-width:680px;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;overflow:hidden;background:#eddda9;--moon-edge:radial-gradient(closest-side,#000 84%,#000000eb 89%,#00000073 95%,transparent 100%);-webkit-mask-image:var(--moon-edge),linear-gradient(rgb(0 0 0 / var(--moon-fill,0)),rgb(0 0 0 / var(--moon-fill,0))),linear-gradient(135deg,#000 10%,#000000e6 30%,#00000080 53%,#0000001f 72%,transparent 87%);-webkit-mask-composite:source-in,source-over,source-over;mask-image:var(--moon-edge),linear-gradient(rgb(0 0 0 / var(--moon-fill,0)),rgb(0 0 0 / var(--moon-fill,0))),linear-gradient(135deg,#000 10%,#000000e6 30%,#00000080 53%,#0000001f 72%,transparent 87%);mask-composite:intersect,add,add;opacity:.68}
.scroll-moon:before{content:"";position:absolute;inset:-25%;background:linear-gradient(135deg,#ffe890 18%,#edb965 55%,#df9746 85%);opacity:var(--moon-warmth,0);transform:rotate(var(--moon-counter-turn,0deg))}
.scroll-moon.scroll-moon--travelling{left:0;top:0;max-width:none;will-change:transform,opacity}
@media(max-width:700px){.scroll-moon{left:13%;top:15%;width:66vw;max-width:none}}
@media(prefers-reduced-motion:reduce){.scroll-moon.scroll-moon--travelling{will-change:auto}}
.scroll-stage:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.2' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.scroll-nav{position:absolute;top:42px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;z-index:2;font:10px/1.5 Arial,sans-serif;letter-spacing:.22em}
.scroll-brand{font:italic 30px/1 Georgia,serif;letter-spacing:-.04em;color:#55594c;text-decoration:none}
#scrollScene{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:none}
.scroll-loaded #scrollScene{opacity:1;z-index:1}
.ink-flow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:1;mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){.ink-flow{display:none}}
.reference-landscape{--vapor-color:#f3f4ef;position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--landscape-reveal,0);transform-origin:65% 65%;transform:scale(calc(1 + var(--landscape-zoom,0)*.12));will-change:transform,opacity}
.reference-landscape svg{display:block;width:100%;height:100%}
.landmark-layer{position:absolute;inset:0;z-index:3;pointer-events:none;transform-origin:65% 65%;transform:scale(calc(1 + var(--landscape-zoom,0)*.12))}
.pagoda-hotspot{position:absolute;display:block;width:44px;height:44px;margin:0;padding:0;border:0;background:none;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pagoda-hotspot[hidden]{display:none}
.pagoda-glow{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:#fff3b6;box-shadow:0 0 8px 4px #ffeaa78c,0 0 22px 10px #ffe6a34d;animation:pagoda-light 3.6s ease-in-out infinite}
.pagoda-glow:before{content:"";position:absolute;inset:-13px;border-radius:50%;background:radial-gradient(circle,#ffecab9c,transparent 70%);filter:blur(3px);animation:pagoda-halo 3.6s ease-in-out infinite}
@keyframes pagoda-light{0%,100%{opacity:.65;box-shadow:0 0 6px 3px #ffeaa770,0 0 16px 7px #ffe6a333}50%{opacity:1;box-shadow:0 0 11px 5px #fff0b5cc,0 0 29px 13px #ffe6a37a}}
@keyframes pagoda-halo{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.pagoda-label{position:absolute;left:calc(50% + 28px);top:50%;display:flex;align-items:flex-start;gap:12px;padding:0;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .3s ease,transform .3s ease,visibility .3s;pointer-events:none;text-align:left;white-space:nowrap}
.pagoda-label>span{writing-mode:vertical-rl;text-orientation:upright;color:#343b37;font-family:"Yu Mincho","Noto Serif TC","Songti TC",serif;font-size:30px;font-weight:400;line-height:1.2;letter-spacing:.14em;text-shadow:0 1px 10px #ffffffe0}
.pagoda-label>span[lang=en]{writing-mode:vertical-rl;text-orientation:mixed;font:400 16px/1.3 Georgia,"Times New Roman",serif;letter-spacing:.21em;color:#62665e}
.pagoda-hotspot[data-landmark=resurrection] .pagoda-label>span[lang=en]{font-size:min(16px,1.9svh)}
.pagoda-hotspot[data-open=true] .pagoda-label{visibility:visible;opacity:1;transform:translateY(0)}
.pagoda-hotspot:focus-visible{outline:1px solid #9b915a;outline-offset:2px;border-radius:50%}
@media(prefers-reduced-motion:reduce){.pagoda-label{transition:none}.pagoda-glow,.pagoda-glow:before{animation:none}}
[data-palette=gold] .reference-landscape{--vapor-color:#fff5df}
[data-palette=gold] .reference-color{filter:url(#landscape-gold)}
.valley-fog{animation:valley-mist 16s linear infinite;transform-origin:0 0;will-change:transform,opacity}
.valley-fog--near{animation-delay:-6s}
.valley-fog--far{animation-name:valley-mist-back;animation-duration:20s;animation-delay:-11s}
.valley-fog--middle{animation-duration:18s;animation-delay:-13s}
.valley-fog--incoming{animation-name:valley-mist-entry;animation-duration:18s;animation-delay:-4s}
.rising-mist{animation:valley-mist-rise 14s linear infinite;transform-origin:0 0;will-change:transform,opacity}
.rising-mist--left{animation-delay:-3s}
.rising-mist--center{animation-duration:17s;animation-delay:-10s}
.rising-mist--front{animation-duration:20s;animation-delay:-7s}
.airborne-mist{animation:airborne-mist-drift 14s linear infinite;transform-origin:0 0;will-change:transform,opacity}
.airborne-mist--near{animation-delay:-4s}
.airborne-mist--right{animation-name:airborne-mist-back;animation-duration:16s;animation-delay:-10s}
.airborne-mist--far{animation-duration:18s;animation-delay:-8s}
@keyframes airborne-mist-drift{0%{transform:translate(-200px,35px) scale(.86);opacity:0}15%{opacity:.82}65%{opacity:.88}100%{transform:translate(260px,-90px) scale(1.12);opacity:0}}
@keyframes airborne-mist-back{0%{transform:translate(210px,35px) scale(.85);opacity:0}15%{opacity:.80}65%{opacity:.86}100%{transform:translate(-230px,-95px) scale(1.12);opacity:0}}
@keyframes valley-mist{0%{transform:translate(-240px,65px) scale(.86);opacity:0}16%{opacity:.78}70%{opacity:.82}100%{transform:translate(340px,-155px) scale(1.16);opacity:0}}
@keyframes valley-mist-back{0%{transform:translate(260px,55px) scale(.90);opacity:0}18%{opacity:.68}72%{opacity:.74}100%{transform:translate(-320px,-140px) scale(1.13);opacity:0}}
@keyframes valley-mist-entry{0%{transform:translate(-220px,55px);opacity:0}16%{opacity:.82}70%{opacity:.76}100%{transform:translate(760px,-145px);opacity:0}}
@keyframes valley-mist-rise{0%{transform:translate(-55px,65px) scale(.72);opacity:0}18%{opacity:.72}54%{opacity:.90}80%{opacity:.64}100%{transform:translate(125px,-200px) scale(1.28);opacity:0}}
@media(prefers-reduced-motion:reduce){.valley-fog,.rising-mist,.airborne-mist{animation:none;opacity:.20;will-change:auto}.reference-landscape{will-change:auto}}
.landscape-message{position:absolute;left:12%;top:29%;z-index:2;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:1.1em;margin:0;color:#656957;font-size:clamp(15.3px,1.173vw,21.42px);font-weight:500;line-height:1.8;letter-spacing:.18em;opacity:clamp(0,calc((var(--journey,0) - .56)*8),1);pointer-events:none}
.landscape-message>span{writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;font-feature-settings:"vert" 1,"vrt2" 1}
.landscape-message>span:last-child{margin-top:2em}
@media(max-width:700px){.landscape-message{left:12%;top:25%;font-size:15.3px;gap:.8em}}
@media(max-aspect-ratio:3/2){.landscape-message{left:8%;top:18%;font-size:15.3px}}
.scroll-copy{position:absolute;left:7.5%;top:24%;max-width:48%;z-index:2;pointer-events:none}
.scroll-copy>p{margin:0 0 24px;font:10px/1.5 Arial,sans-serif;letter-spacing:.24em;color:#8c897c;opacity:clamp(0,calc(1 - var(--journey)*2),1)}
.scroll-copy h1{font-family:"Bodoni MT",Didot,"Times New Roman",serif;font-size:clamp(58px,7.2vw,134px);font-weight:400;line-height:.86;letter-spacing:-.055em;color:#62655f;margin:39px 0 0;text-align:left;opacity:clamp(0,calc((.56 - var(--journey))*6.25),1)}
.scroll-copy h1>span{display:block;white-space:nowrap}
.scroll-copy h1>span:last-child{font-size:.90em;margin:.12em 0 0}
.scroll-copy .scroll-subtitle{margin:26px 0 24px;padding:0;text-align:left;text-indent:0;font-size:20px;font-family:inherit;font-weight:500;letter-spacing:.15em;line-height:2.2;color:#626858}
.scroll-prelude[data-palette=gold] .scroll-stage{background:var(--scene-paper-gold-bg)}
.scroll-prelude[data-stage=landscape] .scroll-stage,.scroll-prelude[data-stage=arrive] .scroll-stage{background:#e5dbcf}
.scroll-caption{position:absolute;bottom:8.5%;right:9%;text-align:right;z-index:2}
.scroll-caption p{margin:8px 0;font-size:12px;letter-spacing:.2em}
.scroll-caption em{font:italic 18px/1.8 Georgia,serif;color:#969180}
.scroll-caption .arrival{opacity:0;transition:opacity .7s}
[data-stage=arrive] .arrival{opacity:1}
.scroll-bottom{position:absolute;bottom:36px;left:7.5%;right:6%;display:flex;justify-content:space-between;align-items:center;z-index:2;font:9px/1.6 Arial,sans-serif;letter-spacing:.2em;color:#8c897c}
.scroll-bottom a{color:inherit;text-decoration:none;border-bottom:1px solid #b2ad9f;padding-bottom:7px}
.scroll-cue{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font:12px/1.2 Georgia,serif;letter-spacing:.06em}
.scroll-meter{position:relative;width:1px;height:58px;background:#8c897c40;display:block;overflow:hidden}
.scroll-meter:after{content:"";position:absolute;inset:0;background:currentColor;animation:scroll-cue-down 2s cubic-bezier(.55,0,.35,1) infinite}
@keyframes scroll-cue-down{0%{transform:translateY(-105%)}75%,100%{transform:translateY(105%)}}
@media(max-width:700px){.scroll-cue{font-size:11px;gap:12px}.scroll-meter{height:46px}}
@media(prefers-reduced-motion:reduce){.scroll-meter:after{animation:none;transform:none}}
.scroll-poster{display:none;position:absolute;inset:0;z-index:1;background:url('./assets/scroll/coil-mountain-close.png') center/contain no-repeat}
.scroll-fallback .scroll-poster{display:block}
.scroll-fallback[data-stage=landscape] .scroll-poster,.scroll-fallback[data-stage=arrive] .scroll-poster{background-image:url('./assets/scroll/mountain-mountain-close.png')}
@media(max-width:700px){.scroll-nav{top:28px}.scroll-nav>span{font-size:8px}.scroll-copy{left:8%;top:21%;max-width:84%}.scroll-copy h1{font-size:clamp(45px,11.25vw,72px);margin-top:35px}.scroll-copy>p{margin-bottom:20px}.scroll-copy .scroll-subtitle{font-size:17px;margin-top:24px}.scroll-caption{bottom:16%;right:8%}.scroll-caption em{font-size:15px}.scroll-caption p{font-size:10px}.scroll-bottom{bottom:25px;left:8%}#scrollScene{top:8%;height:90%;width:160%;left:-30%}}
@media(prefers-reduced-motion:reduce){#scrollScene,.arrival{transition:none}html{scroll-behavior:auto}}




.scroll-prelude{height:500svh}
[data-stage=arrive] .scroll-caption{opacity:0;pointer-events:none}
.scroll-in-mountains .scroll-bottom{display:none}
.scroll-in-mountains .scroll-meter{background:#f4f8fa55}
.scroll-in-mountains .scroll-meter:after{background:#f4f8fa}
@media(max-width:700px){#scrollScene{inset:0;width:100%;height:100%}}
.scroll-brand{display:block;width:clamp(145px,13.6vw,195px);line-height:0}
.scroll-brand img{display:block;width:100%;height:auto}
@media(max-width:700px){.scroll-brand{width:123px}}
.ambient-paused .valley-fog,.ambient-paused .rising-mist,.ambient-paused .airborne-mist,.ambient-paused .contact-fog,.ambient-paused .pagoda-glow,.ambient-paused .pagoda-glow:before{animation-play-state:paused!important}
.ambient-paused .reference-landscape,.ambient-paused .contact-mist,.ambient-paused .news-entry-mist,.ambient-paused .ink-flow{visibility:hidden}
/* Stop ambient loops outside their visible chapters, including the new contact loop. */
.ambient-paused .contact-composition-hex:before,.ambient-paused .contact-button__content:after{animation-play-state:paused!important}
/* Keep the same mist shapes on slower GPUs, without per-pixel turbulence/displacement. */
.graphics-economy .valley-fog use,.graphics-economy .rising-mist use,.graphics-economy .airborne-mist use,.graphics-economy .contact-fog use{filter:none}
.graphics-economy .reference-landscape #vapor-bank,.graphics-economy .reference-landscape #vapor-plume,.graphics-economy .reference-landscape #airborne-cloud{filter:none}
.graphics-economy .contact-mist #contact-vapor-bank,.graphics-economy .contact-mist #contact-vapor-plume{filter:none}