/* ============================================================
   COMING SOON — holding page
   Palette: sulfur-acid + hazard orange on green-tinted carbon.
   Deliberately not the usual indigo/violet gradient look.
   ============================================================ */

/* ---------- themes ---------- */
:root[data-theme="dark"]{
  --bg:        #0b0e0c;
  --bg-2:      #10140f;
  --panel:     rgba(20, 25, 18, .58);
  --line:      rgba(200, 250, 60, .13);
  --line-2:    rgba(200, 250, 60, .26);
  --ink:       #dde5d4;
  --ink-2:     #97a292;
  --ink-3:     #626d5f;
  --mesh:      200, 250, 60;
  --mesh-a:    .13;
  --grain:     .028;
}
:root[data-theme="black"]{
  --bg:        #000000;
  --bg-2:      #050605;
  --panel:     rgba(255, 255, 255, .028);
  --line:      rgba(200, 250, 60, .17);
  --line-2:    rgba(200, 250, 60, .34);
  --ink:       #e9f2e0;
  --ink-3:     #6b756a;
  --ink-2:     #a2ad9d;
  --mesh:      200, 250, 60;
  --mesh-a:    .17;
  --grain:     .045;
}

:root{
  --acid:   #c8fa3c;
  --acid-d: #97c221;
  --hazard: #ff6a1f;
  --crit:   #ff3f5f;
  --ok:     #57d98a;

  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;
  --gap: clamp(18px, 3.2vw, 46px);
}

*{box-sizing:border-box; margin:0; padding:0}

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:clamp(13px, .78vw, 17px);
  line-height:1.55;
  overflow-x:hidden;
  transition:background .45s ease, color .45s ease;
}

/* ============================================================
   BACKGROUND LAYERS
   ============================================================ */
#net{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 30%, var(--bg) 96%),
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%, transparent 72%, rgba(0,0,0,.6));
}
/* film grain keeps it from looking like a clean CSS demo */
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:var(--grain);
  /* real file, not a data: URI — survives a strict CSP (default-src 'self') */
  background-image:url("grain.svg");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}  60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,4%)}   100%{transform:translate(0,0)}
}
.scanline{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg,
    transparent 0 3px, rgba(0,0,0,.22) 3px 4px);
  mix-blend-mode:multiply;
}

/* ============================================================
   CUSTOM CURSOR — a targeting reticle.
   Two pieces: a dot that tracks exactly, and a reticle that
   trails slightly behind. The split is what sells it.
   ============================================================ */
.cur-ret, .cur-dot{
  position:fixed; top:0; left:0; z-index:60; pointer-events:none;
  opacity:0; transition:opacity .25s;
  will-change:transform;
}
/* visibility and cursor-hiding are separate: a finger needs the reticle shown
   but there is no native cursor to hide */
body.ret-on .cur-ret, body.ret-on .cur-dot{opacity:1}
body.cursor-none, body.cursor-none a, body.cursor-none button{cursor:none}

/* exact-tracking core dot */
.cur-dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  background:var(--acid); border-radius:50%;
  box-shadow:0 0 10px var(--acid);
}

/* trailing reticle */
.cur-ret{
  width:44px; height:44px; margin:-22px 0 0 -22px;
  transition:opacity .25s, width .28s cubic-bezier(.3,1.4,.4,1),
             height .28s cubic-bezier(.3,1.4,.4,1),
             margin .28s cubic-bezier(.3,1.4,.4,1);
}
.ret-ring{
  position:absolute; inset:6px; border-radius:50%;
  border:1px dashed var(--line-2);
  animation:retSpin 9s linear infinite;
}
@keyframes retSpin{to{transform:rotate(360deg)}}

/* four corner brackets */
.ret-b{position:absolute; width:9px; height:9px; border:1px solid var(--acid); transition:inset .2s}
.ret-b.tl{top:0;  left:0;  border-right:0; border-bottom:0}
.ret-b.tr{top:0;  right:0; border-left:0;  border-bottom:0}
.ret-b.bl{bottom:0;left:0; border-right:0; border-top:0}
.ret-b.br{bottom:0;right:0;border-left:0;  border-top:0}

