/* ============ CRT OVERLAY — tube glass over everything ============ */
/* Phase 1 minimal set: scanlines + vignette + grain (blueprint §4.2 ①②④) */

#crt {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9990;
}

/* scanlines + slot-mask RGB stripes */
.crt-scanlines {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .16) 0px, rgba(0, 0, 0, .16) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(255, 0, 60, .024) 0 1px,
      rgba(0, 255, 80, .019) 1px 2px,
      rgba(0, 80, 255, .024) 2px 3px);
  mix-blend-mode: multiply;
}

/* tube vignette + curved-glass corners */
.crt-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 118% 112% at 50% 48%,
      transparent 52%,
      rgba(0, 0, 0, .18) 78%,
      rgba(0, 0, 0, .6) 96%,
      rgba(0, 0, 0, .85) 100%);
  box-shadow:
    inset 0 0 110px rgba(0, 0, 0, .5),
    inset 0 0 34px rgba(0, 0, 0, .35);
  border-radius: 3.4vmin;
}

/* animated grain — inline SVG turbulence noise */
.crt-grain {
  position: absolute; inset: -60px;
  opacity: .075;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0.6 0.6 0 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-24px, 14px); }
  50%  { transform: translate(18px, -20px); }
  75%  { transform: translate(-10px, -12px); }
  100% { transform: translate(0, 0); }
}

/* phone: effects dialed down */
@media (max-width: 700px) {
  .crt-scanlines {
    background: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .10) 0px, rgba(0, 0, 0, .10) 1px,
      transparent 1px, transparent 3px);
  }
  .crt-vignette { border-radius: 0; box-shadow: inset 0 0 60px rgba(0, 0, 0, .3); }
}

@media (prefers-reduced-motion: reduce) {
  .crt-grain { animation: none; }
}