/* No Sleep Cassette — Core (HIRES ONLY) v2026-02-05_1
   - block glyph chassis (no box-drawing lines)
   - only screen + LEDs glow
   - fixed chassis, scales to viewport
*/

:root{
  --bg:#05070a;
  --fg:#e9feff;
  --dim:rgba(233,254,255,.78);

  --accent:#4bf4ff;
  --glow:rgba(75,244,255,.22);
  --glow2:rgba(75,244,255,.12);

  --scale:1;

  /* screen-only readability knobs */
  --monitor-scale: 1.55;
  --anaglyph-strength: 0.28;

  /* banner */
  --banner-fs: 14px;

  /* HIRES only */
  --font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* UI labels only (pixel nerd font) */
  --font-ui: "NSC Phoenix VGA", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs: 10px;
  --lh: 1.00;
}

/* crisp-ish pixel scaling helpers */
#nsc-stage{ image-rendering: pixelated; }


@font-face{
  font-family:"NSC Phoenix VGA";
  src:url("fonts/PhoenixVGA_8x16.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 720px at 78% 22%, rgba(75,244,255,.08), rgba(0,0,0,0) 64%),
    radial-gradient(1400px 1000px at 44% 36%, rgba(255,255,255,.06), rgba(0,0,0,0) 62%),
    var(--bg);
  color:var(--fg);
  font-family: var(--font);
  overflow:hidden;
  font-variant-ligatures:none;
  -webkit-font-smoothing: antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 560px at 50% 58%, rgba(75,244,255,.05), rgba(0,0,0,0) 66%);
  mix-blend-mode:screen;
  opacity:.65;
}

#nsc-root{
  height:100%;
  display:flex;
  flex-direction:column;
}

#nsc-banner{
  flex:0 0 auto;
  padding:0 8px 0;
  text-align:center;
  font-size: var(--banner-fs);
  line-height: 0.95;
  color:color-mix(in oklab, var(--fg) 88%, #ffffff 12%);
  text-shadow: 0 0 14px rgba(255,255,255,.12), 0 0 32px var(--glow2);
  max-width:100vw;
  overflow-x:auto;
  overflow-y:hidden;
}
#nsc-motto{
  flex:0 0 auto;
  height:14px;
  margin:0;
  text-align:center;
  font-family:var(--font-ui);
  font-size:11px;
  color:rgba(233,254,255,.70);
  letter-spacing:.08em;
  animation:nsc_motto_fade 4.6s ease-in-out infinite;
}
@keyframes nsc_motto_fade{
  0%,20%{ opacity:.05; }
  34%,66%{ opacity:.92; }
  80%,100%{ opacity:.05; }
}

#nsc-stage-wrap{
  flex:1 1 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:0;
}

#nsc-stage{
  position:relative;
  transform: scale(var(--scale));
  transform-origin:center;

  width: 1720px;
  height: 1040px;

  display:grid;
  grid-template-columns: 590px 1088px; /* rack | monitor+cpu */
  gap:18px;
}

.nsc-stack{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-left:2px;
}

.nsc-monitor-wrap{
  position:relative;
  flex: 1 1 auto;
  transform: perspective(1800px) rotateY(-1.3deg) rotateX(0.5deg);
  transform-origin: center top;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.30));
  contain:paint;
  isolation:isolate;
}

/* monitor screen layer (scaled, anaglyph) */
#nsc-monitor-screen-clip{
  position:absolute;
  left: calc(6 * 1ch);
  top:  calc(10 * 1em * var(--lh));
  width:  calc(91 * 1ch);
  height: calc(34 * 1em * var(--lh));
  overflow-x:hidden;
  overflow-y:auto;
  pointer-events:auto;
  z-index:2;
  box-sizing:border-box;
  padding-right:1ch;
  padding-bottom:0.4em;
}
#nsc-monitor-screen{
  font-family: var(--font-ui);
  color: var(--fg);
  text-shadow:
    1.2px 0 rgba(255, 80, 160, calc(var(--anaglyph-strength) * .75)),
   -1.2px 0 rgba( 80, 220, 255, calc(var(--anaglyph-strength) * .70)),
    0 0 12px rgba(255,255,255,.10),
    0 0 22px var(--glow2);
  transform: scale(var(--monitor-scale));
  transform-origin: top left;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
  display:block;
  width:100%;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  white-space:pre;
  word-wrap:normal;
  letter-spacing:0;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}
