:root{
  --bg:#02040a;
  --fg:#eaf2fb;
  --dim:rgba(220,235,250,.58);
  --faint:rgba(220,235,250,.34);
  --line:rgba(160,205,255,.2);
  --accent:#9fd8ff;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"SF Pro Display","Helvetica Neue","Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg)}
body{font-family:var(--sans);font-weight:300;color:var(--fg);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
body.there{--accent:#7fe9ff}
body[data-project="warhammer"]{--accent:#e8b371}
body[data-project="starraid"]{--accent:#b5a1f3}
body[data-project="bull"]{--accent:#f08d9a}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:400}

#gl,#hud{position:fixed;inset:0;width:100%;height:100%;display:block}
#gl{z-index:0;cursor:grab}
#gl.drag{cursor:grabbing}#gl.hot{cursor:pointer}
#hud{z-index:1;pointer-events:none}
.vig{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(2,4,10,.9) 100%)}

/* chrome */
.top{position:fixed;z-index:10;left:0;right:0;top:0;display:flex;align-items:baseline;gap:22px;padding:26px 3.4vw;pointer-events:none}
.logo{pointer-events:auto;font-size:20px;letter-spacing:.22em;font-weight:300}
.sec{color:var(--faint);transition:opacity .5s}
.top,.intro,.dest,.foot{transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}

.intro{position:fixed;z-index:10;left:3.4vw;bottom:7.5vh;max-width:min(560px,86vw);pointer-events:none}
.intro .cap{color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:14px}
.intro .cap::before{content:"";width:34px;height:1px;background:var(--accent)}
.intro h1{font-size:clamp(38px,5.4vw,84px);font-weight:200;letter-spacing:-.045em;line-height:1.12}
.intro h1 span{white-space:nowrap}

.dest{position:fixed;z-index:10;right:3.4vw;top:50%;transform:translateY(-50%);width:min(268px,70vw)}
.dest h3{color:var(--faint);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.dest ol{list-style:none}
.dest button{position:relative;display:grid;grid-template-columns:30px 1fr;align-items:center;column-gap:6px;width:100%;min-height:64px;text-align:left;padding:14px 0 14px 12px;border-bottom:1px solid rgba(160,205,255,.08);transition:padding .35s,background .35s}
.dest button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--accent);transform:scaleY(0);transition:transform .35s}
.dest .n{font-style:normal;color:var(--faint);font-size:10.5px;transition:color .3s}
.dest b{font-weight:300;font-size:19px;letter-spacing:-.02em}
.dest button:hover,.dest button.on{padding-left:20px;background:linear-gradient(90deg,rgba(130,200,255,.07),transparent)}
.dest button:hover::before,.dest button.on::before{transform:none}
.dest button:hover .n,.dest button.on .n{color:var(--accent)}
.dest button:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

.foot{position:fixed;z-index:10;left:3.4vw;right:3.4vw;bottom:24px;display:flex;justify-content:flex-end;color:var(--faint);font-size:10px;pointer-events:none}
.foot .read{white-space:pre;text-align:right}
.foot .read b{color:var(--accent);font-weight:400}

/* states */
body.fly .intro,body.fly .dest,body.fly .foot,body.fly .sec{transition-duration:.3s}
body.fly .intro,body.fly .dest,body.there .intro,body.there .dest{opacity:0;pointer-events:none}
body.fly .intro,body.there .intro{transform:translateY(14px)}
body.fly .dest,body.there .dest{transform:translate(18px,-50%)}
body.fly .foot,body.there .foot{opacity:0}
body.fly .sec,body.there .sec{opacity:0}

.back{position:fixed;z-index:12;left:3.4vw;top:74px;display:flex;align-items:center;gap:10px;color:var(--dim);padding:9px 14px 9px 12px;border:1px solid var(--line);border-radius:99px;opacity:0;pointer-events:none;transition:opacity .6s .2s,color .3s,border-color .3s,background .3s}
.back em{font-style:normal;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:9px;margin-left:4px}
.back:hover{color:var(--fg);border-color:var(--accent);background:rgba(130,200,255,.06)}
body.there .back{opacity:1;pointer-events:auto}

/* panel (left of the mascot) */
.panel{position:fixed;z-index:10;left:3.4vw;top:50%;transform:translateY(-46%);width:min(520px,44vw);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;pointer-events:none;user-select:text;-webkit-user-select:text}
.panel>*{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
body.there .panel{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
body.there .panel>*{opacity:1;transform:none;filter:none}
body.there .panel>*:nth-child(1){transition-delay:.15s}body.there .panel>*:nth-child(2){transition-delay:.22s}
body.there .panel>*:nth-child(3){transition-delay:.3s}
.panel h2{font-size:clamp(44px,5.8vw,86px);font-weight:300;letter-spacing:-.035em;line-height:1.08;margin-bottom:48px;white-space:pre-line;overflow-wrap:break-word}
body[data-project="warhammer"] .panel h2{font-size:clamp(34px,3.7vw,58px);letter-spacing:-.025em;line-height:1.15}
.project-copy{font-size:clamp(15px,1.2vw,18px);line-height:1.85;color:rgba(234,242,251,.84)}
.project-copy p+p{margin-top:24px}
.links{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:48px;font-size:13px;line-height:1.7;font-weight:400}
.links a{position:relative;padding:5px 0 6px}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(.65);transform-origin:left;transition:transform .4s}
.links a:hover::after,.links a:focus-visible::after{transform:scaleX(1)}

.toast{position:fixed;z-index:20;left:50%;top:22px;transform:translate(-50%,-14px);padding:10px 18px;border:1px solid var(--line);border-radius:99px;background:rgba(6,12,24,.8);backdrop-filter:blur(10px);color:var(--dim);opacity:0;pointer-events:none;transition:.4s;font-size:10.5px}
.toast.on{opacity:1;transform:translate(-50%,0)}

.nogl{display:none;position:fixed;inset:0;z-index:99;align-items:center;justify-content:center;background:var(--bg);text-align:center;padding:30px;color:var(--dim)}
body.nogl-on .nogl{display:flex}

@media(max-width:800px){
  .dest{top:auto;bottom:calc(7vh + 150px);right:4vw;left:4vw;width:auto;transform:none}
  .dest h3{display:none}
  .dest ol{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
  .dest li{flex:0 0 auto}
  .dest button{display:block;border:1px solid var(--line);border-radius:99px;padding:9px 14px;width:auto;min-height:0}
  .dest button::before,.dest .n{display:none}
  .dest b{font-size:14px}
  .dest button:hover,.dest button.on{padding-left:14px}
  body.fly .dest,body.there .dest{transform:none}
  .intro{bottom:4vh}
  .panel{top:auto;bottom:5vh;transform:none;width:auto;right:5vw;left:5vw}
  .panel h2{font-size:clamp(34px,10vw,48px);margin-bottom:32px}
  body[data-project="warhammer"] .panel h2{font-size:clamp(28px,7.5vw,38px)}
  .project-copy{font-size:14px;line-height:1.8}
  .project-copy p+p{margin-top:20px}
  .links{margin-top:36px;font-size:13px;gap:15px 24px}
  .back{top:68px}
}
@media (prefers-reduced-motion:reduce){.panel>*,.dest button,.intro{transition:none}}