/* Gradient System */

.gradient-field {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  background: linear-gradient(
    var(--gradient-angle),
    var(--gradient-color-1) 0%,
    var(--gradient-color-2) 50%,
    var(--gradient-color-3) 100%
  );
  background-size: 200% 200%;
  animation: gradient-shift var(--gradient-speed) ease-in-out infinite;
  transition: background 2s ease-in-out;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Grain Overlay */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--grain-opacity);
  z-index: var(--z-glitch);
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  background-repeat: repeat;
  mix-blend-mode: overlay;
  animation: grain-shift 8s steps(10) infinite;
}

@keyframes grain-shift {
  0%, 100% { 
    transform: translate(0, 0); 
  }
  10% { 
    transform: translate(-5%, -10%); 
  }
  20% { 
    transform: translate(-15%, 5%); 
  }
  30% { 
    transform: translate(7%, -25%); 
  }
  40% { 
    transform: translate(-5%, 25%); 
  }
  50% { 
    transform: translate(15%, 10%); 
  }
  60% { 
    transform: translate(15%, 0%); 
  }
  70% { 
    transform: translate(0%, 15%); 
  }
  80% { 
    transform: translate(3%, 35%); 
  }
  90% { 
    transform: translate(-10%, 10%); 
  }
}

/* Vignette Effect */
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-glitch);
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}