/* ============================================================
   AEXYR NEURAL GATE - Interactive Experience
   Aesthetic: deep space, neural cyan/violet/amber
   ============================================================ */
:root{
  --bg:#02040a;
  --bg2:#050912;
  --panel:rgba(6,12,22,.62);
  --panel-brd:rgba(94,214,255,.18);
  --panel-brd-hot:rgba(168,116,255,.35);
  --ink:#e6f2ff;
  --ink-dim:#8ca6bd;
  --ink-mute:#4d6274;
  --cyan:#4fe3ff;
  --cyan-d:#1b9fc4;
  --violet:#a874ff;
  --mint:#4affc4;
  --amber:#ffc75e;
  --rose:#ff5c8a;
  --red:#ff4a6a;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono","Fira Code",Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
html{scroll-behavior:auto}
body{position:relative}
.mono{font-family:var(--mono);letter-spacing:.04em}

/* ============================================================
   WEBGL STAGE
   ============================================================ */
#stage{
  position:fixed;inset:0;
  width:100vw;height:100vh;
  z-index:1;
  background:radial-gradient(circle at 50% 50%, #050d1a 0%, #02040a 55%, #000 100%);
  display:block;
}

/* ============================================================
   OVERLAYS
   ============================================================ */
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);
}
.scanlines{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
  opacity:.6;
}
.noise{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ============================================================
   HUD (Fixed overlays)
   ============================================================ */
#hud{
  position:fixed;inset:0;z-index:10;
  pointer-events:none;
}
#hud > *{pointer-events:auto}

/* --- top bar --- */
.hud-top{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 26px;
  background:linear-gradient(180deg,rgba(2,4,10,.85) 0%,rgba(2,4,10,0) 100%);
}
.brand{display:flex;align-items:center;gap:10px}
.glyph{color:var(--cyan);font-size:1.25rem;text-shadow:0 0 12px var(--cyan);animation:breathe 3.5s ease-in-out infinite}
.brand-name{font-weight:800;letter-spacing:.28em;font-size:.95rem;color:var(--ink)}
.brand-sub{font-family:var(--mono);font-size:.66rem;color:var(--ink-mute);letter-spacing:.14em;
  border:1px solid var(--panel-brd);padding:3px 8px;border-radius:5px;text-transform:uppercase}

.telemetry{display:flex;gap:14px;align-items:center;font-size:.7rem}
.tm-item{display:flex;gap:6px;align-items:center;color:var(--ink-dim)}
.tm-k{color:var(--ink-mute);letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;font-family:var(--mono)}
.tm-v{color:var(--cyan);letter-spacing:.1em}
.tm-item.status .tm-v{transition:color .5s}
.tm-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);transition:all .3s}
.tm-dot.firing{background:var(--amber);box-shadow:0 0 14px var(--amber)}
.tm-dot.threshold{background:var(--violet);box-shadow:0 0 14px var(--violet)}

/* --- panels --- */
.panel{
  position:absolute;
  background:var(--panel);
  border:1px solid var(--panel-brd);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-radius:2px;
  padding:22px 24px;
  color:var(--ink);
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 40px rgba(79,227,255,.03);
  transition:border-color .6s, box-shadow .6s;
}
.panel::before{
  content:"";
  position:absolute;top:-1px;left:-1px;right:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--cyan) 50%,transparent 100%);
  opacity:.7;
}
.panel.hot{
  border-color:var(--panel-brd-hot);
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 40px rgba(168,116,255,.08), 0 0 30px rgba(168,116,255,.15);
}

