/* NeuroSurge — SUBJECT: YOU
   Bone-white + clinical red on near-black. The viewport is a void, not a document. */

:root{
  --bg:        #08060f;
  --bg-2:      #0d0a16;
  --bone:      #e7e4f0;
  --bone-dim:  #6a6678;
  --bone-faint:#37343f;
  --red:       #9d6bff;  /* accent — dark-purple theme */
  --red-deep:  #4e2a99;
  --red-glow:  rgba(157,107,255,.55);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

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

html,body{
  height:100%;
  width:100%;
  background:var(--bg);
  color:var(--bone);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}

/* deep field gradient under everything */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 46%, #0e0b18 0%, #0a0810 38%, #070510 72%, #040308 100%);
}

/* ---- stacked layers ---- */
#gl, #fx{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
}
#gl{ z-index:1; }
#fx{ z-index:2; }

.vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 48%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.92) 100%);
  mix-blend-mode:multiply;
}

/* ---- HUD (real DOM, for legibility + a11y) ---- */
.hud{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hud .pad{ position:absolute; }
.tl{ top:clamp(14px,3vw,30px); left:clamp(14px,3vw,30px); }
.tr{ top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); text-align:right; }
.bl{ bottom:clamp(14px,3vw,30px); left:clamp(14px,3vw,30px); }
.br{ bottom:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); text-align:right; }

.line{ color:var(--bone-dim); line-height:1.7; white-space:nowrap; }
.line .k{ color:var(--bone-faint); }
.line .v{ color:var(--bone); }
.line .r{ color:var(--red); }
.dim{ color:var(--bone-faint); }
.rec{ color:var(--red); }
.rec::before{
  content:"●"; display:inline-block; margin-right:.5em;
  animation:blink 1.6s steps(1) infinite;
}
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }

.tag{
  color:var(--bone);
  text-shadow:0 0 14px rgba(231,228,240,.18), 0 0 2px var(--red-glow);
}

/* redacted contract slot */
.ca{ letter-spacing:.18em; }
.ca .blk{ color:var(--bone-faint); }
.ca .stamp{
  color:var(--red);
  border:1px solid var(--red-deep);
  padding:1px 5px;
  margin-left:.5em;
  font-size:9px;
  letter-spacing:.22em;
  box-shadow:0 0 10px rgba(157,107,255,.15) inset;
}

/* manifesto — etched into glass */
.glass{
  position:fixed; left:50%; bottom:clamp(96px,16vh,150px); z-index:4;
  transform:translateX(-50%);
  width:min(620px,84vw);
  text-align:center;
  text-transform:none;
  letter-spacing:.02em;
  font-size:clamp(11px,1.45vw,14px);
  line-height:1.95;
  color:rgba(231,228,240,.30);
  text-shadow:
     0 1px 0 rgba(0,0,0,.7),
     0 -1px 0 rgba(255,255,255,.07),
     0 0 22px rgba(231,228,240,.05);
  opacity:0; transition:opacity 1.6s ease;
  pointer-events:none;
}
.glass.lit{ opacity:1; }
.glass .em{ color:rgba(157,107,255,.62); }

/* floating specimen labels anchored to lobes (positioned by JS) */
.label{
  position:fixed; z-index:4; pointer-events:none;
  font-size:10px; letter-spacing:.16em;
  color:var(--bone);
  white-space:nowrap;
  transform:translate(-50%,-50%);
  opacity:0;
  text-shadow:0 0 8px rgba(0,0,0,.9);
  will-change:transform,opacity;
}
.label .lead{ color:var(--red); margin-right:.5em; }
.label .tick{ color:var(--bone-faint); }

/* system whispers — surface in the EEG strip */
.whisper{
  position:fixed; left:50%; bottom:clamp(54px,9vh,86px); z-index:4;
  transform:translateX(-50%);
  font-size:10px; letter-spacing:.34em; color:var(--red);
  text-transform:uppercase;
  opacity:0; pointer-events:none;
  text-shadow:0 0 12px var(--red-glow);
}

/* idle nudge */
.nudge{
  position:fixed; left:50%; top:62%; z-index:4;
  transform:translateX(-50%);
  font-size:10px; letter-spacing:.4em; color:var(--bone-faint);
  text-transform:uppercase; opacity:0;
  transition:opacity 1s ease; pointer-events:none;
}
.nudge.show{ opacity:.7; }

/* audio toggle — unobtrusive, bottom edge */
.audio{
  position:fixed; left:50%; transform:translateX(-50%); bottom:clamp(10px,2vh,16px); z-index:6;
  pointer-events:auto; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  font-size:9px; letter-spacing:.3em; color:var(--bone-faint);
  text-transform:uppercase; background:none; border:none; font-family:var(--mono);
  transition:color .3s ease;
}
.audio:hover{ color:var(--bone); }
.audio.on{ color:var(--red); }
.audio .bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.audio .bars i{ width:2px; height:3px; background:currentColor; opacity:.5; }
.audio.on .bars i{ animation:eq 1.1s ease-in-out infinite; opacity:1; }
.audio.on .bars i:nth-child(2){ animation-delay:.18s; }
.audio.on .bars i:nth-child(3){ animation-delay:.36s; }
.audio.on .bars i:nth-child(4){ animation-delay:.10s; }
@keyframes eq{ 0%,100%{height:3px} 50%{height:12px} }