/* live coordinate readout */
.ret-read{
  position:absolute; left:calc(100% + 8px); top:calc(50% - 6px);
  font-size:9px; letter-spacing:.14em; color:var(--acid-d);
  white-space:nowrap; opacity:.85;
}
/* near the right edge it would run off screen, so it swaps sides */
.cur-ret.flip .ret-read{left:auto; right:calc(100% + 8px)}

/* over something clickable: reticle opens up and goes hazard orange */
.cur-ret.hot{width:64px; height:64px; margin:-32px 0 0 -32px}
.cur-ret.hot .ret-b{border-color:var(--hazard); width:12px; height:12px}
.cur-ret.hot .ret-ring{border-color:rgba(255,106,31,.5); animation-duration:2.6s}
.cur-ret.hot .ret-read{color:var(--hazard)}

/* pressed: snap inwards */
.cur-ret.down{width:30px; height:30px; margin:-15px 0 0 -15px}
.cur-ret.down .ret-ring{border-style:solid; border-color:var(--acid)}

/* ---------- touch ----------
   Sized to read *around* a fingertip, which covers roughly 44px. The reticle
   is hollow, so the brackets and ring stay visible with a thumb in the middle. */
body.touch .cur-ret{width:78px; height:78px; margin:-39px 0 0 -39px}
body.touch .cur-ret .ret-b{width:15px; height:15px}
body.touch .cur-ret .ret-ring{inset:12px}
body.touch .cur-dot{width:7px; height:7px; margin:-3.5px 0 0 -3.5px}
body.touch .ret-read{left:calc(100% + 10px); font-size:11px; opacity:1}
body.touch .cur-ret.flip .ret-read{left:auto; right:calc(100% + 10px)}
/* press feedback still reads at finger scale */
body.touch .cur-ret.down{width:54px; height:54px; margin:-27px 0 0 -27px}
body.touch .cur-ret.down .ret-ring{border-style:solid; border-color:var(--acid)}

/* HUD corner brackets */
.frame{position:fixed; inset:clamp(10px,1.4vw,22px); z-index:4; pointer-events:none}
.frame .c{position:absolute; width:clamp(14px,1.5vw,26px); height:clamp(14px,1.5vw,26px)}
.frame .tl{top:0;left:0;    border-top:1px solid var(--line-2); border-left:1px solid var(--line-2)}
.frame .tr{top:0;right:0;   border-top:1px solid var(--line-2); border-right:1px solid var(--line-2)}
.frame .bl{bottom:0;left:0; border-bottom:1px solid var(--line-2); border-left:1px solid var(--line-2)}
.frame .br{bottom:0;right:0;border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2)}

/* ============================================================
   SHELL
   ============================================================ */
.shell{
  position:relative; z-index:5;
  width:min(1560px, 100%);
  margin-inline:auto;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:clamp(18px,2.4vw,40px) var(--gap) clamp(16px,2vw,28px);
}

/* ---------- header ---------- */
.bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-bottom:clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--line);
}
.mark{display:flex; align-items:center; gap:11px; color:var(--acid)}
.mark-txt{
  color:var(--ink-3); font-size:.63rem; letter-spacing:.28em;
}

.bar-right{display:flex; align-items:center; gap:clamp(12px,1.6vw,26px)}
.uplink{
  display:flex; align-items:center; gap:8px;
  font-size:.63rem; letter-spacing:.19em; color:var(--ink-3);
}
.led{
  width:6px; height:6px; background:var(--acid); border-radius:50%;
  box-shadow:0 0 9px var(--acid); animation:blip 2.6s infinite;
}
@keyframes blip{0%,88%,100%{opacity:1} 92%{opacity:.15} 96%{opacity:.9}}

