/* sourced.me — radar scope holding page. All static visuals; page is complete without JS. */

:root {
  --bg: #030705;
  --phos: #2dff7c;
  --phos-mid: #14b85c;
  --phos-dim: #0e5c33;
  --phos-faint: #093d22;
  --text: #c8ecd6;
  --muted: #6f9c84;
  --bright: #eafff2;
}

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

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  overflow: hidden;
}

::selection {
  background: var(--phos-dim);
  color: var(--bright);
}

:focus-visible {
  outline: 1px solid var(--phos);
  outline-offset: 2px;
}

/* ---- main + scope ---- */

main {
  position: fixed;
  inset: 0;
}

.scope {
  position: absolute;
  inset: 0;
}

#radar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

/* darken the display center so the wordmark reads above the chart */
.scope::before {
  content: "";
  position: absolute;
  inset: 18% 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(3, 7, 5, 0.85) 0%, rgba(3, 7, 5, 0.55) 55%, transparent 75%);
  z-index: 1;
  pointer-events: none;
}

.scope-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 18px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- wordmark + glitch ---- */

.wordmark {
  position: relative;
  font-size: clamp(2rem, 7.5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--bright);
  text-shadow: 0 0 12px rgba(45, 255, 124, 0.55), 0 0 42px rgba(45, 255, 124, 0.22);
  animation: flicker 13s infinite steps(1);
}

@keyframes flicker {
  0%, 90.9%, 93.1%, 100% { opacity: 1; }
  91.2% { opacity: 0.55; }
  92.4% { opacity: 0.75; }
  92.8% { opacity: 0.4; }
}

.wordmark::before,
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.wordmark::before {
  animation: glitch-a 13s infinite steps(1);
}

.wordmark::after {
  animation: glitch-b 13s infinite steps(1);
}

@keyframes glitch-a {
  0%, 91% { opacity: 0; }
  91.2% {
    opacity: 0.9;
    transform: translate(-3px, 1px);
    clip-path: inset(12% 0 58% 0);
    text-shadow: 2px 0 var(--phos);
  }
  92% {
    opacity: 0.9;
    transform: translate(2px, -1px);
    clip-path: inset(52% 0 18% 0);
    text-shadow: -2px 0 var(--phos);
  }
  93%, 100% { opacity: 0; }
}

@keyframes glitch-b {
  0%, 91.4% { opacity: 0; }
  91.6% {
    opacity: 0.85;
    transform: translate(3px, -1px);
    clip-path: inset(38% 0 34% 0);
    text-shadow: -2px 0 var(--phos-mid);
  }
  92.3% {
    opacity: 0.85;
    transform: translate(-2px, 2px);
    clip-path: inset(4% 0 72% 0);
    text-shadow: 2px 0 var(--phos-mid);
  }
  93.2%, 100% { opacity: 0; }
}

/* ---- CRT overlays ---- */

.crt {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px);
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.6) 100%);
}