#nsc-monitor-screen::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}
#nsc-monitor-screen::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.3);
}
#nsc-monitor-screen::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 3px;
}
#nsc-monitor-screen::-webkit-scrollbar-button{
  display:none;
}
#nsc-monitor-screen .nsc-hot{
  color:#fff;
  text-shadow:
    1.6px 0 rgba(255, 80, 160, calc(var(--anaglyph-strength) * .95)),
   -1.6px 0 rgba( 80, 220, 255, calc(var(--anaglyph-strength) * .90)),
    0 0 14px rgba(255,255,255,.16),
    0 0 30px var(--glow);
}

.nsc-cpu-wrap{
  position:relative;
  flex: 0 0 auto;
  margin-top: 4px;
  transform: perspective(1800px) rotateY(-1.6deg) rotateX(0.8deg);
  transform-origin: center top;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.28));
  contain:paint;
  isolation:isolate;
}

/* glitch tear layer (theme-controlled) */
#nsc-stage::before{
  content:none;
}
/*
  Stage tear disabled in finalpass:
  previous implementation produced GPU/compositing artifacts (trailing blocks)
  on some browser+zoom combinations.
*/

  /* A bright “tear band” + faint repeats */

@keyframes nsc_tear_roll{
  0%   { transform: translate3d(var(--tear-x0,-10px), -140px, 0) skewX(var(--tear-skew,-4deg)); }
  100% { transform: translate3d(var(--tear-x1, 14px),  980px, 0) skewX(var(--tear-skew,-4deg)); }
}
@keyframes nsc_tear_pop{
  0%, 72%, 100%{ opacity:var(--tear,0); }
  74%{ opacity:calc(var(--tear,0) * 1.10); }
  76%{ opacity:calc(var(--tear,0) * .55); }
  78%{ opacity:calc(var(--tear,0) * .95); }
}

/* horizontal displacement */
@keyframes nsc_tear_jitter{
  0%, 82%, 100%{ margin-left:0px; }
  84%{ margin-left:calc(var(--tear-dx, 18px) * -1); }
  86%{ margin-left:calc(var(--tear-dx, 18px) * 0.65); }
  88%{ margin-left:calc(var(--tear-dx, 18px) * -0.30); }
  90%{ margin-left:calc(var(--tear-dx, 18px) * 0.90); }
  92%{ margin-left:0px; }
}

/* slice mask to make it feel “ripped” */
@keyframes nsc_tear_slice{
  0%,100%{ clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  18%{ clip-path: polygon(0 0,100% 0,100% 30%,0 28%, 0 36%,100% 38%,100% 100%,0 100%); }
  42%{ clip-path: polygon(0 0,100% 0,100% 22%,0 20%, 0 60%,100% 62%,100% 100%,0 100%); }
  66%{ clip-path: polygon(0 0,100% 0,100% 46%,0 44%, 0 52%,100% 54%,100% 100%,0 100%); }
  84%{ clip-path: polygon(0 0,100% 0,100% 18%,0 16%, 0 74%,100% 76%,100% 100%,0 100%); }
}

.nsc-col{position:relative; padding:0;}
pre{
  margin:0;
  white-space:pre;
  font-family: var(--font-ui);
  font-size:var(--fs);
  line-height:var(--lh);
  letter-spacing: 0.00em;
}

/* hardware matte */
.nsc-hw{ color:var(--dim); text-shadow:none; }
#nsc-rack,
#nsc-monitor-bezel,
#nsc-deck{
  filter:none;
}
#nsc-rack{
  display:block;
  width:63ch;
  box-sizing:border-box;
  max-width:100%;
  overflow:hidden;
  contain:paint;
  isolation:isolate;
  transform: perspective(1800px) rotateY(1.1deg) rotateX(0.35deg);
  transform-origin: left center;
}
#nsc-monitor-bezel{
  display:block;
  width:101ch;
  box-sizing:border-box;
  max-width:100%;
  overflow:hidden;
  contain:paint;
  isolation:isolate;
}
#nsc-deck{
  display:block;
  width:101ch;
  box-sizing:border-box;
  max-width:100%;
  overflow:hidden;
  contain:paint;
  isolation:isolate;
  position:relative;
  z-index:2;
}
#nsc-rack .nsc-baytext{
  text-shadow:
    0.5px 0 rgba(255,255,255,.18),
   -0.5px 0 rgba(0,0,0,.40),
    0 0 2px rgba(255,255,255,.08) !important;
}
#nsc-rack .nsc-led,
#nsc-rack .nsc-led-g,
#nsc-rack .nsc-led-r{
  text-shadow:
    0 0 2px rgba(255,255,255,.12),
    0 0 4px rgba(75,244,255,.10) !important;
  filter:none !important;
}

