/* Layered CRT/VHS overlay — shared across every page (not just the ACP).
   Intensities reduced from the original design mockup: the glitch bars,
   RGB shift, and VHS noise/flicker were too loud for extended use, so
   their peak opacities are toned down and jump speeds slowed a little. */

@keyframes ledPulse { 0%,100% { opacity:1; box-shadow:0 0 6px #A700FF, 0 0 16px #A700FF; } 50% { opacity:.25; box-shadow:0 0 2px #A700FF; } }
@keyframes scan { 0% { transform: translateY(-30vh); } 100% { transform: translateY(130vh); } }
@keyframes flicker { 0%,97%,100% { opacity:1; } 98% { opacity:.55; } 99% { opacity:.85; } }
@keyframes lineDrift { 0% { background-position-y: 0px; } 100% { background-position-y: 4px; } }
@keyframes crtFlicker { 0%,100% { opacity:.16; } 12% { opacity:.19; } 22% { opacity:.15; } 47% { opacity:.18; } 63% { opacity:.15; } 81% { opacity:.18; } }
@keyframes glitchBar { 0%,100% { opacity:0; transform: translateY(18vh) scaleY(1); }
  41% { opacity:0; }
  42% { opacity:.12; transform: translateY(62vh) scaleY(2.4); }
  44% { opacity:0; }
  68% { opacity:.09; transform: translateY(31vh) scaleY(1.6); }
  70% { opacity:0; }
  86% { opacity:.11; transform: translateY(78vh) scaleY(3); }
  88% { opacity:0; } }
@keyframes rgbShift { 0%,100% { transform: translateX(0); opacity:.04; }
  43% { transform: translateX(0); opacity:.04; }
  44% { transform: translateX(-1px); opacity:.09; }
  46% { transform: translateX(1px); opacity:.08; }
  47% { transform: translateX(0); opacity:.04; }
  85% { transform: translateX(0); opacity:.04; }
  86% { transform: translateX(1px); opacity:.07; }
  88% { transform: translateX(0); opacity:.04; } }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-3%,-2%); } 80% { transform: translate(4%,4%); } 100% { transform: translate(0,0); } }
@keyframes rollBar { 0% { transform: translateY(-40vh); } 100% { transform: translateY(140vh); } }
@keyframes vhsJump { 0% { transform: translate(0,0); } 10% { transform: translate(-1%,-3%); } 20% { transform: translate(1.5%,2%); } 30% { transform: translate(-2.5%,1%); } 40% { transform: translate(2%,-1.5%); } 50% { transform: translate(-.5%,2.5%); } 60% { transform: translate(2.5%,.5%); } 70% { transform: translate(-2%,-2%); } 80% { transform: translate(1%,3%); } 90% { transform: translate(-1.5%,-.5%); } 100% { transform: translate(0,0); } }
@keyframes vhsFlicker { 0% { opacity:.025; } 14% { opacity:.05; } 27% { opacity:.015; } 38% { opacity:.06; } 52% { opacity:.03; } 61% { opacity:.07; } 73% { opacity:.02; } 84% { opacity:.045; } 92% { opacity:.03; } 100% { opacity:.025; } }
@keyframes vhsBand { 0%,100% { transform: translateY(112vh); opacity:.09; } 100% { transform: translateY(-20vh); } }
@keyframes vhsDrop { 0%,100% { opacity:.015; } 30% { opacity:.04; } 55% { opacity:.01; } 78% { opacity:.03; } }

