/* DAJAI.IO — Mission Control */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
  --bg: #050304;
  --bg-2: #0a0608;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.04);
  --ink: #f5f1ea;
  --dim: rgba(245,241,234,0.5);
  --faint: rgba(245,241,234,0.28);
  --crimson: #ff2d44;
  --amber: #ffb020;
  --plasma: #b6ff2d;
  --hot: #ff5b35;
  --serif: 'Instrument Serif', serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--mono);
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: crosshair;
  background:
    radial-gradient(ellipse at 70% -20%, rgba(255,45,68,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 80%, rgba(255,176,32,0.08) 0%, transparent 50%),
    var(--bg);
}

/* =========================================================================
   GRID OVERLAY — the entire page sits on a fixed 24-column grid that's
   visible at all times. This is the "instrument panel" texture.
   ========================================================================= */
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
}

/* CRT scanlines, subtle */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* Vignette */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 240px rgba(0,0,0,0.9);
}

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.italic { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.mono  { font-family: var(--mono); }

/* === Tile / module === */
.module {
  position: relative;
  background: rgba(8,5,7,0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px) saturate(120%);
}
.module-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.module-hd > * { white-space: nowrap; }
.module-hd > *:last-child { text-align: right; opacity: 0.7; }
.module-hd .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--plasma);
  box-shadow: 0 0 10px var(--plasma);
  animation: pulse-dot 1.5s ease-in-out infinite;
  margin-right: 8px;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.module-bd { padding: 14px; }

/* corner ticks */
.ticks::before, .ticks::after,
.ticks > .tl, .ticks > .tr {
  content: ''; position: absolute; width: 8px; height: 8px;
  border: 1px solid var(--crimson);
}
.ticks::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ticks::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.ticks > .tl { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.ticks > .tr { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

/* =========================================================================
   TYPE
   ========================================================================= */
.label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dim);
}
.label-crimson { color: var(--crimson); }
.label-amber { color: var(--amber); }
.label-plasma { color: var(--plasma); }

.huge {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(120px, 18vw, 320px);
  line-height: 0.85; letter-spacing: -0.045em;
}

/* =========================================================================
   LIVE READOUTS
   ========================================================================= */
.readout-num {
  font-family: var(--mono); font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.01em;
}

.flicker { animation: flicker 4s linear infinite; }
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}

.tape-loop {
  background-image: repeating-linear-gradient(90deg, var(--crimson) 0 8px, transparent 8px 16px);
  height: 2px;
}

/* =========================================================================
   BUTTONS — minimal terminal-style
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
  cursor: crosshair; transition: all 0.15s;
}
.btn:hover { background: rgba(255,45,68,0.08); border-color: var(--crimson); color: var(--crimson); }
.btn-prime { background: var(--crimson); color: #000; border-color: var(--crimson); font-weight: 700; }
.btn-prime:hover { background: #fff; color: #000; border-color: #fff; }
.btn-amber { border-color: rgba(255,176,32,0.4); color: var(--amber); }
.btn-amber:hover { background: rgba(255,176,32,0.1); border-color: var(--amber); color: var(--amber); }

/* =========================================================================
   FREQUENCY MAP — the main interactive piece
   ========================================================================= */
.freq-cell {
  position: relative;
  cursor: crosshair;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.freq-cell:hover {
  transform: scaleY(1.6) translateY(-10px);
  z-index: 2;
}
.freq-cell.active {
  transform: scaleY(1.8) translateY(-14px);
}

/* =========================================================================
   TRACK ROW (terminal style)
   ========================================================================= */
.row {
  display: grid;
  grid-template-columns: 36px 28px 1fr 80px 60px 60px 50px;
  gap: 12px;
  padding: 8px 12px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  font-size: 11px;
  cursor: crosshair;
  transition: background 0.1s;
}
.row:hover { background: rgba(255,45,68,0.05); }
.row.now { background: rgba(255,45,68,0.1); color: var(--crimson); }
.row.now .num { color: var(--crimson); }
.row .num { color: var(--faint); font-family: var(--mono); }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes scroll-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.scroll-feed {
  display: flex; flex-direction: column;
  animation: scroll-up 40s linear infinite;
}

@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px currentColor); }
  50% { filter: drop-shadow(0 0 24px currentColor); }
}
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* =========================================================================
   PLAYHEAD CURSOR (replaces system cursor)
   ========================================================================= */
.playhead {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 1px; height: 100%;
  background: var(--crimson);
  top: 0; left: 0;
  opacity: 0.4;
  mix-blend-mode: screen;
}
.playhead::before {
  content: '';
  position: absolute; top: 0; left: -3px;
  width: 7px; height: 7px;
  background: var(--crimson);
  border-radius: 50%;
  box-shadow: 0 0 16px var(--crimson);
}
.playhead-h {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 100%; height: 1px;
  background: var(--crimson);
  left: 0;
  opacity: 0.25;
  mix-blend-mode: screen;
}

/* =========================================================================
   MISC
   ========================================================================= */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.divider-c {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--crimson), transparent);
}
.divider-a {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}

a { color: inherit; text-decoration: none; }

/* hide scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,45,68,0.3); }
::-webkit-scrollbar-thumb:hover { background: var(--crimson); }