/* segmented dark / black switch */
.themeswitch{
  position:relative; display:flex;
  border:1px solid var(--line-2); background:rgba(0,0,0,.25);
}
.ts-btn{
  position:relative; z-index:2;
  background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.19em;
  color:var(--ink-3); padding:7px clamp(9px,1vw,15px);
  transition:color .3s;
}
.ts-btn[aria-pressed="true"]{color:#0b0e0c}
.ts-thumb{
  position:absolute; z-index:1; top:0; bottom:0; left:0; width:50%;
  background:var(--acid);
  transition:transform .32s cubic-bezier(.5,0,.2,1);
}
:root[data-theme="black"] .ts-thumb{transform:translateX(100%)}

/* ============================================================
   STAGE
   ============================================================ */
.stage{
  flex:1; display:flex; gap:clamp(16px,2.4vw,42px);
  align-items:center;
  padding:clamp(22px,3.6vh,64px) 0;
}

/* left vertical rail */
.rail{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.6rem; letter-spacing:.34em; color:var(--ink-3);
  padding-top:6px;
}
.rail-line{flex:1; width:1px; background:linear-gradient(var(--line-2), transparent); min-height:60px}
.rail-num{color:var(--acid-d); letter-spacing:.2em}

.core{flex:1; min-width:0; max-width:min(1000px, 100%)}

.statusline{
  display:flex; align-items:center; gap:10px;
  font-size:.63rem; letter-spacing:.24em; color:var(--acid);
  margin-bottom:clamp(14px,2vw,24px);
}
.sq{width:7px; height:7px; background:var(--acid); animation:blip 1.9s infinite}
.dotlead{
  flex:1; height:1px; min-width:20px;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 6px);
}
.mute{color:var(--ink-3)}

/* headline */
/* scales with width AND height, so a short landscape screen doesn't get a
   headline that shoves everything else off the bottom */
.title{
  font-size:clamp(2.9rem, min(12.5vw, 21vh), 11rem);
  line-height:.86; letter-spacing:-.045em; font-weight:700;
  margin-bottom:clamp(16px,2.2vw,30px);
}
.t-line{display:block; position:relative}
.t-line.accent{color:var(--acid)}
/* chromatic-split glitch, fires occasionally */
.t-line::before, .t-line::after{
  content:attr(data-txt); position:absolute; inset:0;
  clip-path:inset(0 0 55% 0); pointer-events:none; opacity:0;
}
.t-line::before{color:var(--hazard); transform:translateX(-3px)}
.t-line::after {color:var(--crit);   transform:translateX(3px); clip-path:inset(58% 0 0 0)}
.t-line.glitch::before, .t-line.glitch::after{
  opacity:.85; animation:glitchJog .28s steps(3) 1;
}
@keyframes glitchJog{
  0%{transform:translateX(-7px)} 50%{transform:translateX(6px)} 100%{transform:translateX(0)}
}
.cursor{
  display:inline-block; width:.075em; min-width:3px; height:.72em;
  background:var(--acid); margin-left:.12em; vertical-align:baseline;
  animation:caret 1.05s steps(2) infinite;
}
@keyframes caret{0%,50%{opacity:1} 51%,100%{opacity:0}}

.lede{
  max-width:62ch; color:var(--ink-2);
  font-size:clamp(.82rem, .95vw, 1.02rem); line-height:1.75;
  margin-bottom:clamp(24px,3vw,40px);
}
.lede em{color:var(--acid); font-style:normal}

/* readouts */
.readouts{
  display:flex; flex-wrap:wrap; gap:clamp(14px,2.4vw,40px);
  padding:clamp(12px,1.4vw,18px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:clamp(20px,2.6vw,32px);
}
.ro{display:flex; flex-direction:column; gap:4px}
.ro-k{font-size:.58rem; letter-spacing:.24em; color:var(--ink-3)}
.ro-v{font-size:clamp(.85rem,1.05vw,1.1rem); color:var(--ink); letter-spacing:.06em}
.ro-v.crit{color:var(--hazard)}

/* terminal */
.term{border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(3px)}
.term-head{
  display:flex; align-items:center; gap:9px;
  padding:8px clamp(10px,1.1vw,15px);
  border-bottom:1px solid var(--line);
  font-size:.6rem; letter-spacing:.16em; color:var(--ink-3);
}
.th-dot{width:6px; height:6px; background:var(--hazard); border-radius:50%}
.th-right{margin-left:auto; color:var(--ink-3)}
.term-body{
  padding:clamp(10px,1.2vw,16px);
  height:clamp(92px, 12.5vh, 150px); overflow:hidden;
  font-size:clamp(.66rem,.76vw,.82rem); line-height:1.85;
  color:var(--ink-2); white-space:pre-wrap; word-break:break-word;
}
.term-body .ln{display:block; animation:lnIn .22s ease both}
.term-body .ok{color:var(--acid)}
.term-body .warn{color:var(--hazard)}
.term-body .bad{color:var(--crit)}
.term-body .dim{color:var(--ink-3)}
@keyframes lnIn{from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none}}