.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}
#tv-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: .05;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
.crt-scanlines {
  position: absolute;
  inset: -10px;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,.45) 2px, rgba(0,0,0,.45) 3px);
  background-size: 100% 4px;
  animation: lineDrift 1.6s linear infinite, crtFlicker 4.2s steps(1,end) infinite;
}
.crt-rgb {
  position: absolute;
  inset: -10px;
  background-image: repeating-linear-gradient(90deg, rgba(255,234,0,.10) 0px, rgba(167,0,255,.08) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 3px);
  mix-blend-mode: screen;
  animation: rgbShift 5.3s steps(1,end) infinite;
}
.crt-rollbar {
  position: absolute;
  left: 0; right: 0;
  height: 26vh;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(200,200,230,.02) 45%, rgba(255,255,255,.03) 55%, rgba(255,255,255,0) 100%);
  animation: rollBar 9s linear infinite;
}
.crt-scan {
  position: absolute;
  left: 0; right: 0;
  height: 130px;
  background: linear-gradient(180deg, rgba(167,0,255,0) 0%, rgba(167,0,255,.03) 50%, rgba(167,0,255,0) 100%);
  animation: scan 6s linear infinite;
}
.crt-glitchbar {
  position: absolute;
  left: -6%; right: -6%;
  height: 8px;
  background: linear-gradient(90deg, rgba(255,234,0,.55), rgba(167,0,255,.5), rgba(255,234,0,.55));
  mix-blend-mode: screen;
  filter: blur(.4px);
  animation: glitchBar 3.7s steps(1,end) infinite;
}
.crt-glitchbar-alt {
  left: -8%; right: -8%;
  height: 3px;
  background: rgba(230,230,242,.22);
  mix-blend-mode: overlay;
  animation: glitchBar 5.9s steps(1,end) infinite reverse;
}
.crt-grain {
  position: absolute;
  inset: -20%;
  opacity: .015;
  background-image: radial-gradient(rgba(255,255,255,.9) .5px, rgba(0,0,0,0) .5px);
  background-size: 3px 3px;
  animation: grain .7s steps(1,end) infinite;
}
.crt-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.32) 100%);
}
.crt-vignette-edges {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 150% 62% at 50% -14%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 52%),
    radial-gradient(ellipse 150% 62% at 50% 114%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,0) 52%),
    radial-gradient(ellipse 58% 150% at -12% 50%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.24) 30%, rgba(0,0,0,0) 48%),
    radial-gradient(ellipse 58% 150% at 112% 50%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.24) 30%, rgba(0,0,0,0) 48%);
}
.crt-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(128deg, rgba(230,230,242,.09) 0%, rgba(230,230,242,.03) 22%, rgba(0,0,0,0) 46%);
}
.crt-frame {
  position: absolute;
  inset: -2px;
  box-shadow: inset 0 0 26px 10px rgba(0,0,0,.5), inset 0 0 90px 24px rgba(0,0,0,.28);
}
@media (min-width: 701px) {
  .crt-vignette {
    background: radial-gradient(120% 85% at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  }
  .crt-vignette-edges {
    background:
      radial-gradient(ellipse 150% 62% at 50% -14%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 52%),
      radial-gradient(ellipse 150% 62% at 50% 114%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 52%),
      radial-gradient(ellipse 58% 150% at -12% 50%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,0) 48%),
      radial-gradient(ellipse 58% 150% at 112% 50%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,0) 48%);
  }
  .crt-frame {
    box-shadow: inset 0 0 26px 10px rgba(0,0,0,.85), inset 0 0 90px 24px rgba(0,0,0,.5);
  }
}
.vhs-noise {
  position: absolute;
  inset: -30%;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: vhsJump .45s steps(1,end) infinite, vhsFlicker 1.4s steps(1,end) infinite;
}
.vhs-noise-alt {
  mix-blend-mode: color-dodge;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.35 0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23m)' opacity='0.3'/></svg>");
  background-size: 160px 160px;
  animation: vhsJump .32s steps(1,end) infinite reverse, vhsDrop 2.8s steps(1,end) infinite;
}
.vhs-band {
  position: absolute;
  left: 0; right: 0;
  height: 64px;
  mix-blend-mode: screen;
  opacity: .09;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(230,230,242,.10) 35%, rgba(255,234,0,.10) 55%, rgba(0,0,0,0));
  background-image: repeating-linear-gradient(180deg, rgba(230,230,242,.14) 0px, rgba(0,0,0,0) 2px, rgba(255,234,0,.10) 3px, rgba(0,0,0,0) 5px);
  animation: vhsBand 15s linear infinite;
}