.aurora-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora-gradient {
  position: absolute;
  filter: blur(80px);
  opacity: 0.5;
  animation: aurora-flow 20s ease-in-out infinite;
}

.aurora-gradient-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.8) 0%, transparent 70%);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.aurora-gradient-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, transparent 70%);
  top: 10%;
  right: -10%;
  animation-delay: 7s;
}

.aurora-gradient-3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.8) 0%, transparent 70%);
  bottom: -10%;
  left: 30%;
  animation-delay: 14s;
}

@keyframes aurora-flow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  33% {
    transform: translate(50px, -30px) scale(1.1);
    opacity: 0.7;
  }
  66% {
    transform: translate(-40px, 40px) scale(0.9);
    opacity: 0.6;
  }
}