/* Glass Signal: typography through optical panes. A DOM/CSS first frame, never another WebGL scene. */
#arrival{--signal-progress:0;position:fixed;inset:0;margin:0;width:100%;height:100svh;max-height:none;max-width:none;padding:28px clamp(22px,5vw,84px) 18px;border:0;border-radius:0;overflow:auto;color:#f0eee5;background:transparent;isolation:isolate;opacity:1;transform:none;transition:opacity .45s ease .5s;z-index:1000}
#arrival:focus,#arrival:focus-visible{outline:none}
#arrival[open]{display:grid;grid-template-rows:auto minmax(310px,1fr) auto auto;gap:24px}
#arrival[hidden]{display:none}
#arrival::backdrop{background:transparent}
/* The night itself is a layer, so Step inside can dissolve it and let the room show through the parting glass. */
#arrival::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 3px,#a8d2df03 3px 4px),radial-gradient(ellipse at 77% 36%,#24495540,transparent 48%),radial-gradient(ellipse at 18% 68%,#493a342b,transparent 52%),#080e13;transition:opacity .75s cubic-bezier(.4,0,.2,1) .12s}
#arrival .arrival-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:16px;border-bottom:1px solid #b6d8da20}
#arrival .arrival-top>span:first-child{font:400 13px/1.4 var(--mark);letter-spacing:.07em;text-transform:none}
#arrival .arrival-origin{font:400 10px/1.5 var(--mono);letter-spacing:.035em;color:#a0b4b9;text-transform:none}
#arrival-skip{font:400 11px/1.4 var(--mono);color:#c0ced0;min-height:44px;padding:8px 0;border:0;background:none}
#arrival-skip:not(:disabled):hover{color:#fff}
#arrival-skip:disabled{opacity:.55;cursor:wait}
.glass-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:18px 0 28px;isolation:isolate}
/* Reflection: ONE continuous skyline, positioned in the optics' own coordinates (cq units) so every pane is a window onto the
 * same city; each pane's skew/turn and a small --shift read as refraction. A faint ghost of the skyline sits behind the title. */
