/* Intro overlay — absolute minimalism. Black + green accents.
   No glassmorphism, no blur, no gradients on panels, no layered shadows.
   The Three.js wave field (io-field) is the only visual texture. */

#intro-overlay{
  position:fixed;inset:0;z-index:1000;
  background:#0a0a0a;color:#e8e8ec;overflow:hidden;
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:opacity 1s ease;
  --bg:#0a0a0a;--card:rgba(255,255,255,.035);--card-border:rgba(255,255,255,.07);
  --green:#8CC63F;--green-l:#b8e04a;--green-glow:rgba(140,198,63,.3);
  --fg:#e8e8ec;--muted:#5a5a66;
}
#intro-overlay.done{opacity:0;pointer-events:none;}
body.intro-lock{overflow:hidden;height:100vh;}

/* ── wave field (the floating dots) — kept as-is ── */
#intro-overlay .io-field{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;}

/* no depth wash, no vignette — flat black */
#intro-overlay::before{content:none;}

#intro-overlay .io-vignette{display:none;}

/* subtle dot grid — kept but simplified */
#intro-overlay .io-grid{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.2s;
  background-image:radial-gradient(circle,rgba(140,198,63,.08) 1px,transparent 1px);
  background-size:52px 52px;}
#intro-overlay .io-grid.on{opacity:1;}

/* ambient glow — removed */
#intro-overlay .io-ambient{display:none;}

/* curtain — line grows from center, splits open with green glow */
#intro-overlay .io-curtain{position:absolute;inset:0;z-index:100;pointer-events:none;}
#intro-overlay .io-curtain .h{position:absolute;left:0;right:0;height:50%;background:#111;}
#intro-overlay .io-curtain .h.top{top:0;
  border-bottom:1px solid transparent;
  transition:transform 1.6s cubic-bezier(.4,0,.0,1),border-color .5s,box-shadow .8s;}
#intro-overlay .io-curtain .h.bot{bottom:0;
  border-top:1px solid transparent;
  transition:transform 1.6s cubic-bezier(.4,0,.0,1),border-color .5s,box-shadow .8s;}

/* the green line */
#intro-overlay .io-curtain .ln{
  position:absolute;top:50%;left:50%;
  width:0;height:3px;
  transform:translate(-50%,-50%);
  background:var(--green);
  box-shadow:0 0 30px rgba(140,198,63,.7),0 0 80px rgba(140,198,63,.35),0 0 120px rgba(140,198,63,.15);
  opacity:0;
  transition:width 1.2s cubic-bezier(.22,1,.36,1),opacity .6s ease;}

/* stage 1: line grows */
#intro-overlay .io-curtain.slit .ln{width:100%;opacity:1;}

/* stage 2: split apart with green edge glow */
#intro-overlay .io-curtain.split .h.top{transform:translateY(-100%);
  border-bottom-color:rgba(140,198,63,.45);box-shadow:0 6px 60px rgba(140,198,63,.3);}
#intro-overlay .io-curtain.split .h.bot{transform:translateY(100%);
  border-top-color:rgba(140,198,63,.45);box-shadow:0 -6px 60px rgba(140,198,63,.3);}
#intro-overlay .io-curtain.split .ln{opacity:0;transition:opacity .5s ease .3s;}

#intro-overlay .io-curtain.gone{display:none;}

#intro-overlay #io-stack{position:absolute;inset:0;z-index:10;
  transition:opacity 1s,transform 1s cubic-bezier(.4,0,.2,1);}
#intro-overlay #io-wires{position:absolute;inset:0;z-index:5;pointer-events:none;}

/* ───────────── service cards — stripped down ───────────── */
#intro-overlay #io-stack{--card-scale:1;}
#intro-overlay .card{
  position:absolute;
  width:calc(220px * var(--card-scale));
  border-radius:calc(6px * var(--card-scale));
  z-index:2;overflow:hidden;text-align:left;
  background:#0e0e0e;
  border:1px solid rgba(255,255,255,.06);
  will-change:transform,opacity;}

#intro-overlay .card::after{content:none;}
#intro-overlay .card .sheen{display:none;}

/* hide the window chrome dots — too decorative */
#intro-overlay .card .chrome{display:none;}

#intro-overlay .card .body{
  display:flex;align-items:center;gap:calc(10px * var(--card-scale));
  padding:calc(14px * var(--card-scale));
  position:relative;}
#intro-overlay .card .glyph{
  width:calc(36px * var(--card-scale));height:calc(36px * var(--card-scale));flex:none;
  border-radius:calc(6px * var(--card-scale));
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;}
#intro-overlay .card.live .glyph{
  border-color:rgba(140,198,63,.25);}
#intro-overlay .card .glyph img{
  width:calc(20px * var(--card-scale));height:calc(20px * var(--card-scale));
  display:block;object-fit:contain;opacity:.8;}
