/* ==========================================================================
   Home page — hero, terminal window, HUD, about, boot overlay
   ========================================================================== */


/* ---- boot overlay (only ever shown to first-time, JS-enabled humans) ---- */
.boot{
  display:none;position:fixed;inset:0;z-index:300;padding:clamp(18px,4vw,56px);
  background:rgb(var(--bg));overflow:hidden;cursor:pointer;transition:opacity .6s ease;
}
.js:not(.booted) .boot,.boot.out{display:block}
.boot.out{opacity:0;pointer-events:none}
.js:not(.booted) body{overflow:hidden}
.boot-log{margin:0;font:400 13px/1.7 var(--mono);color:rgb(var(--fg));white-space:pre-wrap}
.boot-log .ok{color:rgb(var(--acc))}
.boot-log .wr{color:rgb(var(--warn))}
.boot-log .hd{color:rgb(var(--hi));font-weight:700}
.boot-log .dm{color:rgb(var(--dim))}
.boot-skip{position:absolute;right:clamp(18px,4vw,56px);bottom:clamp(18px,4vw,40px);font-size:12px;color:rgb(var(--dim))}
.boot-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:rgb(var(--acc));box-shadow:0 0 12px rgb(var(--acc));transition:width .3s linear}

/* ---- hero ----------------------------------------------------------------- */
.hero{padding:clamp(40px,9vh,92px) 0 clamp(26px,5vh,48px)}

h1{margin:0;font:600 clamp(46px,9.4vw,108px)/.98 var(--sans);letter-spacing:-.04em}
.glitch{
  position:relative;display:inline-block;
  background:linear-gradient(178deg,rgb(var(--hi)) 34%,rgb(var(--acc) / .9) 130%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 26px rgb(var(--acc) / .22));
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;
  -webkit-text-fill-color:currentcolor;background:none;
}
.glitch::before{color:rgb(var(--acc2))}
.glitch::after{color:rgb(var(--err))}
.glitch:hover::before{opacity:.85;animation:gl1 .55s steps(2,end) infinite}
.glitch:hover::after{opacity:.7;animation:gl2 .55s steps(2,end) infinite reverse}
@keyframes gl1{0%{transform:translate(-3px,1px);clip-path:inset(12% 0 62% 0)}50%{transform:translate(3px,-1px);clip-path:inset(58% 0 12% 0)}100%{transform:translate(-2px,0);clip-path:inset(30% 0 40% 0)}}
@keyframes gl2{0%{transform:translate(3px,-1px);clip-path:inset(60% 0 8% 0)}50%{transform:translate(-3px,1px);clip-path:inset(10% 0 66% 0)}100%{transform:translate(2px,0);clip-path:inset(38% 0 32% 0)}}

.lede{max-width:60ch;margin-top:26px;font:400 clamp(16px,1.9vw,19px)/1.65 var(--sans);color:rgb(var(--fg))}
.lede strong{color:rgb(var(--hi));font-weight:600}
.lede code{padding:2px 7px;border-radius:6px;font:400 .86em var(--mono);color:rgb(var(--acc));background:rgb(var(--acc) / .09);border:1px solid rgb(var(--acc) / .18)}
.status-line{margin-top:16px;min-height:1.7em;font-size:14px;color:rgb(var(--dim))}
.status-line .k{color:rgb(var(--acc))}
.status-line .tw::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:3px;vertical-align:-.16em;background:rgb(var(--acc));animation:blink 1.1s steps(1) infinite}


