@keyframes aurora {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.58;
  }
  25% {
    transform: translateY(-20px) rotate(1deg);
    opacity: 0.82;
  }
  50% {
    transform: translateY(10px) rotate(-1deg);
    opacity: 0.68;
  }
  75% {
    transform: translateY(-10px) rotate(0.5deg);
    opacity: 0.62;
  }
}

.aurora-1,
.aurora-2,
.aurora-3 {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  filter: blur(80px);
  mix-blend-mode: screen;
}

.aurora-1 {
  top: -20%;
  left: -10%;
  width: 70%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(78, 205, 196, 0.18) 0%, transparent 70%);
  animation: aurora 20s ease-in-out infinite;
}

.aurora-2 {
  right: -10%;
  bottom: -20%;
  width: 60%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(255, 159, 67, 0.16) 0%, transparent 70%);
  animation: aurora 25s ease-in-out infinite reverse;
}

.aurora-3 {
  top: 40%;
  left: 30%;
  width: 40%;
  height: 40%;
  background: radial-gradient(ellipse, rgba(151, 117, 250, 0.12) 0%, transparent 70%);
  filter: blur(100px);
  animation: aurora 30s ease-in-out infinite;
  animation-delay: -10s;
}

@media (prefers-reduced-motion: reduce) {
  .aurora-1,
  .aurora-2,
  .aurora-3 {
    animation: none;
  }
}