.panel-left{
  left:26px;top:50%;transform:translateY(-50%);
  width:min(360px, 30vw);
}
.panel-num{
  font-size:.72rem;color:var(--cyan);letter-spacing:.28em;margin-bottom:8px;
  text-transform:uppercase;
}
.panel-title{
  font-size:1.4rem;font-weight:800;letter-spacing:.06em;
  margin-bottom:14px;line-height:1.15;
  background:linear-gradient(135deg,var(--ink) 0%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:background .6s;
}
.panel.hot .panel-title{
  background:linear-gradient(135deg,var(--ink) 0%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.panel-body{
  font-size:.85rem;color:var(--ink-dim);line-height:1.6;
  font-weight:300;
}

.panel-right{
  right:26px;top:50%;transform:translateY(-50%);
  width:min(400px, 34vw);
}
.ap-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--panel-brd);}
.ap-glyph{color:var(--amber);font-size:1rem;text-shadow:0 0 8px var(--amber)}
.ap-title{font-size:.72rem;letter-spacing:.24em;color:var(--ink-dim)}
.ap-eq{font-size:.66rem;color:var(--ink-mute);margin-bottom:14px;padding:8px 10px;
  background:rgba(0,0,0,.35);border-radius:3px;letter-spacing:.03em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ap-signals{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.sig{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:3px 8px}
.sig-lbl{grid-column:1;grid-row:1;font-size:.62rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.14em}
.sig-val{grid-column:2;grid-row:1;font-size:.78rem;color:var(--cyan);font-weight:700}
.sig-bar{grid-column:1/-1;grid-row:2;height:4px;background:rgba(94,214,255,.08);
  border-radius:2px;overflow:hidden;position:relative}
.sig-fill{height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan-d) 0%,var(--cyan) 100%);
  transition:width .12s ease-out;box-shadow:0 0 8px rgba(79,227,255,.5)}

.panel.hot .sig-fill{
  background:linear-gradient(90deg,var(--cyan) 0%,var(--violet) 60%,var(--amber) 100%);
  box-shadow:0 0 8px rgba(168,116,255,.5)
}

.ap-sum{border-top:1px solid var(--panel-brd);padding-top:12px;
  display:flex;flex-direction:column;gap:6px}
.sum-row{display:flex;justify-content:space-between;font-size:.72rem}
.sum-k{color:var(--ink-mute);letter-spacing:.14em;text-transform:uppercase;font-size:.62rem}
.sum-v{color:var(--ink);font-weight:700}
.status-row .sum-v{color:var(--cyan);letter-spacing:.16em;transition:color .5s}
.status-row .sum-v.firing{color:var(--amber);text-shadow:0 0 10px var(--amber)}
.status-row .sum-v.threshold{color:var(--violet);text-shadow:0 0 10px var(--violet)}

/* --- bottom progress --- */
.hud-bottom{
  position:absolute;bottom:0;left:0;right:0;
  padding:16px 26px 22px;
  background:linear-gradient(0deg,rgba(2,4,10,.85) 0%,rgba(2,4,10,0) 100%);
}
.progress{max-width:900px;margin:0 auto}
.progress-track{
  height:2px;background:rgba(94,214,255,.12);border-radius:1px;
  position:relative;overflow:hidden;
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--violet) 60%,var(--amber) 100%);
  transition:width .1s linear;
  box-shadow:0 0 12px rgba(79,227,255,.6);
}
.progress-legend{
  display:flex;justify-content:space-between;
  font-size:.6rem;color:var(--ink-mute);
  letter-spacing:.24em;margin-top:10px;
  text-transform:uppercase;
}

/* --- scroll hint --- */
.scroll-hint{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--ink-dim);font-size:.66rem;letter-spacing:.28em;
  animation:hint-fade 3s ease-in-out infinite;
  transition:opacity .8s;
}
.scroll-hint.hidden{opacity:0;pointer-events:none}
.sh-arrow{font-size:1.1rem;color:var(--cyan);animation:hint-bounce 1.8s ease-in-out infinite}

@keyframes hint-fade{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes hint-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}

/* ============================================================
   Scroll surface
   provides scrollable height for browser scrollbar
   ============================================================ */
.scroll-surface{
  position:relative;
  width:100vw;
  height:600vh; /* 6 viewports of scroll */
  pointer-events:none;
  z-index:0;
}
.scroll-marker{position:absolute;left:0;width:1px;height:1px}
.scroll-marker[data-t="0.10"]{top:10%}
.scroll-marker[data-t="0.30"]{top:30%}
.scroll-marker[data-t="0.50"]{top:50%}
.scroll-marker[data-t="0.70"]{top:70%}
.scroll-marker[data-t="0.90"]{top:90%}

/* ============================================================
   Scrollbar styling (subtle)
   ============================================================ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:rgba(2,4,10,.4)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--cyan-d),var(--violet));border-radius:3px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px){
  .panel-left, .panel-right{
    position:absolute;top:auto;bottom:120px;left:16px;right:16px;
    width:auto;transform:none;
  }
  .panel-left{bottom:280px}
  .panel-right{bottom:120px}
  .telemetry{gap:8px;font-size:.62rem}
  .brand-sub{display:none}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}