/* Background Beams - Animated SVG beams for light theme */

.background-beams {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.background-beams svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Animated gradient paths */
.beam-path {
  stroke-width: 0.5;
  stroke-opacity: 0.3;
  fill: none;
}

/* Base static grid */
.beam-grid {
  stroke: rgba(58, 122, 98, 0.03); /* forest - very subtle */
  stroke-opacity: 0.05;
  stroke-width: 0.5;
  fill: none;
}

/* Animation keyframes for gradient positions */
@keyframes beamGradient1 {
  0%, 100% { stop-color: rgba(58, 122, 98, 0.4); } /* forest */
  50% { stop-color: rgba(216, 122, 83, 0.4); } /* coral */
}

@keyframes beamGradient2 {
  0%, 100% { stop-color: rgba(216, 122, 83, 0.4); } /* coral */
  50% { stop-color: rgba(89, 166, 224, 0.4); } /* azure */
}

@keyframes beamGradient3 {
  0%, 100% { stop-color: rgba(89, 166, 224, 0.4); } /* azure */
  50% { stop-color: rgba(184, 160, 92, 0.4); } /* butter */
}

/* Gradient offset animations */
@keyframes gradientShift {
  0% {
    offset: 0%;
  }
  50% {
    offset: 50%;
  }
  100% {
    offset: 100%;
  }
}

/* Individual beam animations with different timings */
.beam-1 { animation: beamPulse1 15s ease-in-out infinite; }
.beam-2 { animation: beamPulse2 18s ease-in-out infinite 2s; }
.beam-3 { animation: beamPulse3 20s ease-in-out infinite 4s; }
.beam-4 { animation: beamPulse1 22s ease-in-out infinite 6s; }
.beam-5 { animation: beamPulse2 17s ease-in-out infinite 8s; }

@keyframes beamPulse1 {
  0%, 100% { stroke-opacity: 0.2; }
  50% { stroke-opacity: 0.4; }
}

@keyframes beamPulse2 {
  0%, 100% { stroke-opacity: 0.15; }
  50% { stroke-opacity: 0.35; }
}

@keyframes beamPulse3 {
  0%, 100% { stroke-opacity: 0.25; }
  50% { stroke-opacity: 0.45; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .beam-path {
    stroke-opacity: 0.2;
  }
}