.glass-reflection{position:absolute;left:calc(var(--x)*-1cqw + var(--shift,0px));top:calc(24cqh - var(--y)*1cqh);width:100cqw;height:auto;max-width:none;aspect-ratio:625/159;transform:scaleX(-1);mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity .8s ease;mask-image:linear-gradient(transparent,black 14%,black 86%,transparent);-webkit-mask-image:linear-gradient(transparent,black 14%,black 86%,transparent)}
#arrival[data-city-ready=true] .glass-reflection{opacity:calc(.62 + var(--signal-progress)*.3)}
.glass-pane{overflow:hidden}
.glass-optics::before{content:"";position:absolute;left:0;right:0;top:24cqh;aspect-ratio:625/159;background:url('assets/arrival-city.webp') center/100% auto no-repeat;transform:scaleX(-1);opacity:0;transition:opacity 1.2s ease;mask-image:radial-gradient(ellipse 58% 60% at 50% 55%,black,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 58% 60% at 50% 55%,black,transparent 78%)}
#arrival[data-city-ready=true] .glass-optics::before{opacity:.13}
.pane-1{--x:28;--y:18;--shift:-18px}.pane-2{--x:39;--y:5;--shift:10px}.pane-3{--x:50;--y:10;--shift:-8px}.pane-4{--x:61;--y:2;--shift:14px}.pane-5{--x:71;--y:17;--shift:-12px}
.glass-preface{font:400 10px/1.5 var(--mono);letter-spacing:.06em;color:#97b6bd;margin:0 0 16px;position:relative;z-index:2}
#arrival h2{font:350 clamp(75.44px,11.04vw,171.12px)/.85 var(--display);letter-spacing:-.067em;text-align:center;margin:0;position:relative;color:#e1e9e7;filter:drop-shadow(0 8px 35px #071a22);transition:opacity .4s,transform .6s var(--ease);z-index:0}
#arrival h2>span{display:block}
#arrival h2>span+span{margin-left:.38em;color:#b6d4d7}
.glass-period{color:#b7e7ed}
.glass-coordinate,.glass-edition{position:absolute;top:48%;font:400 10.5px/1.8 var(--mono);color:#86a1a7;letter-spacing:.08em}
.glass-coordinate{left:0;padding-left:18px;border-left:1px solid #a5dade5c}
.glass-edition{right:0;text-align:right;padding-right:18px;border-right:1px solid #a5dade5c}
#arrival-greeting{position:relative;z-index:2;font:400 13px/1.6 var(--text);color:#a7b8ba;text-align:center;margin:34px 0 0;max-width:45ch}
.glass-optics{position:absolute;inset:0;pointer-events:none;perspective:900px;z-index:1;overflow:hidden;container-type:size;mask-image:linear-gradient(transparent,black 14%,black 78%,transparent);-webkit-mask-image:linear-gradient(transparent,black 14%,black 78%,transparent)}
/* No backdrop-filter: the panes carry the city themselves, so five blur/contrast layers are gone (cheaper on every device). */
.glass-pane{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);height:80%;width:clamp(35px,5.8vw,90px);border-left:1px solid #d2f1e36b;border-right:1px solid #b3d6df38;background:linear-gradient(93deg,#d9fbff06,#b5d5e314 25%,#09182170 48%,#b7e6f026 51%,#badce108 79%,#ffdfbf2a);box-shadow:inset 5px 0 10px #d9f9ff12,inset -6px 0 12px #0b151b8c,6px 0 18px #0006;transform:translateX(calc((1 - var(--signal-progress))*var(--drift))) skewX(-12deg) rotateY(-18deg);transition:transform 1s cubic-bezier(.2,.75,.2,1),opacity .5s ease;opacity:calc(.62 + var(--signal-progress)*.34)}
.pane-1{--drift:-75px;height:67%}
.pane-2{--drift:-30px;height:83%}
.pane-3{--drift:20px;height:79%;width:clamp(45px,6.5vw,100px)}
.pane-4{--drift:55px;height:91%}
.pane-5{--drift:95px;height:70%;width:clamp(24px,3.7vw,55px)}
.glass-ray{position:absolute;left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#afd9e826,transparent 40%,#edd0b822,transparent);transform:rotate(-14deg);box-shadow:0 0 32px 3px #b7e9f008;opacity:.8}
#arrival .arrival-bottom{display:grid;grid-template-columns:minmax(0,380px) auto;justify-content:space-between;align-items:end;gap:24px;text-align:left;margin:0;padding:0;color:inherit}
.arrival-loading{min-width:0}
.signal-heading{display:flex;align-items:center;gap:9px}
#arrival-status{font:400 12px/1.5 var(--text);color:#ccd8d7;margin:0;max-width:none}
.signal-dot{width:5px;height:5px;border-radius:50%;flex:none;background:#b5e5e9;box-shadow:0 0 12px #b5e5e980;animation:signal-breathe 2s ease-in-out infinite}
#arrival-count{font:400 10px/1 var(--mono);color:#a7b9bb;white-space:nowrap;margin-left:auto}
.signal-ticks{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:12px 0 9px}
.signal-ticks i{height:2px;background:#b6dce324;transition:background .25s,box-shadow .25s}
.signal-ticks i[data-complete=true]{background:#b3e2e7;box-shadow:0 0 7px #b3e2e733}
#arrival progress{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}
#arrival-phase{display:block;font:400 11px/1.5 var(--mono);letter-spacing:.01em;color:#8fa8ae;margin:0}
.arrival-action{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
#arrival-enter,#arrival-retry{display:flex;align-items:center;justify-content:center;min-height:52px;min-width:250px;padding:13px 24px;margin:0;border:1px solid #b8e3e55c;border-radius:0;font:400 13px/1.4 var(--display);color:#d2dddd;background:linear-gradient(120deg,#d8f3ed14,#d3eaff04);box-shadow:none;transition:background .2s,color .2s,border-color .2s}
#arrival-enter:disabled{opacity:.5}
#arrival-enter:not(:disabled){background:#c0e4e4;color:#10252b;border-color:#c0e4e4}
#arrival-enter:not(:disabled):hover{background:#e2f4f2;color:#10252b;border-color:#e2f4f2}
#arrival-retry[hidden]{display:none}
.arrival-action>span{font:400 10.5px/1.5 var(--mono);color:#8ea3a7}
#arrival .arrival-shortcuts{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #bad8d820;padding-top:14px;margin:0;font:400 11px/1.5 var(--text);color:#bacbce}
.arrival-shortcuts a{display:inline-flex;align-items:center;min-height:44px}
.arrival-shortcuts a:hover{color:#fff}
.arrival-shortcuts>span{font:400 10.5px/44px var(--mono);color:#7d959b}
#arrival :is(a,button):focus-visible{outline:2px solid #bfeef3;outline-offset:3px}
#arrival-enter:not(:disabled):focus-visible{outline-offset:4px}
/* Step inside is one move: chrome clears first, the night lifts off the room, the glass parts, the title passes the lens. */
#arrival[data-dismissed=true]{opacity:0;transform:none;pointer-events:none}
#arrival[data-dismissed=true]::before{opacity:0}
#arrival[data-dismissed=true] :is(.arrival-top,.arrival-bottom,.arrival-shortcuts,.glass-preface,#arrival-greeting,.glass-coordinate,.glass-edition){opacity:0;transition:opacity .28s ease,transform .5s cubic-bezier(.4,0,.2,1)}
#arrival[data-dismissed=true] .arrival-top{transform:translateY(-10px)}#arrival[data-dismissed=true] :is(.arrival-bottom,.arrival-shortcuts){transform:translateY(10px)}
#arrival[data-dismissed=true] .glass-pane{transform:translateX(calc(var(--drift)*7)) skewX(-12deg) rotateY(-64deg);opacity:0;transition:transform .95s cubic-bezier(.6,0,.2,1),opacity .7s ease .15s}
#arrival[data-dismissed=true] .glass-optics::before{opacity:0;transition-duration:.5s}
#arrival[data-dismissed=true] h2{transform:scale(1.22);opacity:0;filter:none;transition:transform .95s cubic-bezier(.5,0,.2,1),opacity .55s ease .2s}
#arrival[data-mode=return] .glass-preface,#arrival[data-mode=return] .glass-coordinate,#arrival[data-mode=return] .glass-edition{visibility:hidden}
#arrival[data-mode=return] h2{font-size:clamp(64px,9vw,132px)}
#arrival[data-mode=return] .arrival-action{visibility:hidden}
#arrival[data-mode=recovery] .glass-pane{opacity:.2;animation:none}
#arrival[data-ready=true] .signal-dot{animation:none}
#scene-transfer{position:fixed;inset:auto 24px 28px auto;z-index:500;background:#101d26ed;color:#d7e7e7;border:1px solid #aacfd040;display:flex;align-items:center;gap:12px;padding:18px 22px;font:400 12px/1.4 var(--text);box-shadow:0 8px 28px #0004;pointer-events:none}
#scene-transfer[hidden]{display:none}
#scene-transfer i{width:24px;height:2px;background:#c0e4e4;transform-origin:left;animation:signal-breathe 1.2s ease-in-out infinite}
@keyframes signal-breathe{0%,100%{opacity:.4}50%{opacity:1}}
@media(min-width:900px) and (min-height:850px){#arrival{padding-top:32px;padding-bottom:28px}.glass-preface{margin-bottom:28px}#arrival-greeting{margin-top:48px}}
@media(max-width:700px){
 #arrival{padding:12px 20px 12px}#arrival[open]{gap:16px;grid-template-rows:auto minmax(290px,1fr) auto auto}
 .arrival-origin,.glass-coordinate,.glass-edition{display:none}#arrival .arrival-top{padding-bottom:7px;gap:12px}#arrival .arrival-top>span:first-child{font-size:10px}#arrival-skip{font-size:10px}
 .glass-preface{font-size:10px;letter-spacing:.02em;text-align:center;margin-bottom:28px}#arrival h2{font-size:clamp(64px,17.3vw,115px);line-height:.94}
 #arrival h2>span+span{margin-left:0}.glass-stage{padding:12px 0}#arrival-greeting{font-size:13px;max-width:27ch;margin-top:26px}
 .glass-pane{width:12%;height:67%}.pane-1{--x:12;--y:14;--drift:-25px}.pane-2{--x:32;--y:14;--drift:-10px}.pane-3{--x:49;--y:14;width:15%;--drift:10px}.pane-4{--x:67;--y:14;--drift:22px}.pane-5{--x:83;--y:14;width:8%;--drift:30px}
 .pane-2,.pane-4{display:none}   /* three panes on a phone: the title stays readable, two fewer layers */
 .glass-reflection{top:calc(30cqh - var(--y)*1cqh);width:220cqw;left:calc(-60cqw - var(--x)*1cqw + var(--shift,0px))}.glass-optics::before{top:30cqh;left:-60cqw;right:-60cqw}
 #arrival .arrival-bottom{grid-template-columns:1fr;gap:22px}.arrival-action{align-items:stretch;gap:10px}.arrival-action>span{text-align:center}#arrival-enter,#arrival-retry{width:100%;min-height:48px;font-size:12px}
 #arrival .arrival-shortcuts{gap:8px;padding-top:7px;font-size:11px}.arrival-shortcuts>span{display:none}
 #arrival[data-mode=return] .arrival-action{display:none}#arrival[data-mode=return] h2{font-size:clamp(64px,17vw,100px)}
 #scene-transfer{inset:auto 20px 20px;justify-content:center}
}
@media(max-height:650px){#arrival[open]{grid-template-rows:auto minmax(190px,1fr) auto auto;gap:12px}.glass-preface{margin:0 0 10px}#arrival h2{font-size:clamp(52px,11vh,95px)}#arrival-greeting{margin-top:18px}.glass-stage{padding:0}.arrival-action>span{display:none}#arrival .arrival-bottom{gap:12px}}
@media(prefers-reduced-motion:reduce){#arrival *,#arrival,#arrival::before{animation:none!important;transition:none!important}}
body[data-still=true] #arrival *,body[data-still=true] #scene-transfer i{animation:none!important;transition:none!important}