/* ============================================================================
   NOSLEEP matrix.css — the control-panel layer (2026-09-13).
   Kris: "more of a matrix type of feel, the same way the 888 Wallet Tracker looks."
   Ported from ~/wallet-scout/src/ui/style.css — same grammar (digital rain, scanlines,
   vignette, corner-bracket panels, glitch wordmark, LED rail, boot line, mono-first type),
   rebuilt on the NoSleep palette: cobalt is the phosphor, mint is the exchange, coral is down.
   Loads last. Everything here degrades to nothing under prefers-reduced-motion.
   ============================================================================ */

/* ── mono-first type ───────────────────────────────────────────────────────── */
body,.lede,.sub,.sec-sub,p,li,td,th,input,button,select{font-family:var(--mono)}
body{font-size:13.5px;line-height:1.5;letter-spacing:.01em}
.lede,.sub,.sec-sub{font-size:14px;line-height:1.65;letter-spacing:.005em}
h1,h2,h3,.h-xl,.h-l,.h-m,.headline,.dk-h1,.brand,.wm,.cid-tk{font-family:var(--disp);font-weight:800;letter-spacing:-.01em}
h1.headline,.h-l{letter-spacing:-.015em;line-height:1.04}
.num,.mono,.tbl .num,.kpi .v,.row .px,.row .chg{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── atmosphere ────────────────────────────────────────────────────────────── */
#rain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.34}
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.26) 2px 3px);mix-blend-mode:multiply}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,rgba(0,0,0,0) 52%,rgba(0,0,0,.6) 100%)}
body>.ribbon,.top,.calaunch,main,.wrap,footer,.statusbar,section,.fw-wrap{position:relative;z-index:2}

/* ── corner-bracket panels: the single strongest tell of the look ──────────── */
.panel,.card,.board,.u5,.tier,.rcp,.deskft,.why .r5,.acc details,.fact,.fs,.kpi,.tk-stats,.fw-node,.clo,.tw{position:relative}
.panel::before,.panel::after,.board::before,.board::after,.card::before,.card::after,
.u5::before,.u5::after,.tier::before,.tier::after,.fw-node::before,.fw-node::after,
.kpi::before,.kpi::after,.deskft::before,.deskft::after,.clo::before,.clo::after{
  content:"";position:absolute;width:10px;height:10px;pointer-events:none;z-index:1}
.panel::before,.board::before,.card::before,.u5::before,.tier::before,.fw-node::before,.kpi::before,.deskft::before,.clo::before{
  top:-1px;left:-1px;border-top:1px solid var(--blue);border-left:1px solid var(--blue)}
.panel::after,.board::after,.card::after,.u5::after,.tier::after,.fw-node::after,.kpi::after,.deskft::after,.clo::after{
  bottom:-1px;right:-1px;border-bottom:1px solid var(--blue);border-right:1px solid var(--blue)}
.panel:hover,.card:hover,.u5:hover,.fw-node:hover{box-shadow:inset 0 0 26px rgba(79,124,255,.05),0 0 0 1px rgba(79,124,255,.10)}

/* ── the wordmark: glitch on load, like the tracker ────────────────────────── */
.brand{position:relative;letter-spacing:.02em}
.brand.glitch::before,.brand.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:.85;pointer-events:none}
.brand.glitch::before{color:var(--up);animation:gl1 1.1s steps(2,end) 2;clip-path:inset(0 0 60% 0)}
.brand.glitch::after{color:var(--down);animation:gl2 1.1s steps(2,end) 2;clip-path:inset(55% 0 0 0)}
@keyframes gl1{0%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,0)}80%{transform:translate(3px,1px)}100%{transform:translate(0)}}
@keyframes gl2{0%{transform:translate(0)}25%{transform:translate(3px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,0)}100%{transform:translate(0)}}
.brand.flicker{animation:flick 1.4s linear 1}
@keyframes flick{0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}20%,24%,55%{opacity:.4}}

