/* ============================================================
  base.css — design tokens, resets, global element styles,
  and the ambient overlays used across the page.
  Every other stylesheet builds on the variables defined here.
  ============================================================ */

:root {
  /* core palette (12 colors total) */
  --color-bg-900: #040504;
  --color-bg-850: #0a0d0a;
  --color-bg-800: #0b100c;
  --color-border-700: #1a221b;
  --color-accent-500: #58d878;
  --color-accent-400: #8dffab;
  --color-accent-600: #3d9c55;
  --color-accent-800: #123c1f;
  --color-text-200: #c3ccc3;
  --color-text-500: #b3beaa;
  --color-split-red: #ff2d55;
  --color-split-cyan: #3cffdc;

  /* core typography (4 fonts total) */
  --font-retro: "VT323", monospace;
  --font-code: "Courier Prime", Courier, monospace;
  --font-humanist: "Inter", system-ui, -apple-system, sans-serif;
  --font-system: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* legacy aliases (kept for compatibility) */
  --bg:        var(--color-bg-900);
  --bg-raise:  var(--color-bg-850);
  --bg-card:   var(--color-bg-800);
  --line:      var(--color-border-700);
  --green:     var(--color-accent-500);   /* phosphor / night-vision green */
  --green-hot: var(--color-accent-400);   /* bright — used sparingly for glows */
  --green-dim: var(--color-accent-600);
  --green-dark:var(--color-accent-800);
  --text:      var(--color-text-200);
  --text-dim:  var(--color-text-500);
  --osd:  var(--font-retro);
  --mono: var(--font-code);
  --sans: var(--font-humanist);

  /* typography roles */
  --font-display: var(--osd);
  --font-ui: var(--mono);
  --font-body: var(--sans);
  --font-supporting: var(--font-system);

  /* semantic UI palette */
  --text-soft: rgba(195, 204, 195, 0.9);
  --bg-glass: rgba(4, 5, 4, 0.88);
  --surface-low: rgba(11, 16, 12, 0.24);
  --surface-mid: rgba(11, 16, 12, 0.62);
  --surface-strong: rgba(8, 13, 9, 0.96);
  --surface-strong-soft: rgba(8, 13, 9, 0.93);
  --surface-chip: rgba(8, 13, 9, 0.48);
  --surface-chip-hover: rgba(12, 24, 15, 0.74);
  --border-soft: rgba(88, 216, 120, 0.12);
  --border-mid: rgba(88, 216, 120, 0.23);
  --border-divider: rgba(88, 216, 120, 0.2);
  --border-highlight: rgba(141, 255, 171, 0.52);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--green); color: #000; }

a { color: var(--green); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* inline green highlight, e.g. <span class="hl">Luau</span> */
.hl { color: var(--green); font-family: var(--mono); font-size: 0.98em; }

/* ============ visual overlays ============ */

/* subtle animated static */
.overlay-noise {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9996;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: noise-jitter 0.4s steps(4) infinite;
}
@keyframes noise-jitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

.overlay-scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9997;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  mix-blend-mode: multiply;
  opacity: .6;
}

.overlay-tracking {
  position: fixed;
  left: 0; right: 0;
  top: -12%;
  height: 9vh;
  pointer-events: none;
  z-index: 9998;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(141, 255, 171, 0.04) 30%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(141, 255, 171, 0.04) 70%,
    transparent
  );
  filter: blur(1px);
  animation: tracking-sweep 13s linear infinite;
}
@keyframes tracking-sweep {
  0%, 78%  { transform: translateY(0);      opacity: 0; }
  80%      { opacity: 1; }
  96%      { transform: translateY(130vh);  opacity: 1; }
  97%, 100%{ transform: translateY(130vh);  opacity: 0; }
}

/* centered vignette that stays fixed while scrolling */
.overlay-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9995;
  background: radial-gradient(
    ellipse 60vw 60vh at 50% 50%,
    transparent 35%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* ============ shared animations ============ */

@keyframes flicker {
  0%, 100% { opacity: 1; }
  3%   { opacity: .8; }
  3.5% { opacity: 1; }
  47%  { opacity: 1; }
  48%  { opacity: .75; }
  49%  { opacity: 1; }
  62%  { opacity: 1; }
  63%  { opacity: .85; }
  64%  { opacity: 1; }
}

@keyframes blink { 50% { opacity: 0; } }

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .overlay-tracking { display: none; }
}