/* luminous planes */
.nsc-screen{
  color:var(--fg);
  display:inline-block;
  background:
    radial-gradient(540px 220px at 46% 35%, rgba(75,244,255,.12), rgba(0,0,0,0) 68%),
    rgba(0,0,0,.10);
  text-shadow:
    0 0 10px rgba(255,255,255,.12),
    0 0 22px var(--glow2);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 26px rgba(0,0,0,.55),
    0 0 18px rgba(75,244,255,.08);
}
.nsc-led{
  color:var(--accent);
  text-shadow: 0 0 10px var(--glow), 0 0 22px var(--glow2);
  animation:nsc_led_real 2.9s infinite;
}
.nsc-led-g{
  color:#66ff8a;
  text-shadow: 0 0 10px rgba(102,255,138,.22), 0 0 26px rgba(102,255,138,.10);
}
.nsc-led-r{
  color:#ff5a8a;
  text-shadow: 0 0 10px rgba(255,90,138,.22), 0 0 26px rgba(255,90,138,.10);
}
@keyframes nsc_led_real{
  0%,58%{opacity:.86; filter:brightness(1.00);}
  61%{opacity:.20; filter:brightness(.92);} /* quick dropout */
  64%{opacity:.96; filter:brightness(1.08);} /* snap */
  68%{opacity:.55; filter:brightness(.98);} /* settle */
  73%{opacity:.92; filter:brightness(1.04);} /* blink */
  100%{opacity:.86; filter:brightness(1.00);} 
}

/* click zones */
#nsc-rack-zones,
#nsc-deck-zones{
  position:absolute;
  inset:0;
  pointer-events:none;
}
#nsc-deck-zones{
  z-index:5;
}
button.nsc-hit{
  position:absolute;
  left:0;
  width:100%;
  opacity:0;
  pointer-events:auto;
  border:0;
  background:transparent;
  z-index:4;
  cursor:pointer;
  transition:opacity .18s ease;
}
button.nsc-hit:hover,
button.nsc-hit:focus-visible{
  opacity:1;
  outline:none;
  background:
    linear-gradient(135deg, var(--glow) 0%, transparent 40%),
    linear-gradient(315deg, var(--glow2) 0%, transparent 40%);
}
button.nsc-hit-active{
  opacity:1;
  border-left:2px solid var(--accent);
  animation:nsc_bay_active_pulse 2.4s ease-in-out infinite;
}
@keyframes nsc_bay_active_pulse{
  0%,100%{ box-shadow:inset 0 0 12px var(--glow2), 0 0 8px var(--glow2); }
  50%{ box-shadow:inset 0 0 18px var(--glow), 0 0 14px var(--glow); }
}

/* Portfolio bay glow effect - golden/amber to stand out */
.nsc-bay-glow{
  color:#ffd700 !important;
  text-shadow:
    0 0 8px rgba(255,215,0,0.8),
    0 0 16px rgba(255,215,0,0.6),
    0 0 28px rgba(255,215,0,0.4) !important;
  animation:nsc_bay_glow_pulse 1.8s ease-in-out infinite;
}
@keyframes nsc_bay_glow_pulse{
  0%,100%{ 
    text-shadow:
      0 0 8px rgba(255,215,0,0.8),
      0 0 16px rgba(255,215,0,0.6),
      0 0 28px rgba(255,215,0,0.4);
  }
  50%{ 
    text-shadow:
      0 0 12px rgba(255,215,0,1),
      0 0 24px rgba(255,215,0,0.8),
      0 0 36px rgba(255,215,0,0.5);
  }
}

