/* Background container */
.gradient-bg {
  transition: opacity 0.25s linear;
  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

/* Common style for all gradient rays */
.gradient-bg .gradient-ray {
  position: absolute;
  border-radius: 50%;
  transition: all 2s ease;

}

/* Ray One - Subtle cool */
.gradient-bg .ray-cool {
  width: 100vh;
  height: 100vh;
  top: 0%;
  left: 25%;
  background: radial-gradient(circle, rgba(54,69,79,1), rgba(0,0,0,0));
  filter: blur(2px);
  animation: driftRayOne 5s ease-in-out infinite;
}

@keyframes driftRayOne {
  0%   { transform: translateX(0px); }
  25%  { transform: translateX(70px); }
  75%  { transform: translateX(-70px); }
  100% { transform: translateX(0px); }
}

@keyframes scanRayOne {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(60px, 0); }
  100% { transform: translate(0, 0); }
}

/* Ray Two - Subtle warm */
.gradient-bg .ray-warm {
  width: 100vh;
  height: 100vh;
  top: 0%;
  left: 25%;
  background: radial-gradient(circle, rgba(120,85,70,1), rgba(0,0,0,0));
  filter: blur(2px);
  animation: driftRayTwo 5s ease-in-out infinite;
}

@keyframes driftRayTwo {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(70px); }
  75%  { transform: translateY(-70px); }
  100% { transform: translateY(0px); }
}

/* Ray Three - Subtle cool blue */
.gradient-bg .ray-blue {
  width: 100vh;
  height: 100vh;
  top: 0%;
  left: 25%;
  background: radial-gradient(circle, rgba(60,90,130,1), rgba(0,0,0,0));
  filter: blur(2px);
  animation: driftRayThree 8s ease-in-out infinite;
}

@keyframes driftRayThree {
  0%   { transform: translateX(0px); }
  25%  { transform: translateX(-70px); }
  75%  { transform: translateX(70px); }
  100% { transform: translateX(0px); }
}

/* Ray Four - Subtle green */
.gradient-bg .ray-green {
  width: 100vh;
  height: 100vh;
  top: 0%;
  left: 25%;
  background: radial-gradient(circle, rgba(50,90,50,1), rgba(0,0,0,0));
  filter: blur(2px);
  animation: driftRayFour 8s ease-in-out infinite;
}

@keyframes driftRayFour {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(-70px); }
  75%  { transform: translateY(70px); }
  100% { transform: translateY(0px); }
}

/* Ray Five - Subtle purple */
.gradient-bg .ray-purple {
  width: 100vh;
  height: 100vh;
  top: 0%;
  left: 25%;
  background: radial-gradient(circle, rgba(90,70,110,1), rgba(0,0,0,0));
  filter: blur(2px);
  animation: driftRayFive 8s ease-in-out infinite;
}

@keyframes driftRayFive {
  0%   { transform: translateX(0px); }
  50%  { transform: translateX(0px); }
  100% { transform: translateX(0px); }
}









/* Mobile override */
@media (max-width: 768px) {
  .gradient-bg .ray-cool,
  .gradient-bg .ray-warm,
  .gradient-bg .ray-blue,
  .gradient-bg .ray-green,
  .gradient-bg .ray-purple {
    left: -25%;
    top:15%;
    height: 70vh;
    width: 70vh;
  }
}