/* ---- terminal + HUD grid --------------------------------------------------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:stretch;padding-bottom:40px}

.win-hint{font-size:11px;color:rgb(var(--dim));white-space:nowrap}
.win-hint kbd{padding:1px 6px;border-radius:5px;border:1px solid rgb(var(--acc) / .3);font:inherit;color:rgb(var(--acc))}

.term{
  position:relative;flex:1 1 0;min-height:clamp(380px,54vh,540px);overflow-y:auto;overflow-x:hidden;padding:16px 18px 18px;
  font-size:13.5px;line-height:1.62;cursor:text;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgb(var(--acc) / .35) transparent;
}
.term::-webkit-scrollbar{width:8px}
.term::-webkit-scrollbar-thumb{background:rgb(var(--acc) / .3);border-radius:8px}
.ln{white-space:pre-wrap;word-break:break-word;min-height:1.62em}
.ln a{text-decoration:underline;text-decoration-color:rgb(var(--acc) / .4);text-underline-offset:3px}
.ln a:hover{text-decoration-color:rgb(var(--acc))}
.ps1{color:rgb(var(--acc));font-weight:700}
.cwd{color:rgb(var(--acc2))}
.o-hi{color:rgb(var(--hi))}
.o-dim{color:rgb(var(--dim))}
.o-acc{color:rgb(var(--acc))}
.o-acc2{color:rgb(var(--acc2))}
.o-ok{color:rgb(var(--acc))}
.o-warn{color:rgb(var(--warn))}
.o-err{color:rgb(var(--err))}
.o-b{font-weight:700}
.o-big{font-size:1.35em;font-weight:700;letter-spacing:.06em}
.o-dir{color:rgb(var(--acc2));font-weight:500}

.measure{position:absolute;left:0;top:0;height:0;overflow:hidden;visibility:hidden;white-space:pre;pointer-events:none}
.nf{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 32px;margin:6px 0 4px}
.nf-logo{flex:none;display:block;width:132px;height:auto;margin-top:5px;overflow:visible;fill:rgb(var(--acc));filter:drop-shadow(0 0 7px rgb(var(--acc) / .55))}
.nf-logo rect{animation:pxin .55s ease both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes pxin{from{opacity:0}45%{opacity:1}60%{opacity:.3}to{opacity:1}}
.blk{display:inline-block;width:2.6ch;height:1em;margin-right:.2ch;vertical-align:-.12em;background:currentColor}
.nf-info{min-width:0}
.term-fallback{color:rgb(var(--dim))}
.js .term-fallback{display:none}
html:not(.js) #prompt,html:not(.js) .cmdbar{display:none}

#prompt{position:relative;margin:0;display:block}
.cmd-line{white-space:pre-wrap;word-break:break-all;color:rgb(var(--hi))}
.caret{background:rgb(var(--acc));color:rgb(var(--bg));animation:blink 1.1s steps(1) infinite}
.term:not(:focus-within) .caret{background:transparent;color:inherit;box-shadow:0 0 0 1px rgb(var(--acc));animation:none}
.term.busy .caret{opacity:0}
.term.busy #prompt{opacity:.45}
.hid-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;font-size:16px;background:transparent;color:transparent;caret-color:transparent;cursor:text;resize:none}

.cmdbar{display:flex;flex-wrap:wrap;gap:8px;padding:11px 14px;border-top:1px solid rgb(var(--acc) / .14);background:rgb(var(--bg) / .4)}
.cmdbar .lbl{align-self:center;margin-right:2px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--dim))}
.cb{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding:5px 11px;border-radius:8px;font-size:12.5px;line-height:1.4;
  color:rgb(var(--fg));background:rgb(var(--acc) / .05);border:1px solid rgb(var(--acc) / .22);
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.cb::before{content:"$ ";color:rgb(var(--acc))}
.cb:hover{background:rgb(var(--acc) / .14);border-color:rgb(var(--acc) / .6);color:rgb(var(--hi));transform:translateY(-1px)}
@media (pointer:coarse){.cb{min-height:44px;display:inline-flex;align-items:center;padding:6px 13px}.cmdbar{gap:10px}}

/* ---- HUD ------------------------------------------------------------------- */
.hud{display:grid;gap:14px;align-content:start}
.id-row{display:flex;align-items:center;gap:14px}
.ring{
  position:relative;flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  font:700 18px/1 var(--mono);color:rgb(var(--acc));letter-spacing:.02em;
  background:radial-gradient(circle at 30% 25%,rgb(var(--acc) / .2),transparent 70%);
  border:1px solid rgb(var(--acc) / .5);box-shadow:0 0 24px rgb(var(--acc) / .3),inset 0 0 18px rgb(var(--acc) / .2);
}
.ring::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgb(var(--acc) / .35);animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.id-name{font:600 17px/1.2 var(--sans);color:rgb(var(--hi))}
.id-sub{margin-top:3px;font-size:12px;color:rgb(var(--dim))}
html:not(.js) .card-tele,html:not(.js) .card-feed{display:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:14px;font-size:12.5px}
.kv dt{color:rgb(var(--dim))}
.kv dd{color:rgb(var(--fg));text-align:right}
.on{color:rgb(var(--acc))}