/* Special LED display for glowing bay */
.nsc-led-glow{
  color:#ffd700;
  text-shadow: 0 0 10px rgba(255,215,0,0.9), 0 0 22px rgba(255,215,0,0.6) !important;
  animation:nsc_led_glow 1.5s ease-in-out infinite;
}
@keyframes nsc_led_glow{
  0%,100%{ opacity:0.85; }
  50%{ opacity:1; }
}
button.nsc-deck-hit{
  position:absolute;
  opacity:0;
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.22);
  border-radius:3px;
  background:rgba(255,255,255,.04);
  z-index:6;
}
button.nsc-deck-hit:hover,
button.nsc-deck-hit:focus{
  opacity:.5;
  border-color:rgba(255,255,255,.48);
  background:rgba(75,244,255,.10);
  outline:none;
}

/* bay label (block text) - LARGER SIZES */
.nsc-baytext{
  color:color-mix(in oklab, var(--fg) 86%, #ffffff 14%);
  font-weight:700;
  letter-spacing:.06em;
  text-shadow:
    0 0 4px rgba(255,255,255,.10),
    0 0 12px var(--glow2);
  animation:none; /* keep labels crisp/legible */
}
.nsc-baytext-top{
  font-size:1.45em;
  opacity:.88;
}
.nsc-baytext-main{
  font-size:1.85em;
  letter-spacing:.10em;
  font-weight:800;
}
.nsc-baytext-underline{
  font-size:1.32em;
  opacity:.90;
}

/* CPU-like theme module (under monitor) */
.nsc-cpu-panel{
  display:none;
  position:relative;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 16px;

  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(620px 120px at 50% 12%, rgba(255,255,255,.06), rgba(0,0,0,0) 64%),
    rgba(0,0,0,.20);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 28px rgba(0,0,0,.55),
    0 0 18px rgba(75,244,255,.06);

  pointer-events:auto;
  z-index:8;
}

.nsc-cpu-themes,
.nsc-cpu-level{
  display:flex;
  gap:14px;
  align-items:center;
}

button.nsc-cpu-btn{
  appearance:none;
  width:60px;
  height:60px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(18px 18px at 35% 30%, rgba(255,255,255,.10), rgba(0,0,0,0) 70%),
    rgba(0,0,0,.35);
  box-shadow:
    inset 0 10px 16px rgba(0,0,0,.42),
    inset 0 -6px 12px rgba(255,255,255,.03),
    0 0 0 rgba(0,0,0,0);
  cursor:pointer;
}
button.nsc-cpu-btn:focus{ outline:2px solid rgba(255,255,255,.25); outline-offset:3px; }
button.nsc-cpu-btn:hover{ border-color:rgba(255,255,255,.32); }
button.nsc-cpu-btn:active{ transform: translateY(1px); }

/* each theme button can have its own accent via --btn-accent */
button.nsc-cpu-btn[data-kind="theme"]{
  --btn-accent: var(--accent);
}
button.nsc-cpu-btn[data-kind="theme"].active{
  border-color: color-mix(in oklab, var(--btn-accent) 60%, rgba(255,255,255,.55));
  box-shadow:
    0 0 14px color-mix(in oklab, var(--btn-accent) 40%, transparent),
    0 0 36px color-mix(in oklab, var(--btn-accent) 24%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
button.nsc-cpu-btn[data-kind="theme"].active::after{
  content:"";
  display:block;
  width:10px; height:10px;
  margin:10px auto 0;
  border-radius:50%;
  background: var(--btn-accent);
  box-shadow:
    0 0 10px color-mix(in oklab, var(--btn-accent) 50%, transparent),
    0 0 24px color-mix(in oklab, var(--btn-accent) 28%, transparent);
  opacity:.9;
}

/* intensity buttons: unlabeled, smaller */
button.nsc-cpu-btn[data-kind="level"]{
  width:46px;
  height:46px;
  border-radius:12px;
  position:relative;
}
button.nsc-cpu-btn[data-kind="level"]::before{
  content: attr(data-level);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--font-ui);
  font-size:11px;
  color:rgba(255,255,255,.78);
  text-shadow:0 0 10px rgba(255,255,255,.15);
  pointer-events:none;
}
button.nsc-cpu-btn[data-kind="level"].active{
  border-color: rgba(255,255,255,.45);
  box-shadow:
    0 0 10px rgba(255,255,255,.10),
    0 0 18px var(--glow);
}

/* legacy theme keys (kept hidden) */
#nsc-theme-keys{ display:none; }

/* nerd link (hide — reduce decorative text outside monitor) */
#nsc-nerd-link{ display:none; }

/* overlay */
#nsc-overlay{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:
    radial-gradient(900px 520px at 50% 45%, rgba(255,255,255,.06), rgba(0,0,0,0) 62%),
    rgba(0,0,0,.70);
  backdrop-filter: blur(0.6px);
}
#nsc-overlay::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.28;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.06), rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
  animation:nsc_overlay_scan 1.8s linear infinite;
}
@keyframes nsc_overlay_scan{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(12px); }
}
#nsc-overlay pre{
  position:relative;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.56);
  background:
    radial-gradient(520px 220px at 50% 10%, rgba(75,244,255,.12), rgba(0,0,0,0) 66%),
    rgba(0,0,0,.16);
  color:var(--fg);
  text-shadow:0 0 12px rgba(255,255,255,.12), 0 0 26px var(--glow2);
  box-shadow:
    0 0 22px rgba(75,244,255,.10),
    0 0 44px rgba(75,244,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.08);
  animation:nsc_overlay_glow 2.8s ease-in-out infinite;
}
@keyframes nsc_overlay_glow{
  0%,100%{ filter:saturate(1.0) brightness(1.0); }
  50%{ filter:saturate(1.10) brightness(1.05); }
}

