/* Token fills/strokes for procedural SVG (art.js, stage.js). */
.f-paper{fill:var(--paper)}.f-paper-2{fill:var(--paper-2)}.f-card{fill:var(--card)}.f-ink{fill:var(--ink)}.f-ink-2{fill:var(--ink-2)}.f-ink-3{fill:var(--ink-3)}.f-rule{fill:var(--rule)}
.f-forest{fill:var(--forest)}.f-forest-2{fill:var(--forest-2)}.f-camellia{fill:var(--camellia)}.f-sea-pale{fill:var(--sea-pale)}.f-ochre{fill:var(--ochre)}.f-night-2{fill:var(--night-2)}
.f-indigo{fill:var(--indigo)}.f-sky{fill:var(--sky)}.f-mist{fill:var(--mist)}.f-sea{fill:var(--sea)}.f-sea-deep{fill:var(--sea-deep)}.f-sand{fill:var(--sand)}
.s-card{stroke:var(--card)}.s-ink{stroke:var(--ink)}.s-rule{stroke:var(--rule)}.s-forest{stroke:var(--forest)}.s-camellia{stroke:var(--camellia)}.s-ochre{stroke:var(--ochre)}.s-sky{stroke:var(--sky)}.s-indigo{stroke:var(--indigo)}.s-sea{stroke:var(--sea)}.s-sea-deep{stroke:var(--sea-deep)}
svg.veh{display:block;max-width:100%;height:auto}

/* stage: one viewport-high scene that plays on its own; tap skips to the end */
.stage{position:relative;display:block;height:calc(100svh - var(--navh) - env(safe-area-inset-bottom,0px));min-height:420px}
.stage-view{position:relative;height:100%;overflow:hidden;isolation:isolate;background:var(--indigo);color:var(--paper)}
.stage-view>*{position:absolute;inset:0}
.sat{width:100%;height:100%;display:block}
.land{opacity:0}
.land.photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:52% 42%;transform:scale(1.1);transform-origin:50% 60%;will-change:transform}
/* Real photo: ink wash top and bottom keeps the poster type legible without recolouring the photo. */
.land.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(color-mix(in srgb, var(--ink) 50%, transparent),transparent 42%,transparent 58%,color-mix(in srgb, var(--ink) 55%, transparent))}
.atmos{pointer-events:none;width:100%;height:100%}
/* train on the map: anchor (lead car centre, wheels) sits on the route point */
.stage-view .rider{inset:0 auto auto 0;width:0;height:0;opacity:0;pointer-events:none;will-change:transform}
.stage-view .rider>div{--rw:clamp(210px,56vw,360px);position:absolute;width:var(--rw);left:calc(var(--rw) * -.648);bottom:-3px;filter:drop-shadow(0 0 1.5px var(--card)) drop-shadow(0 5px 7px color-mix(in srgb, var(--ink) 60%, transparent))}
.veil-clouds{pointer-events:none;overflow:hidden}
.veil-clouds::after{content:"";position:absolute;inset:0;background:var(--mist);opacity:calc(var(--clouds, 0) * 1.6 - .6)}
.bank{position:absolute;inset:-10% 0;will-change:transform}
.bank.l{transform:translate3d(calc((var(--clouds, 0) - 1) * (100% + 120vmax)),0,0)}
.bank.r{transform:translate3d(calc((1 - var(--clouds, 0)) * (100% + 120vmax)),0,0)}
.bank i,.veil .vbank i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,var(--card),color-mix(in srgb, var(--mist) 70%, transparent) 55%,transparent)}
.bank.r i{left:auto;right:0}

