:root{color-scheme:dark;--night:#061419;--deep:#12343b;--glow:#56c9bb;--mist:#b9dcd5;--ivory:#f0eee7;font-family:Arial,Helvetica,sans-serif;color:var(--ivory);background:var(--night)}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:1px solid var(--mist);outline-offset:7px}button:hover{color:white}#scene{position:relative;min-height:620px;height:100svh;isolation:isolate;overflow:hidden;background:var(--night)}.landscape,#water,.shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.landscape,#water{filter:brightness(1.08) contrast(1.04)}.landscape{background:url('./assets/lake-framed.webp') center center/cover no-repeat;z-index:-3}#water{z-index:-2;opacity:0;transition:opacity 1.5s}#water.ready{opacity:1}.shade{z-index:-1;background:linear-gradient(180deg,rgba(2,10,14,.2),transparent 30%,rgba(2,10,14,.12) 58%,rgba(2,10,14,.55)),radial-gradient(ellipse at center,transparent 25%,rgba(2,10,14,.18))}header{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:34px 44px;gap:20px}.wordmark{font-size:12px;letter-spacing:.48em}#motion{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:0;border-radius:4px;background:transparent;padding:12px;color:var(--mist)}#motion:hover{color:var(--ivory)}#motion svg{display:block}#motion .motion-play{display:none}#motion[data-paused="true"] .motion-pause{display:none}#motion[data-paused="true"] .motion-play{display:block}#motion:focus-visible{outline:2px solid #80d5c9;outline-offset:4px}.title{position:absolute;top:37%;left:50%;width:90%;transform:translate(-50%,-15%);text-align:center;pointer-events:none;transition:opacity 2s,transform 2s}.eyebrow{font-size:12px;font-weight:400;letter-spacing:.3em;color:var(--mist);margin:0 0 20px}h1{font:400 clamp(72px,9vw,145px)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin:0;text-shadow:0 2px 35px #06141980}.subtitle{font-size:12px;letter-spacing:.34em;margin:25px 0 0;text-transform:uppercase;color:var(--mist)}.light{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:52px;height:52px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}.light span{position:relative;display:block;width:4px;height:4px;border-radius:50%;background:#e4fffb;box-shadow:0 0 8px 3px #7fe2d8b3,0 0 25px 8px #56c9bb33;animation:breathe 5s ease-in-out var(--delay) infinite;transition:box-shadow .5s,transform .5s}.light span:after{content:'';display:block;position:absolute;width:2px;height:16px;left:50%;top:9px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(#92e9de70,transparent);filter:blur(1px)}.light:hover span,.light:focus-visible span,.light.selected span{transform:scale(1.5);box-shadow:0 0 13px 5px #b9dcd5,0 0 35px 13px #56c9bb44}.light.selected:after{content:'';position:absolute;inset:8px;border-radius:50%;border:1px solid #b9dcd555}footer{position:absolute;bottom:35px;left:20%;width:60%;text-align:center;pointer-events:none}footer p{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mist);line-height:1.7;margin:0 0 20px}.footer-line,.fine-line{display:block;width:24px;height:1px;background:#b9dcd580;margin:auto}.entrance{position:absolute;top:59%;left:50%;transform:translateX(-50%);text-align:center;animation:appear 2s ease both}.entrance[hidden]{display:none}.fine-line{height:30px;width:1px;margin-bottom:20px}#enter{border:1px solid #b9dcd54d;background:#06141966;backdrop-filter:blur(12px);border-radius:2px;min-width:130px;padding:15px 22px;font-size:14px;letter-spacing:.12em}#enter span{margin-left:20px;color:var(--mist)}.revealed .title{transform:translate(-50%,-30%)}.revealed .light{opacity:.35;transition:opacity 2s}dialog{color:var(--ivory);background:#091c22cc;backdrop-filter:blur(22px);border:1px solid #b9dcd529;border-radius:8px;width:min(440px,calc(100% - 40px));max-height:calc(100svh - 40px);overflow-y:auto;padding:40px 36px;box-shadow:0 24px 80px #0004;text-align:center}dialog::backdrop{background:#020c11b3;backdrop-filter:blur(10px)}dialog h2{font:400 clamp(30px,6vw,40px)/1.2 Georgia,serif;letter-spacing:normal;margin:16px 0;overflow-wrap:anywhere}dialog p{font-size:16px;color:var(--mist);line-height:1.6}dialog .eyebrow{font-size:12px;letter-spacing:.28em;margin:12px 0}.login-emblem{display:block;width:72px;height:72px;margin:0 auto 32px}.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:30px;min-width:44px;min-height:44px}.sign-in-placeholder{display:flex;align-items:center;justify-content:center;gap:12px;padding:17px 10px;margin-top:28px;border:1px solid #b9dcd52b;color:var(--mist);font-size:14px}.microsoft-mark{font-size:24px}.disclosure{font-size:13px!important;margin:14px 0 26px}.return{display:block;margin:28px auto 0;min-height:44px;border:0;padding:10px 0;background:none;color:var(--mist);font-size:14px;text-decoration:underline;text-underline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{position:absolute;bottom:100px;width:100%;text-align:center;padding:20px;background:var(--night)}.paused .light span{animation:none}.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important}.paused .entrance{animation:none!important}@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}@keyframes appear{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:600px){header{padding:20px 23px}.wordmark{letter-spacing:.32em;font-size:12px}#scene{min-height:560px}.title{top:37%}h1{font-size:clamp(64px,16vw,96px)}.eyebrow{font-size:12px;letter-spacing:.23em}.subtitle{font-size:12px;letter-spacing:.18em;line-height:1.8;margin-top:20px}footer{bottom:28px;left:10%;width:80%}footer p{letter-spacing:.2em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Entrance: the lights settle first; the doorway resolves through a soft veil. */
.revealed .light span{animation:none;box-shadow:0 0 7px 2px #7fe2d855;transform:scale(.8);transition:box-shadow 2.5s,transform 2.5s}
.revealed .light.selected:after{opacity:0;transition:opacity 2s}
.entrance{animation:doorway-emerge 3.8s ease both}
.entrance .fine-line{animation:line-emerge 3.2s ease both;transform-origin:top}
.entrance #enter{transition:background .5s,border-color .5s,box-shadow .5s}
.entrance #enter:hover,.entrance #enter:focus-visible{background:#12343baa;border-color:#b9dcd599;box-shadow:0 0 35px #56c9bb18}
.revealed footer p{animation:quiet-caption 3s ease both}
.entrance:focus-within{animation:none;opacity:1;filter:none}
@keyframes doorway-emerge{0%{opacity:0;filter:blur(12px);translate:0 10px}25%{opacity:0;filter:blur(9px)}65%{opacity:.55}100%{opacity:1;filter:blur(0);translate:0 0}}
@keyframes line-emerge{0%,25%{opacity:0;transform:scaleY(.1)}100%{opacity:1;transform:scaleY(1)}}
@keyframes quiet-caption{0%,25%{opacity:0}100%{opacity:1}}
.paused .entrance,.paused .entrance .fine-line,.paused.revealed footer p{animation:none!important;filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.entrance,.entrance .fine-line,.revealed footer p{animation:none!important;filter:none;opacity:1}.revealed .light span,.revealed .light.selected:after{transition:none}}

/* Approved ABSO emblem, rendered as scalable paths with transparent negative space. */
.title{top:26%;transform:translate(-50%,0)}
.title .brand{margin:0;line-height:1;font-size:inherit;letter-spacing:normal}
.emblem{display:block;width:clamp(74px,12svh,104px);height:auto;margin:0 auto;filter:drop-shadow(0 0 12px #56c9bb18);pointer-events:auto;transition:filter 1.8s ease}
.emblem:hover{filter:drop-shadow(0 0 16px #56c9bb66)}
.title .subtitle{margin-top:24px}
.revealed .title{transform:translate(-50%,-8px)}
@media(max-width:600px){.title{top:27%}.emblem{width:clamp(74px,11.5svh,92.5px)}}
@media(prefers-reduced-motion:reduce){.emblem{transition:none}}

/* A restrained response to pointer proximity; never a login control. */
.emblem{transform:translate(var(--logo-x,0px),var(--logo-y,0px));transition:transform .7s ease-out,filter 1s ease}
.emblem.logo-lit{filter:drop-shadow(0 0 5px #b9dcd580) drop-shadow(0 0 20px #56c9bb99)}
.paused .emblem{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.emblem{transform:none;transition:none}}

/* Arrival runs on the heading wrappers, leaving emblem hover transforms intact. */
.arrival-wait .brand,.arrival-wait .subtitle{opacity:0}
.arrival-ready .brand{animation:arrival-fade 1.6s ease-out .2s both}
.arrival-ready .subtitle{animation:arrival-fade 1.5s ease-out .5s both}
@keyframes arrival-fade{from{opacity:0}to{opacity:1}}
.paused .brand,.paused .subtitle{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){.arrival-wait .brand,.arrival-wait .subtitle,.arrival-ready .brand,.arrival-ready .subtitle{animation:none!important;opacity:1}}


.hub-sign-in{display:block;padding:15px 18px;margin-top:28px;border:1px solid #b9dcd570;background:#163b43;color:var(--ivory);font-size:16px;text-decoration:none;border-radius:4px}.hub-sign-in:hover{background:#204b52}.hub-sign-in:focus-visible,dialog button:focus-visible{outline:2px solid #80d5c9;outline-offset:4px}.hub-sign-in span{float:right;margin-left:12px}

@media(max-width:420px){dialog{padding:30px 24px}}

/* A complete, compact scene on short landscape screens. */
@media (orientation:landscape) and (max-height:500px){
 #scene{min-height:320px;height:100svh}
 header{padding:10px 24px}
 .title{top:17%}
 .emblem{width:clamp(48px,14svh,68px)}
 .title .subtitle{margin-top:12px;font-size:12px;letter-spacing:.2em}
 .entrance{top:47%}
 .entrance .fine-line{height:12px;margin-bottom:10px}
 #enter{padding:11px 18px}
 .light{top:calc(var(--y) + 3%)}
 footer{bottom:10px}footer p{margin-bottom:8px;font-size:12px}
}

/* Framed Nordic Nocturne: low water viewpoint and a compact field of emitters. */
:root{--deep:#16313f;--glow:#77bfcb;--mist:#c3dce5;--ivory:#e3f0ef}
.landscape,#water{filter:none}
.shade{background:linear-gradient(180deg,#020a0e18,transparent 45%,#020a0e35)}
.title{top:24%}
.emblem{width:clamp(64px,10svh,90px)}
.title .subtitle{margin-top:18px;text-transform:none;letter-spacing:.3em}
.light span{width:3px;height:3px;background:#f3fafb;box-shadow:0 0 5px 2px #e3f0efbb,0 0 16px 6px #77bfcb44}
.light span:after{top:7px;height:22px;width:3px;background:repeating-linear-gradient(180deg,#c3dce588 0 2px,transparent 2px 5px);filter:blur(.5px);transform:translateX(-50%) scaleX(.8)}
.light:before{content:'';position:absolute;width:clamp(65px,10vw,160px);height:18px;top:30px;left:50%;transform:translateX(-50%);border:1px solid #a6d8e52e;border-radius:50%;box-shadow:0 0 0 8px #a6d8e507;pointer-events:none}
.light.selected:after{inset:17px 5px;border-color:#b9dce566}
.light:hover span,.light:focus-visible span,.light.selected span{box-shadow:0 0 8px 3px #e3f0efbb,0 0 24px 8px #77bfcb55}
@media(max-width:600px){.title{top:25%}.light{left:calc(50% + (var(--x) - 50%)*1.7)}.emblem{width:74px}}
@media(orientation:landscape) and (max-height:500px){.title{top:16%}.emblem{width:48px}.title .subtitle{margin-top:10px}.light{top:var(--y)}}