/* ── SCANLINES.CSS — CRT overlay, phosphor flicker, vignette ── */

/* ── CRT SCANLINES OVERLAY ── */
#scanline-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.10) 2px,
    rgba(0, 0, 0, 0.10) 4px
  );
}

/* ── PHOSPHOR FLICKER on entire app ── */
@keyframes flicker {
  0%   { opacity: 1.0; }
  8%   { opacity: 0.98; }
  15%  { opacity: 1.0; }
  40%  { opacity: 0.99; }
  55%  { opacity: 1.0; }
  72%  { opacity: 0.97; }
  80%  { opacity: 1.0; }
  90%  { opacity: 0.99; }
  100% { opacity: 1.0; }
}
#app-container {
  animation: flicker 5s steps(1) infinite;
}

/* ── VIGNETTE on camera panel ── */
#camera-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* ── HORIZONTAL NOISE LINE (random scanline artifact) ── */
@keyframes noiseLine {
  0%   { top: -10%; opacity: 0; }
  5%   { opacity: 0.06; }
  40%  { top: 110%; opacity: 0.04; }
  41%  { opacity: 0; top: -10%; }
  100% { top: -10%; opacity: 0; }
}
#scanline-overlay::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 255, 65, 0.08);
  animation: noiseLine 7s linear infinite;
  pointer-events: none;
}

/* ── PANEL border-radius for screen feel ── */
#camera-panel {
  border-radius: 2px;
}

/* ── GLOW on active landmarks canvas ── */
#overlay-canvas {
  filter: drop-shadow(0 0 2px rgba(0, 255, 65, 0.3));
}