#intro-overlay .card .em{font-size:calc(18px * var(--card-scale));line-height:1;}
#intro-overlay .card .txt{min-width:0;}
#intro-overlay .card .nm{
  font-family:'Space Grotesk',sans-serif;
  font-size:calc(14px * var(--card-scale));font-weight:600;letter-spacing:-.01em;
  color:var(--fg);line-height:1.15;white-space:nowrap;}
#intro-overlay .card .ct{
  font-family:'JetBrains Mono',monospace;
  font-size:calc(8.5px * var(--card-scale));margin-top:calc(2px * var(--card-scale));
  color:var(--green);
  text-transform:uppercase;letter-spacing:.16em;opacity:.6;}

#intro-overlay .card .dot{
  position:absolute;top:50%;right:calc(12px * var(--card-scale));margin-top:-2.5px;
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
  opacity:0;transform:scale(0);transition:opacity .45s,transform .45s cubic-bezier(.34,1.56,.64,1);}
#intro-overlay .card.live .dot{opacity:1;transform:scale(1);animation:io-blink 2s ease-in-out .5s infinite;}

#intro-overlay .card .meta{
  padding:calc(6px * var(--card-scale)) calc(14px * var(--card-scale)) calc(9px * var(--card-scale));
  border-top:1px solid rgba(255,255,255,.04);
  font-family:'JetBrains Mono',monospace;font-size:calc(8.5px * var(--card-scale));
  color:rgba(255,255,255,.2);letter-spacing:.04em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}

/* hub — same flat style, just a slightly brighter border */
#intro-overlay .card.hub{
  width:calc(240px * var(--card-scale));
  border-color:rgba(140,198,63,.2);}
#intro-overlay .card.hub .nm{font-size:calc(16px * var(--card-scale));}
#intro-overlay .card.hub .glyph{width:calc(40px * var(--card-scale));height:calc(40px * var(--card-scale));}
#intro-overlay .card.hub .glyph img{width:calc(24px * var(--card-scale));height:calc(24px * var(--card-scale));}

/* ───────────── deploy bar — REMOVED, replaced by border-trace on backend card ───────────── */
/* the io-hud is hidden; deploy state is shown via card border animation */
#intro-overlay .io-hud{display:none;}

/* border-trace loading: a green light races around the card border */
#intro-overlay .card.deploying{
  overflow:visible;
  border-color:transparent;}

#intro-overlay .card.deploying::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  pointer-events:none;z-index:10;
  background:conic-gradient(
    from var(--trace-angle, 0deg),
    var(--green) 0deg,
    var(--green) 40deg,
    transparent 80deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  animation:border-trace 2s linear forwards;}

@keyframes border-trace{
  0%  { --trace-angle:0deg; }
  100%{ --trace-angle:360deg; }
}

/* register --trace-angle as a CSS property so it can be animated */
@property --trace-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* once live, solid green border glow (subtle) */
#intro-overlay .card.deploying.live{
  border-color:rgba(140,198,63,.35);}
#intro-overlay .card.deploying.live::before{
  animation:none;
  background:var(--green);
  opacity:.2;}

/* ───────────── observability panel — compact, minimal ───────────── */
#intro-overlay .io-obs{
  position:absolute;z-index:55;width:240px;pointer-events:none;
  border-radius:6px;overflow:hidden;transform-origin:50% 50%;
  background:#0e0e0e;
  border:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translate(-14px,10px) scale(.9);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);}
#intro-overlay .io-obs.on{opacity:1;transform:translate(0,0) scale(1);}

#intro-overlay .io-obs-head{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px 6px;border-bottom:1px solid rgba(255,255,255,.06);}
#intro-overlay .io-obs-dot{
  width:5px;height:5px;border-radius:50%;background:var(--green);
  animation:io-blink 2s ease-in-out infinite;}
#intro-overlay .io-obs-title{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;color:#e8e8ec;}
#intro-overlay .io-obs-tag{
  margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:8px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.06);border-radius:3px;padding:1px 5px;}

#intro-overlay .io-obs-stats{display:flex;gap:12px;padding:7px 10px 3px;}
#intro-overlay .io-obs-stats .st{display:flex;flex-direction:column;gap:1px;}
#intro-overlay .io-obs-stats .k{
  font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.2);}
#intro-overlay .io-obs-stats .v{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--green);
  font-variant-numeric:tabular-nums;}
#intro-overlay .io-obs-stats .v.ok{color:rgba(255,255,255,.4);}

#intro-overlay .io-obs-chart{position:relative;padding:4px 8px 8px;}
#intro-overlay .io-obs-chart svg{display:block;width:100%;height:70px;overflow:visible;}
#intro-overlay #io-chartHead{fill:var(--green);}
#intro-overlay .io-obs-axis{
  display:block;margin-top:4px;padding-left:2px;
  font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.15);}