/* organic glitch layers (restrained) */
.nsc-noise::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  opacity:var(--noise, .09);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation:nsc_noise_drift var(--noise-speed, 7s) steps(2,end) infinite;
}
@keyframes nsc_noise_drift{
  0%{ transform:translate3d(0,0,0); filter:contrast(1); }
  100%{ transform:translate3d(0,-2px,0); filter:contrast(1.05); }
}
.nsc-scan::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  opacity:var(--scan, .10);
  mix-blend-mode:soft-light;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.06), rgba(255,255,255,.06) 1px,
    rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
  animation:nsc_scan_roll var(--scan-speed, 9s) linear infinite;
}
@keyframes nsc_scan_roll{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(18px); }
}

/* text adventure terminal overlay */
.nsc-term-input{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  box-sizing:border-box;
  padding:4px 8px;
  border:0;
  outline:none;
  background:rgba(0,0,0,.20);
  color:inherit;
  font:inherit;
  border-top:1px solid rgba(255,255,255,.08);
  display:none;
}
body.nsc-adventure .nsc-term-input{ display:block; }
body.nsc-adventure #nsc-monitor-screen-clip{ pointer-events:auto; }
body.nsc-adventure #nsc-monitor-screen{
  display:block;
  width:calc(100% / var(--monitor-scale));
  height:calc(100% / var(--monitor-scale));
  box-sizing:border-box;
  padding-bottom:2.2em;
  overflow-y:auto;
  overflow-x:hidden;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 3c: CRT monitor effects — vignette + phosphor bloom */
#nsc-monitor-screen-clip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}
#nsc-monitor-screen-clip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:9;
  background:radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.04) 0%, transparent 60%);
  mix-blend-mode:screen;
}

/* 3d: Terminal input polish */
body.nsc-adventure .nsc-term-input{
  color:var(--accent);
  text-shadow:0 0 8px var(--glow), 0 0 16px var(--glow2);
  background:rgba(0,0,0,.35);
  border-top:1px solid rgba(75,244,255,.15);
  caret-color:var(--accent);
  transition:border-color .2s ease, box-shadow .2s ease;
}
body.nsc-adventure .nsc-term-input::placeholder{
  color:rgba(75,244,255,.30);
  text-shadow:none;
}
body.nsc-adventure .nsc-term-input:focus{
  border-top-color:rgba(75,244,255,.35);
  box-shadow:0 -2px 12px var(--glow2);
}

/* 3e: Theme transition animation (CRT re-tuning) */
body.nsc-theme-shift{
  animation:nsc_theme_flash .28s ease-out;
}
@keyframes nsc_theme_flash{
  0%{ filter:brightness(1.4) saturate(0.6); opacity:.85; }
  40%{ filter:brightness(1.1) saturate(0.85); opacity:.92; }
  100%{ filter:brightness(1) saturate(1); opacity:1; }
}