/* poster type: behaves like a printed travel poster laid over the photograph */
.poster{pointer-events:none;text-shadow:0 2px 18px color-mix(in srgb, var(--ink) 50%, transparent)}
.pname{position:absolute;right:max(16px,6vw);top:calc(56px + env(safe-area-inset-top,0px));writing-mode:vertical-rl;font:900 clamp(64px,22vw,180px)/1 var(--serif);letter-spacing:.06em;clip-path:inset(0 0 100% 0);will-change:clip-path,transform}
.ptag{position:absolute;left:20px;bottom:calc(16% + 30px);font:700 clamp(18px,5.2vw,34px)/1.3 var(--serif);letter-spacing:.3em;white-space:nowrap;opacity:0}
.psub{position:absolute;left:22px;bottom:16%;font:500 14px/1.4 var(--sans);letter-spacing:.24em;opacity:0}
.stage-view .tag{inset:auto auto auto 20px;top:calc(20px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;pointer-events:none;text-shadow:0 1px 12px color-mix(in srgb, var(--ink) 60%, transparent)}
.stage-view .tag span{font:500 12px var(--sans);letter-spacing:.3em}
.stage-view .tag b{font:500 52px/1 var(--serif);letter-spacing:.02em}
.stage-view .tag em{font:500 12px var(--mono);font-style:normal;opacity:.8}
body:not(.oncover) .stage-view .tag{top:calc(58px + env(safe-area-inset-top,0px))}
.stage-view .ride{inset:auto 20px 34px 20px;display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1.5px solid var(--paper);opacity:var(--ride, 0);transform:translate3d(0,calc((1 - var(--ride, 0)) * 12px),0);pointer-events:none;max-width:600px;text-shadow:0 1px 12px color-mix(in srgb, var(--ink) 70%, transparent)}
.stage-view .ride .lbl{color:var(--sea-pale)}
.stage-view .ride b{font:700 18px/1.3 var(--serif)}
.stage-view .ride small{font:500 12px var(--sans)}
.stage-view .attr{inset:auto 8px 6px auto;max-width:78%;text-align:right;font:400 9px/1.3 var(--sans);opacity:calc(var(--map, 1) * .75);pointer-events:none}
.stage-view .skip{inset:auto 20px auto auto;top:calc(62px + env(safe-area-inset-top,0px));font:500 11px var(--sans);letter-spacing:.2em;opacity:calc(var(--map, 1) * .7);pointer-events:none}
.stage-view .scrollhint{inset:auto 0 30px;margin:0 auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;color:var(--paper);font:500 12px var(--sans);letter-spacing:.3em;text-shadow:0 1px 12px color-mix(in srgb, var(--ink) 70%, transparent);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.stage-view .scrollhint i{font-style:normal;font-size:16px;animation:nudge 2s var(--ease) infinite}
.stage-view.is-done .scrollhint{opacity:.9;pointer-events:auto}
@keyframes nudge{50%{transform:translate3d(0,6px,0)}}
.stage-view .loading{inset:auto 0;top:50%;text-align:center;font:500 13px var(--sans);letter-spacing:.3em;opacity:0;transition:opacity .6s;pointer-events:none}
.stage-view.is-loading .loading{opacity:.85}
.grain{pointer-events:none;opacity:.07;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.grain::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 55%,color-mix(in srgb, var(--ink) 55%, transparent))}

/* cover: poster type arrives on load; 開始旅程 goes straight to the flight */
.cover{position:relative}
.cover .stage-view .pname{top:calc(36px + env(safe-area-inset-top,0px));animation:brush 2.8s .4s var(--ease) backwards}
.cover .stage-view .ptag{animation:track 3.2s .9s var(--ease) backwards}
.cover .stage-view .psub{animation:rise 1.6s 2s var(--ease) backwards}
/* the boarding pass occupies the stage foot, so the cover tagline sits above it */
.cover .stage-view .ptag{bottom:calc(var(--navh) + 196px)}
.cover .stage-view .psub{bottom:calc(var(--navh) + 166px)}
@keyframes brush{from{clip-path:inset(0 0 100% 0);transform:translate3d(0,-24px,0)}}
@keyframes track{from{letter-spacing:1em;opacity:0}}
@keyframes rise{from{opacity:0;transform:translate3d(18px,0,0)}}
.cta{position:absolute;z-index:3;left:50%;bottom:auto;top:calc(100svh - var(--navh) - env(safe-area-inset-bottom,0px) - 176px);width:min(380px,calc(100vw - 32px));transform:translateX(-50%);margin:0;animation:rise 1.2s 2.6s var(--ease) backwards}
.bag{position:absolute;z-index:3;right:max(16px,calc(50% - 190px));top:calc(100svh - var(--navh) - env(safe-area-inset-bottom,0px) - 176px - 112px);display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:4px;cursor:pointer;color:var(--card);font:700 12px var(--sans);letter-spacing:.16em;text-shadow:0 1px 6px color-mix(in srgb, var(--ink) 70%, transparent);animation:rise 1.2s 2.9s var(--ease) backwards}
.bag svg{width:52px;height:auto;filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--ink) 45%, transparent));transform-origin:50% 100%;transition:transform .4s var(--ease)}
.bag svg text{font-family:var(--serif)}
.bag:hover svg,.bag:focus-visible svg{transform:rotate(-6deg)}
.cover-copy{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:40px 20px 24px}
.cover-copy .lbl{color:var(--sea)}
.cv-title{font:900 clamp(32px,9vw,52px)/1.2 var(--serif);letter-spacing:.08em;margin-top:10px}
.cv-jp{margin-top:16px;font:500 16px/1.9 var(--serif);color:var(--ink-2);max-width:26em}
.cover-copy .credit{display:block;margin-top:10px}