/* ───────────── traffic-spike alert — compact ───────────── */
#intro-overlay .io-alert{
  position:relative;margin:0 8px 8px;z-index:4;
  border-radius:5px;padding:0 10px;max-height:0;overflow:hidden;
  background:#141010;
  border:1px solid rgba(255,138,76,.3);
  opacity:0;transform:translateY(8px) scale(.97);pointer-events:none;
  transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1),
             max-height .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1);}
#intro-overlay .io-alert.on{opacity:1;transform:translateY(0) scale(1);
  max-height:180px;padding:9px 10px 8px;}
#intro-overlay .io-alert-row{display:flex;gap:8px;align-items:flex-start;}
#intro-overlay .io-alert-icon{
  width:16px;height:16px;border-radius:3px;flex:none;margin-top:1px;
  background:#ff8a4c;color:#0a0a0a;font-weight:800;font-size:10px;
  display:flex;align-items:center;justify-content:center;}
#intro-overlay .io-alert-title{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;color:#ffd9c4;}
#intro-overlay .io-alert-sub{
  font-family:'JetBrains Mono',monospace;font-size:8px;margin-top:2px;
  color:rgba(255,190,160,.5);letter-spacing:.03em;}
#intro-overlay .io-alert-sub b{color:#ff8a4c;font-weight:500;}
#intro-overlay .io-alert-ask{
  margin:7px 0 6px;font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.01em;}
#intro-overlay .io-alert-btns{display:flex;gap:6px;justify-content:flex-end;}
#intro-overlay .io-btn{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;border-radius:3px;padding:4px 10px;cursor:default;
  border:1px solid rgba(255,255,255,.08);background:transparent;
  color:rgba(255,255,255,.35);transition:transform .16s,background .2s;}
#intro-overlay .io-btn.yes{
  border-color:rgba(140,198,63,.4);color:var(--green);}
#intro-overlay .io-btn.yes.pressed{
  transform:scale(.93);background:var(--green);color:#0a0a0a;}

/* alarm state — amber border, no glow */
#intro-overlay .io-obs.alarm{
  border-color:rgba(255,138,76,.4);}
#intro-overlay .io-obs.alarm #io-chartLine{stroke:#ff8a4c;}
#intro-overlay .io-obs.alarm #io-chartHead{fill:#ff8a4c;}
#intro-overlay .io-obs.alarm .io-obs-dot{background:#ff8a4c;}
#intro-overlay #io-p99.hot{color:#ff8a4c;}
#intro-overlay #io-chartLine,
#intro-overlay #io-chartHead,
#intro-overlay .io-obs{transition:stroke .9s ease,fill .9s ease,
  border-color .9s ease;}
#intro-overlay #io-p99{transition:color .6s ease;}

/* cursor pointer */
#intro-overlay .io-cursor{
  position:absolute;margin:-6px 0 0 -6px;width:12px;height:12px;border-radius:50%;
  background:#fff;
  opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);}
#intro-overlay .io-cursor.on{opacity:1;transform:scale(1);}
#intro-overlay .io-cursor.click{animation:io-press .3s ease-out;}
@keyframes io-press{40%{transform:scale(.62);}100%{transform:scale(1);}}
#intro-overlay .io-cursor.click::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--green);animation:io-ripple .75s ease-out forwards;}
@keyframes io-ripple{
  0%{transform:scale(.5);opacity:.8;}
  100%{transform:scale(6);opacity:0;}}

/* expanded state — kept for compat but simplified */
#intro-overlay .io-obs.expanded{
  transition:transform .95s cubic-bezier(.5,0,.15,1),
             width .95s cubic-bezier(.5,0,.15,1),border-color .7s;
  transform:translate(var(--gx,0),var(--gy,0)) scale(1.85);z-index:65;}
#intro-overlay .io-obs.expanded .io-obs-chart svg{height:190px;
  transition:height .95s cubic-bezier(.5,0,.15,1);}
#intro-overlay .io-obs.expanded #io-chartLine{stroke-width:1.15;}
#intro-overlay .io-obs.expanded #io-chartHead{r:2;}

/* ───────────── Act 7 finale ───────────── */

#intro-overlay .fn-drop{
  position:absolute;top:50%;left:50%;
  background:var(--green);
  border-radius:1px;
  pointer-events:none;z-index:80;
  will-change:transform,width,height;}

#intro-overlay .fn-ripple-wrap{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,50vh);
  width:0;height:0;z-index:75;pointer-events:none;}

#intro-overlay .fn-ring{
  position:absolute;left:50%;top:50%;
  width:280px;height:280px;
  margin:-140px 0 0 -140px;
  border-radius:50%;
  border:1px solid var(--green);
  will-change:transform,opacity;}

