/* 1. RESET & BASICS */
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden; /* Prevents scrollbars if animations go off-screen */
}

/* 2. THE BACKGROUND LAYER (Image + Bloom) */
.retro-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* --- PUT YOUR IMAGE URL HERE --- */
  background-image: url('/koi_.png');
  
  /* Scaling settings */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* THE BLOOM EFFECT */
  /* This makes the image look soft and glowing */
  filter: contrast(1.2) saturate(1.2) blur(0.75px);
  
  z-index: 1; /* Sits at the bottom */
}

/* 3. THE VHS OVERLAY CONTAINER (Vignette) */
.vhs-fuzz {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 9999; /* Sits on top of everything */

  /* VIGNETTE: Dark corners */
  background: radial-gradient(
    circle, 
    rgba(0,0,0,0) 60%, 
    rgba(0,0,0,1) 100%
  );
}

/* 4. NOISE TEXTURE (::before) */
.vhs-fuzz::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Connects to the HTML SVG */
  filter: url(#noiseFilter);
  opacity: 0.25; /* Adjust noise intensity here */
  
  /* Jitter animation */
  animation: static-noise 0.1s infinite;
}

/* 5. SCANLINES (::after) */
.vhs-fuzz::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* The Lines Pattern */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.25)
  );
  background-size: 100% 6px; /* Line thickness */
  
  /* Rolling Animation */
  animation: roll 70s infinite linear;
}

/* 6. ANIMATIONS */

/* Noise Jitter */
@keyframes static-noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-10%, 5%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 10%); }
  80% { transform: translate(-15%, 0); }
  90% { transform: translate(10%, 5%); }
}

/* Scanline Roll */
@keyframes roll {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}