/* ============================================================
   MODULE GRID
   ============================================================ */
.mods{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.mod{
  background:var(--bg); padding:clamp(15px,1.6vw,24px);
  display:flex; flex-direction:column; gap:9px;
  transition:background .3s;
  position:relative; overflow:hidden;
}
.mod::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--acid); transition:width .45s ease;
}
.mod:hover{background:var(--bg-2)}
.mod:hover::after{width:100%}
.mod header{display:flex; align-items:baseline; gap:9px}
.mod-id{font-size:.6rem; color:var(--ink-3); letter-spacing:.18em}
.mod h2{font-size:clamp(.76rem,.9vw,.95rem); letter-spacing:.16em; font-weight:600; color:var(--ink)}
.mod p{font-size:clamp(.66rem,.76vw,.82rem); color:var(--ink-3); line-height:1.7; flex:1}
.mod footer{display:flex; align-items:center; gap:7px; font-size:.58rem; letter-spacing:.2em}
.st{width:5px; height:5px; border-radius:50%}
.mod[data-state="online"]  footer{color:var(--acid)}
.mod[data-state="online"]  .st{background:var(--acid); box-shadow:0 0 8px var(--acid)}
.mod[data-state="staging"] footer{color:var(--hazard)}
.mod[data-state="staging"] .st{background:var(--hazard); box-shadow:0 0 8px var(--hazard); animation:blip 1.7s infinite}
.mod[data-state="pending"] footer{color:var(--ink-3)}
.mod[data-state="pending"] .st{background:var(--ink-3)}

/* ---------- footer ---------- */
.foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap;
  margin-top:clamp(14px,1.8vw,24px); padding-top:clamp(12px,1.4vw,18px);
  border-top:1px solid var(--line);
  font-size:.57rem; letter-spacing:.2em; color:var(--ink-3);
}
.f-c{color:var(--acid-d)}

/* ============================================================
   RESPONSIVE — phone → portrait monitor → 77" panel
   ============================================================ */

/* hide the vertical rail when there isn't room for it */
@media (max-width: 860px){
  .rail{display:none}
  .stage{padding:clamp(26px,4vh,50px) 0}
  .foot{justify-content:center; text-align:center}
  .f-r{display:none}
}

@media (max-width: 560px){
  .bar{gap:12px}
  .bar-right{width:100%; justify-content:space-between}
  .mark-txt{display:none}
  .title{font-size:clamp(2.6rem, 17vw, 5rem)}
  .readouts{gap:16px}
  .ro{min-width:calc(50% - 8px)}
  .scanline{opacity:.2}
}

/* portrait / vertical monitors: give the headline room, tighten verticals */
@media (orientation: portrait) and (min-width: 561px){
  .shell{padding-top:clamp(24px,3vh,48px)}
  .stage{padding:clamp(40px,7vh,110px) 0}
  .title{font-size:clamp(3.4rem, 14vw, 9rem)}
  .mods{grid-template-columns:repeat(2, 1fr)}
}

/* very short viewports (laptop landscape, split screens) */
@media (max-height: 720px) and (min-width: 861px){
  .stage{padding:clamp(18px,3vh,34px) 0}
  .term-body{height:96px}
  .title{font-size:clamp(2.6rem, 8vw, 6rem)}
}

/* large desktops */
@media (min-width: 1800px){
  html{font-size:18px}
  .shell{width:min(1760px, 92vw)}
  .core{max-width:min(1150px, 100%)}
  .term-body{height:clamp(140px, 15vh, 210px)}
}

/* 4K and 77" panels. Scaling the ROOT (not body) is what actually grows every
   rem-based size — otherwise the whole page sits tiny in the middle of the wall. */
@media (min-width: 2600px){
  html{font-size:23px}
  .shell{width:min(2500px, 90vw)}
  .core{max-width:min(1650px, 100%)}
  .frame{inset:34px}
  .mods{grid-template-columns:repeat(4, 1fr)}
}
@media (min-width: 3400px){
  html{font-size:29px}
  .shell{width:min(3100px, 88vw)}
  .core{max-width:min(2050px, 100%)}
  .frame{inset:46px}
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .grain,.scanline{display:none}
}
:focus-visible{outline:1px solid var(--acid); outline-offset:3px}
::selection{background:var(--acid); color:#0b0e0c}