/* ── LED status rail + boot line ───────────────────────────────────────────── */
.leds{display:flex;gap:14px;align-items:center;font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1a2231;border:1px solid #2a3447;margin-right:5px;vertical-align:middle}
.led.on{background:var(--up);border-color:var(--up);box-shadow:0 0 8px var(--up)}
.led.warn{background:var(--warn);border-color:var(--warn);box-shadow:0 0 8px var(--warn)}
.led.off{background:var(--down);border-color:var(--down);box-shadow:0 0 8px var(--down)}
.boot{font:400 11.5px/1.5 var(--mono);color:var(--t2);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:9px 0 0;min-height:20px}
.boot .prompt{color:var(--blue)}
.cursor{display:inline-block;color:var(--blue);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── uppercase micro-labels + scan shimmer on progress ─────────────────────── */
.eyebrow,.kpi .k,.tbl th,.panel-h,.statusbar,.sec-h .ey,.u5 .k,.fw-node .n,.row.head,.wl-h,.tape-h,.dk-row.dk-head{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em}
.clo-track,.tbar,.gauge{position:relative;overflow:hidden}
.clo-track::after{content:"";position:absolute;top:0;bottom:0;width:70px;left:-80px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:scan 3.2s linear infinite}
@keyframes scan{to{left:110%}}

/* ── buttons read as console keys ──────────────────────────────────────────── */
.btn,.cta,.dk-btn,.tk-go,.btn.go,.copy,.calaunch .ca-cp,.seg button,.vtog button,.tbar .chip,.nav .tabs a,.top nav a{
  font-family:var(--mono);letter-spacing:.06em}
.cta,.btn-primary,.calaunch .ca-cp,.top nav .nav-cta{text-transform:uppercase;font-size:12px;letter-spacing:.12em;border-radius:2px}
.btn,.dk-btn,.copy,.seg,.vtog,.chip,.pill,.input,.fld .box,.tk-fld .box,.presets .btn,.quick button{border-radius:2px}
.panel,.card,.board,.u5,.tier,.fw-node,.kpi,.deskft,.tk-stats,.ticket,.float,.clo{border-radius:0}
.cta:hover,.btn-primary:hover{box-shadow:0 0 18px rgba(79,124,255,.35)}

/* the hero's candle canvas competes with the rain; one atmosphere at a time */
#bgCanvas{display:none}

/* ── the hero becomes a console frame ──────────────────────────────────────── */
.hero{border-bottom:1px solid var(--line-2);background:transparent}
.hero::before,.hero::after{display:none}
.hero .state-pill{border-radius:2px;font-family:var(--mono);letter-spacing:.16em}
h1.headline{text-transform:uppercase}
.hero .sub{color:var(--t2)}

@media (prefers-reduced-motion:reduce){
  #rain{opacity:.08}
  .brand.glitch::before,.brand.glitch::after,.brand.flicker,.cursor,.clo-track::after,.tbar::after{animation:none!important}
}

/* ── chrome sits ON the field, not in it ───────────────────────────────────── */
body>.ribbon{background:var(--blue)}
.top{background:rgba(7,10,18,.94);backdrop-filter:blur(10px)}
.calaunch{background:rgba(10,14,26,.94);backdrop-filter:blur(10px)}
.statusbar{background:rgba(7,10,18,.94);backdrop-filter:blur(10px)}
/* a soft well behind the hero copy so the rain never fights the sentence */
.hero .hero-in{position:relative}
.hero .hero-in::before{content:"";position:absolute;inset:-40px -60px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 50%,rgba(7,10,18,.88),rgba(7,10,18,.55) 60%,transparent 80%)}
/* below the fold the field fades out so the data panels stay the loudest thing */
#rain{-webkit-mask:linear-gradient(180deg,#000 0,#000 62vh,rgba(0,0,0,.25) 100vh);
      mask:linear-gradient(180deg,#000 0,#000 62vh,rgba(0,0,0,.25) 100vh)}

/* ── scroll reveal: the page assembles itself as you descend ───────────────── */
html.rv [data-rv]{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
html.rv [data-rv].in{opacity:1;transform:none}
/* stagger children of a revealed group */
html.rv [data-rv-group]>*{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.rv [data-rv-group].in>*{opacity:1;transform:none}
html.rv [data-rv-group].in>*:nth-child(1){transition-delay:.02s}
html.rv [data-rv-group].in>*:nth-child(2){transition-delay:.09s}
html.rv [data-rv-group].in>*:nth-child(3){transition-delay:.16s}
html.rv [data-rv-group].in>*:nth-child(4){transition-delay:.23s}
html.rv [data-rv-group].in>*:nth-child(5){transition-delay:.30s}
html.rv [data-rv-group].in>*:nth-child(6){transition-delay:.37s}
/* corner brackets draw themselves in */
html.rv [data-rv]::before,html.rv [data-rv]::after,html.rv [data-rv-group]::before,html.rv [data-rv-group]::after{
  opacity:0;transition:opacity .5s var(--ease) .18s}
html.rv [data-rv].in::before,html.rv [data-rv].in::after,html.rv [data-rv-group].in::before,html.rv [data-rv-group].in::after{opacity:1}
/* a hairline that draws left-to-right under each section head */
.sec-h{position:relative}
html.rv .sec-h::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:1px;background:var(--line-2);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease) .1s}
[data-rv].in .sec-h::after,.sec-h[data-rv].in::after{transform:scaleX(1)}
/* the decoding eyebrow: mid-scramble it glows like the rain */
.decoding{color:var(--up)!important}
@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv-group]>*{opacity:1!important;transform:none!important;transition:none!important}
  [data-rv]::before,[data-rv]::after,[data-rv-group]::before,[data-rv-group]::after{opacity:1!important}
  .sec-h::after{transform:scaleX(1)!important}
}