#intro-overlay #fn-tagline{
  position:absolute;inset:0;z-index:85;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.5vh,28px);
  text-align:center;
  pointer-events:none;}

#intro-overlay .fn-line{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--fg);
  overflow:hidden;}

/* individual letter wrapper for the slide-down */
#intro-overlay .fn-letter{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;}
#intro-overlay .fn-letter span{
  display:inline-block;
  transform:translateY(-110%);
  will-change:transform;}

#intro-overlay .fn-line-1{
  font-size:clamp(24px,4.2vw,52px);
  font-weight:600;}

#intro-overlay .fn-line-2{
  font-size:clamp(20px,3.2vw,40px);
  font-weight:500;
  color:var(--green);}

#intro-overlay .fn-line-3{
  font-size:clamp(16px,2.4vw,32px);
  font-weight:400;
  color:rgba(255,255,255,.4);}

/* emitting state — just a green border, no glow */
#intro-overlay .card.emitting{
  border-color:rgba(140,198,63,.4);}

@media (max-width:720px){
  #intro-overlay .io-brand{top:16px;padding:5px 14px 5px 7px;}
  #intro-overlay .io-brand .ic{width:22px;height:22px;border-radius:6px;}
  #intro-overlay .io-brand .tx{font-size:12px;}
  #intro-overlay .io-skip{top:18px;right:14px;font-size:10px;padding:6px 12px;}
  #intro-overlay .card .meta{display:none;}
  #intro-overlay .card .idx{display:none;}
  #intro-overlay .io-hud{bottom:34px;}
}

/* brand chip — matches helix page nav exactly */
#intro-overlay .io-brand{position:absolute;top:28px;left:50%;transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:8px;
  opacity:0;transition:opacity .5s .15s;}
#intro-overlay .io-brand.on{opacity:1;}
#intro-overlay .io-brand .ic{display:none;}
#intro-overlay .io-brand .tx{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:1.15rem;letter-spacing:-.03em;color:var(--fg);}
#intro-overlay .io-brand .tx b{color:var(--fg);font-weight:700;}
#intro-overlay .io-brand .tx-inner{position:relative;display:inline-block;}
#intro-overlay .io-brand .tx-chev{
  position:absolute;
  left:41.5%;top:-.08em;
  transform:translateX(-50%);
  width:.62em;height:.42em;
  pointer-events:none;}

/* hero wordmark — clean */
#intro-overlay #io-hero::before{content:none;}
#intro-overlay #io-hero{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
  opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1);}
#intro-overlay #io-hero.on{opacity:1;transform:none;}
#intro-overlay .kicker{font-size:clamp(11px,1.2vw,14px);font-weight:600;text-transform:uppercase;
  letter-spacing:.35em;color:rgba(255,255,255,.35);margin-bottom:40px;}
#intro-overlay .wordmark{font-family:'Space Grotesk',sans-serif;font-size:clamp(56px,10vw,120px);
  font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--fg);
  position:relative;display:inline-block;}
#intro-overlay .wm-chev{
  position:absolute;
  left:41.5%;
  top:-.2em;
  transform:translateX(-50%);
  width:.6em;height:.405em;
  pointer-events:none;}
#intro-overlay .tagline{font-size:clamp(14px,1.8vw,20px);color:rgba(255,255,255,.35);margin-top:18px;
  font-weight:400;letter-spacing:.02em;max-width:520px;text-align:center;}

/* skip button — minimal */
#intro-overlay .io-skip{position:absolute;top:26px;right:28px;z-index:60;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25);
  background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:999px;
  padding:7px 14px;cursor:pointer;transition:color .25s,border-color .25s;}
#intro-overlay .io-skip:hover{color:var(--fg);border-color:rgba(255,255,255,.15);}

/* contextual caption — tooltip box next to cards */
#intro-overlay .io-caption{
  position:absolute;z-index:65;pointer-events:none;
  background:#111;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  padding:10px 14px;
  max-width:220px;
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  font-weight:500;letter-spacing:-.01em;
  line-height:1.4;
  color:rgba(255,255,255,.6);
  opacity:0;
  will-change:transform,opacity;}

/* bottom-centered variant */
#intro-overlay .io-caption-bottom{
  left:0 !important;
  right:0;
  top:auto !important;
  bottom:32px;
  margin:0 auto;
  max-width:560px;
  text-align:center;
  transform:none;
  font-size:18px;
  font-weight:400;
  padding:14px 24px;
  color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.12);}

/* live highlight variant — green border + glow */
#intro-overlay .io-caption-live{
  border-color:rgba(140,198,63,.4);
  color:var(--green);
  font-weight:600;
  box-shadow:0 0 20px -6px rgba(140,198,63,.25);}