/* Base styling for canvas and effects */
/* Container for all background effects to maintain proper stacking */
.background-effects-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ensure it's below all content */
  pointer-events: none; /* Allow clicks to pass through */
  overflow: hidden; /* Contain all effects */
}

/* Canvas for static effect */
#staticCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Scanline effect */
.scanline-new {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: rgba(50, 50, 50, 0.015);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
  animation: scanline-move 2.5s linear infinite;
  z-index: 2; /* Above canvas within container */
}

/* Vignette overlay for darkened edges */
.vignette-new {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1; /* Between canvas and scanline within container */
}

/* Scanline animation */
@keyframes scanline-move {
  0% { top: -20px; }
  100% { top: 100%; }
}

/* Fix for mobile devices */
@media (max-width: 768px) {
  .scanline-new {
    height: 10px;
  }
}