.meter{display:grid;grid-template-columns:34px 1fr 44px;align-items:center;gap:10px;margin-bottom:10px;font-size:12px}
.meter .lb{color:rgb(var(--dim))}
.meter .val{text-align:right;color:rgb(var(--hi));font-variant-numeric:tabular-nums}
.track{height:6px;border-radius:6px;background:rgb(var(--acc) / .1);overflow:hidden}
.fill{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,rgb(var(--acc) / .55),rgb(var(--acc)));box-shadow:0 0 12px rgb(var(--acc) / .6);transition:width 1s ease}
.spark{display:block;width:100%;height:46px;margin-top:6px}
.tele-meta{margin-top:10px;font-size:11.5px;line-height:1.65;color:rgb(var(--dim));white-space:pre-line;font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* live/demo badge in a card header */
.card-tele .card-t,.card-feed .card-t{display:flex;align-items:center}
.card-tele .card-t::before,.card-feed .card-t::before{white-space:pre}
.src{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.14em;color:rgb(var(--dim));border:1px solid rgb(var(--dim) / .45)}
.src::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid currentColor}
.src[data-state="live"]{color:rgb(var(--acc));border-color:rgb(var(--acc) / .55);background:rgb(var(--acc) / .1)}
.src[data-state="live"]::before{background:currentColor;box-shadow:0 0 8px rgb(var(--acc));animation:srcpulse 2.4s ease-in-out infinite}
@keyframes srcpulse{50%{opacity:.35}}

.feed{display:grid;gap:5px;font-size:11.5px;line-height:1.45;min-height:150px;align-content:start}
.feed li{display:flex;gap:8px;animation:feedin .5s ease both}
.feed time{color:rgb(var(--dim));flex:none;font-variant-numeric:tabular-nums}
.lv{flex:none;width:34px;font-weight:700}
.lv.ok{color:rgb(var(--acc))}.lv.info{color:rgb(var(--acc2))}.lv.warn{color:rgb(var(--warn))}.lv.err{color:rgb(var(--err))}
.feed .msg{color:rgb(var(--fg));min-width:0;overflow-wrap:anywhere}
@keyframes feedin{from{opacity:0;transform:translateY(-6px)}}

/* ---- about ------------------------------------------------------------------- */
.about{padding:clamp(28px,6vh,64px) 0 clamp(20px,4vh,40px)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.prose{display:grid;gap:16px;font:400 16px/1.75 var(--sans);color:rgb(var(--fg))}
.prose strong{color:rgb(var(--hi));font-weight:600}
.prose code{padding:2px 7px;border-radius:6px;font:400 .88em var(--mono);color:rgb(var(--acc));background:rgb(var(--acc) / .09);border:1px solid rgb(var(--acc) / .18)}
.feats{display:grid;gap:12px}
.feat{padding:16px 18px;border-radius:12px}
.feat h3{display:flex;align-items:center;gap:10px;margin-bottom:6px;font:600 15px/1.3 var(--mono);color:rgb(var(--hi))}
.feat h3 span{color:rgb(var(--acc))}
.feat p{font:400 14.5px/1.65 var(--sans);color:rgb(var(--fg))}


/* ---- easter eggs ------------------------------------------------------------- */
.panic .wrap{animation:shake .12s linear infinite}
.panic .bg-glow{background:radial-gradient(70% 60% at 50% 40%,rgb(var(--err) / .28),transparent 75%)}
@keyframes shake{25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,3px)}}

/* ---- responsive ----------------------------------------------------------------- */
@media (max-width:980px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .hud{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .about-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .win-hint{display:none}
  .term{min-height:min(58vh,460px);font-size:13px;padding:14px}
  .hud .card-feed{display:none}
}
@media (max-width:420px){
  .cmdbar .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .caret,.status-line .tw::after{animation:none}
  .ring::after{animation:none}
  .src[data-state="live"]::before{animation:none}
}