/* page-to-page veils */
.veil{position:fixed;inset:0;z-index:80;overflow:hidden;cursor:pointer}
.veil .vm{position:absolute;top:0;left:0;width:100vw;height:135vh;will-change:transform}
.veil .st-indigo{stop-color:var(--indigo)}.veil .st-forest{stop-color:var(--forest)}.veil .st-ink{stop-color:var(--ink)}.veil .st-sea{stop-color:var(--sea)}.veil .st-sea-deep{stop-color:var(--sea-deep)}.veil .st-sky{stop-color:var(--sky)}
.veil .vcap.ride{color:var(--paper-2)}
.veil .vcap.ride b{font-size:clamp(24px,7vw,36px);letter-spacing:.08em}
.veil .vfill{position:absolute;inset:0}
.veil .vfill.mist{background:var(--mist)}
.veil .vbank{position:absolute;inset:-10% 0;will-change:transform}
.veil .vcap{position:absolute;left:0;right:0;top:40%;padding:0 20px;text-align:center;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.veil .vcap b{font:700 46px/1.1 var(--serif);letter-spacing:.14em}
.veil .vcap span{font:500 12px var(--sans);letter-spacing:.32em}
.veil.v-fade{opacity:0}
/* night veil: starry sky with a sleeper, then sunrise over the hills */
.veil .vnight{background:linear-gradient(var(--ink),color-mix(in srgb, var(--indigo) 80%, var(--ink)))}
.veil .vstars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:var(--card);animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25}}
.veil .vmoon{position:absolute;right:20%;top:14%;width:60px;height:60px;border-radius:50%;box-shadow:-13px 8px 0 0 var(--card),-13px 8px 24px 0 color-mix(in srgb, var(--card) 35%, transparent)}
.veil .vsleep{position:absolute;left:50%;top:60%;width:min(300px,70vw);transform:translateX(-50%)}
.veil .vfuton{display:block;width:100%}
.veil .vfuton .blanket{transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.05)}}
.veil .vzz{position:absolute;left:4%;top:-38%;font:700 22px var(--serif);color:var(--sea-pale)}
.veil .vzz i{font-style:normal;display:inline-block;animation:zz 3s ease-in-out infinite}
.veil .vzz i:last-child{animation-delay:.6s}
.veil .vdawn{background:linear-gradient(0deg,var(--sand),var(--sea-pale) 38%,var(--sky) 78%)}
.veil .vsun{position:absolute;left:50%;bottom:4%;width:220px;height:220px;margin-left:-110px;border-radius:50%;background:radial-gradient(circle,var(--card) 0 27%,color-mix(in srgb, var(--sand) 30%, var(--card)) 36%,color-mix(in srgb, var(--sand) 32%, transparent) 50%,color-mix(in srgb, var(--sand) 10%, transparent) 62%,transparent 71%)}
.veil .vhills{position:absolute;left:0;right:0;bottom:0;width:100%;height:34%}
.veil .vhills .water{fill:var(--sea-deep)}.veil .vhills .glint{stroke:var(--card);stroke-width:3;stroke-linecap:round;opacity:.55}
.veil .vcap.night{top:28%;color:var(--paper-2)}
.veil .vcap.dawn{top:24%;color:var(--ink)}
.veil .vcap.night b,.veil .vcap.dawn b{font-size:clamp(30px,9vw,46px);letter-spacing:.08em}

@media (min-width:760px){
  .ptag,.psub{left:max(20px,calc(50% - 300px))}
  .stage-view .tag,.stage-view .ride{left:max(20px,calc(50% - 300px))}
}
@media (prefers-reduced-motion:reduce){
  .cover .stage-view .pname,.cover .stage-view .ptag,.cover .stage-view .psub,.cta,.bag{animation:none}
  .sheet .panel{animation:none}
  .veil .vstars i,.veil .vfuton .blanket,.veil .vzz i{animation:none}
  .stage-view .scrollhint i{animation:none}
}
.veil .vm .crest{stroke:var(--card);stroke-width:2.5;stroke-opacity:.55;vector-effect:non-scaling-stroke}