/* ---- transmission reveal ---- */
.reveal{
  position:fixed; inset:0; z-index:7; pointer-events:none;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:22px;
  opacity:0; transition:opacity .6s ease;
}
.reveal.open{
  opacity:1; pointer-events:auto;
  background:radial-gradient(closest-side at 50% 47%, rgba(6,7,10,.82), rgba(6,7,10,.4) 42%, rgba(6,7,10,0) 72%);
}
.reveal .sigil{ width:min(180px,40vw); height:min(180px,40vw); }
.reveal .xfeed{
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone); text-decoration:none; cursor:pointer;
  border-bottom:1px solid var(--red-deep); padding-bottom:4px;
  text-shadow:0 0 16px var(--red-glow);
  transition:color .3s, letter-spacing .3s;
}
.reveal .xfeed:hover{ color:var(--red); letter-spacing:.3em; }
.reveal .sub{ font-size:9px; letter-spacing:.4em; color:var(--bone-faint); text-transform:uppercase; }

/* defib flash */
.flash{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  background:var(--bone); opacity:0;
}

/* ---- clickable SCHEMATIC trigger (diegetic, in the HUD) ---- */
.trigger{
  pointer-events:auto; cursor:pointer;
  background:none; border:none; padding:0; margin-top:4px;
  font-family:var(--mono); font-size:inherit; letter-spacing:inherit; text-transform:uppercase;
  color:var(--bone-dim); display:inline-flex; gap:.4em; align-items:baseline;
  animation:pulseTrig 2.8s ease-in-out infinite;
}
.trigger:hover{ color:var(--bone); }
.trigger .k{ color:var(--bone-dim); }
.trigger:hover .k{ color:var(--bone); }
.trigger .r{ color:var(--red); }
@keyframes pulseTrig{ 0%,100%{opacity:.5} 50%{opacity:.95} }

/* ---- the schematic (the tech) ---- */
.schematic{
  position:fixed; inset:0; z-index:7; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s ease;
  background:radial-gradient(closest-side at 50% 50%, rgba(8,6,15,.92), rgba(8,6,15,.6) 52%, rgba(8,6,15,0) 82%);
}
.schematic.open{ opacity:1; pointer-events:auto; }
.schematic .sheet{
  position:relative; width:min(560px,88vw); padding:32px 36px;
  font-size:11px; letter-spacing:.05em; line-height:1.6; color:var(--bone);
}
.schematic .sheet::before, .schematic .sheet::after{
  content:""; position:absolute; width:20px; height:20px; border:1px solid var(--red); opacity:.8;
}
.schematic .sheet::before{ top:0; left:0; border-right:none; border-bottom:none; }
.schematic .sheet::after{ bottom:0; right:0; border-left:none; border-top:none; }
.schematic .sx{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; }
.schematic .sx .t{
  color:var(--red); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 0 12px var(--red-glow);
}
.schematic .seal{
  pointer-events:auto; cursor:pointer; background:none; border:none; font-family:var(--mono);
  color:var(--bone-dim); font-size:9px; letter-spacing:.22em; text-transform:uppercase;
}
.schematic .seal:hover{ color:var(--red); }
.schematic .pipe{ list-style:none; display:grid; gap:12px; margin:0 0 20px; padding:0; }
.schematic .pipe li{
  opacity:0; transform:translateY(5px); transition:opacity .55s ease, transform .55s ease;
}
.schematic.open .pipe li{ opacity:1; transform:none; }
.schematic.open .pipe li:nth-child(1){ transition-delay:.12s; }
.schematic.open .pipe li:nth-child(2){ transition-delay:.22s; }
.schematic.open .pipe li:nth-child(3){ transition-delay:.32s; }
.schematic.open .pipe li:nth-child(4){ transition-delay:.42s; }
.schematic .pipe .n{ color:var(--bone-faint); margin-right:9px; }
.schematic .pipe .op{ color:var(--red); letter-spacing:.1em; }
.schematic .rd{ color:var(--bone-faint); letter-spacing:.12em; }
.schematic .meta{
  display:grid; gap:7px; font-size:10px; letter-spacing:.08em; color:var(--bone-dim); margin-bottom:18px;
  opacity:0; transition:opacity .6s ease .5s;
}
.schematic.open .meta{ opacity:1; }
.schematic .meta .k{ color:var(--bone-faint); margin-right:9px; text-transform:uppercase; }
.schematic .foot{
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--red); opacity:.75;
}

/* ---- texture overlays (faint, on top) ---- */
.scanlines{
  position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px,
    rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.grain{
  position:fixed; inset:-120% -120%; z-index:5; pointer-events:none;
  width:340%; height:340%;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 600ms steps(4) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-5%)} 75%{transform:translate(-2%,2%)} 100%{transform:translate(2%,-3%)}
}

/* boot fade */
.boot{
  position:fixed; inset:0; z-index:9; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1.2s ease; pointer-events:none;
}
.boot.gone{ opacity:0; }
.boot .b{
  font-size:10px; letter-spacing:.5em; color:var(--bone-faint);
  text-transform:uppercase;
}
.boot .b::after{ content:"_"; animation:blink 1s steps(1) infinite; }

/* noscript fallback */
.fallback{
  position:fixed; inset:0; z-index:50; background:var(--bg); color:var(--bone);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:20px; padding:40px; text-align:center; font-size:13px; line-height:2;
}
.fallback a{ color:var(--red); }

@media (prefers-reduced-motion: reduce){
  .grain{ animation:none; }
  .rec::before, .audio.on .bars i, .boot .b::after{ animation:none; }
}

@media (max-width:640px){
  .hud{ font-size:9px; letter-spacing:.08em; }
  .br{ display:none; }                       /* fold vitals into the ECG on small screens */
  .ca{ white-space:normal; line-height:1.6; }
  .ca .stamp{ display:inline-block; margin:5px 0 0; }
  .audio{ left:auto; right:14px; transform:none; bottom:12px; }
  .glass{ width:88vw; bottom:clamp(108px,17vh,150px); font-size:11px; line-height:1.85; }
  .label{ font-size:9px; }
}