/* 3f: Route change glitch — maps/cassette 2026 — amplified */
.nsc-monitor-wrap.nsc-glitch{
  animation:nsc_route_glitch .14s steps(5, end);
}
@keyframes nsc_route_glitch{
  0%  { filter:brightness(2.2) hue-rotate(0deg)   saturate(0.3) drop-shadow(0 0 24px var(--glow)); transform:translateX(0); }
  15% { filter:brightness(0.4) hue-rotate(18deg)  saturate(2.2) drop-shadow(3px 0 8px var(--accent)); transform:translateX(-4px); }
  30% { filter:brightness(2.8) hue-rotate(-12deg) saturate(0.1) drop-shadow(-3px 0 14px var(--accent)); transform:translateX(3px); }
  50% { filter:brightness(0.6) hue-rotate(6deg)   saturate(3.0) drop-shadow(0 4px 18px var(--glow)); transform:translateX(-2px) scaleX(1.004); }
  70% { filter:brightness(1.8) hue-rotate(-4deg)  saturate(0.6) drop-shadow(2px 0 6px var(--glow2)); transform:translateX(1px); }
  85% { filter:brightness(0.9) hue-rotate(2deg)   saturate(1.3); transform:translateX(0); }
  100%{ filter:brightness(1)   hue-rotate(0deg)   saturate(1)   drop-shadow(0 8px 18px rgba(0,0,0,.30)); transform:translateX(0); }
}

/* conn panel open — deck CONN/VAULT button glow */
.nsc-monitor-wrap.nsc-conn-open{
  box-shadow: 0 0 32px var(--glow), inset 0 0 12px rgba(255,255,255,.04);
}

/* extra chromatic aberration on strong glitch */
@keyframes nsc_chroma_flash{
  0%,100%{ text-shadow:none; }
  20%{ text-shadow:-3px 0 rgba(255,0,80,.55), 3px 0 rgba(0,200,255,.55); }
  50%{ text-shadow:4px 0 rgba(255,0,80,.4), -4px 0 rgba(0,200,255,.4); }
  80%{ text-shadow:-1px 0 rgba(255,0,80,.3), 1px 0 rgba(0,200,255,.3); }
}
.nsc-monitor-wrap.nsc-glitch #nsc-monitor-screen{
  animation:nsc_chroma_flash .14s steps(5,end);
}

/* scan-line density boost during glitch */
.nsc-monitor-wrap.nsc-glitch::after{
  opacity:0.55 !important;
  animation-duration:0.08s !important;
}

/* 3g: Screen content fade */
#nsc-monitor-screen{
  transition:opacity .15s ease;
}
#nsc-monitor-screen.nsc-screen-fade{
  opacity:0;
}

/* 3h: Banner breathe animation */
#nsc-banner{
  animation:nsc_banner_breathe 6s ease-in-out infinite;
}
@keyframes nsc_banner_breathe{
  0%,100%{ text-shadow:0 0 14px rgba(255,255,255,.12), 0 0 32px var(--glow2); }
  50%{ text-shadow:0 0 18px rgba(255,255,255,.18), 0 0 42px var(--glow), 0 0 60px var(--glow2); }
}

/* 3i: Mobile media queries - dynamic scaling */
@media (max-height:480px){
  #nsc-banner, #nsc-motto{ display:none; }
}
@media (max-width:380px){
  #nsc-banner, #nsc-motto{ display:none; }
}
@media (max-width:640px){
  :root{ --banner-fs:8px; --monitor-scale: 2.2; }
}
@media (max-width:800px){
  :root{ --monitor-scale: 1.8; }
}
@media (max-width:1024px){
  :root{ --monitor-scale: 1.6; }
}
@keyframes nsc_crt_flash {0%{filter:brightness(1.4) contrast(1.2);}50%{filter:brightness(0.85) saturate(0.4);}100%{filter:brightness(1);}} .nsc-rack.nsc-crt-flash{animation:nsc_crt_flash 0.08s steps(2,end);} .nsc-monitor-wrap.nsc-conn-open{box-shadow:inset 0 0 28px rgba(100,200,255,.12);} .nsc-monitor-wrap.nsc-conn-open::after{opacity:0.42!important;}