/* ============================================
   CRT / Old Monitor Effect — Full Viewport
   ============================================ */

/* CRT overlay wrapper — sits on top of everything */
#crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}

/* Scanlines */
#crt-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* Vignette */
#crt-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Pixel noise layer */
#crt-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: crt-noise-anim 0.12s steps(3) infinite;
}

@keyframes crt-noise-anim {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2px, 1px); }
  66%  { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

/* Screen flicker */
#crt-flicker {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(255, 255, 255, 0.015);
  animation: crt-flicker-anim 0.09s steps(2) infinite;
  pointer-events: none;
}

@keyframes crt-flicker-anim {
  0%   { opacity: 1; }
  49%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Horizontal scan line sweep */
#crt-scanswipe {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  background-size: 100% 40px;
  animation: crt-scanswipe-anim 8s linear infinite;
  pointer-events: none;
}

@keyframes crt-scanswipe-anim {
  0%   { background-position: 0 -40px; }
  100% { background-position: 0 100vh; }
}

/* Slight green phosphor tint — very subtle */
#crt-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(20, 240, 120, 0.012);
  pointer-events: none;
}

/* ============================================
   Mobile: hide CRT effect (desktop-only feel)
   ============================================ */
@media (max-width: 767px) {
  #crt-overlay {
    display: none;
  }
}