/* Shared CRT bits (mobile focus). Keep tiny + reusable. */

:root{
  --crt-cyan:#00f3ff;
  --crt-magenta:#bc13fe;
  --crt-bg:#07080a;
  --crt-panel:rgba(0,0,0,.55);
  --interference:0;
}

body{
  background:var(--crt-bg);
}

/* overlays */
.crt-noise,
.crt-scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
}

.crt-noise{
  opacity:calc(.06 + var(--interference) * .10);
  background:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="1"/%3E%3C/svg%3E');
}

.crt-scanlines{
  opacity:.85;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.22) 50%,
    rgba(0,0,0,0.22)
  );
  background-size:100% 4px;
  mix-blend-mode:overlay;
}

.crt-scanlines::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(18,16,16,0.10);
  opacity:0;
  animation:crtFlicker .15s infinite;
}

@keyframes crtFlicker{
  0% { opacity: 0.02795 }
  5% { opacity: 0.04174 }
  10% { opacity: 0.02111 }
  15% { opacity: 0.05316 }
  20% { opacity: 0.01636 }
  25% { opacity: 0.05739 }
  30% { opacity: 0.02890 }
  35% { opacity: 0.05832 }
  40% { opacity: 0.02329 }
  45% { opacity: 0.03842 }
  50% { opacity: 0.01918 }
  55% { opacity: 0.04612 }
  60% { opacity: 0.01424 }
  65% { opacity: 0.05615 }
  70% { opacity: 0.03960 }
  75% { opacity: 0.04712 }
  80% { opacity: 0.01314 }
  85% { opacity: 0.05608 }
  90% { opacity: 0.02142 }
  95% { opacity: 0.06649 }
  100% { opacity: 0.01832 }
}

/* glitch hook */
.glitch-burst{
  animation:glitchEffect .4s cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes glitchEffect{
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-3px, 3px); filter: hue-rotate(90deg) invert(0.15); }
  40% { transform: translate(3px, -3px); filter: hue-rotate(-90deg) contrast(1.8); }
  60% { transform: translate(-3px, 0); filter: hue-rotate(45deg) invert(0.1); }
  80% { transform: translate(3px, 0); filter: blur(1.5px); }
  100% { transform: translate(0); filter: none; }
}