/* ===== ANIMATED BACKGROUND LAYER ===== */
.bg-pulse-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65vw;
  max-width: 800px;
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
  animation: logoPulseBg 4s ease-in-out infinite;
  /* Use the brand neon yellow for drop shadow */
  filter: drop-shadow(0 0 30px rgba(255, 237, 74, 0.5));
}

@keyframes logoPulseBg {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 0.35;
    filter: drop-shadow(0 0 30px rgba(255, 237, 74, 0.6));
  }
  20%, 24%, 55% {
    opacity: 0.05;
    filter: drop-shadow(0 0 5px rgba(255, 237, 74, 0.1));
  }
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Above the logo, below HTML glitch */
  pointer-events: none;
}

/* ===== SCAN LINES OVERLAY ===== */
.scan-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  animation: scanFlicker 8s linear infinite;
}

@keyframes scanFlicker {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.3; }
  75% { opacity: 0.6; }
}



@keyframes static-noise-dance {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -2%); }
  20% { transform: translate(1%, 2%); }
  30% { transform: translate(-1%, 1%); }
  40% { transform: translate(2%, -1%); }
  50% { transform: translate(-2%, 2%); }
  60% { transform: translate(1%, -2%); }
  70% { transform: translate(-1%, -1%); }
  80% { transform: translate(2%, 2%); }
  90% { transform: translate(-2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ===== CRT GHOST VIDEO ===== */
/* Video frames are now drawn directly onto #bg-canvas via ctx.drawImage().
   No separate DOM layer is needed. */

/* Glitch snap — applied to canvas only, never to the whole page */
#bg-canvas.crt-glitch-moment {
  animation: crt-snap 0.15s ease forwards;
}

@keyframes crt-snap {
  0% { filter: hue-rotate(0deg) contrast(1); transform: translateY(0); }
  50% { filter: hue-rotate(90deg) contrast(1.4); transform: translateY(3px); }
  100% { filter: hue-rotate(0deg) contrast(1); transform: translateY(0); }
}

/* ===== CONTENT LAYER (above everything) ===== */
#app {
  position: relative;
  z-index: 10;
}