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

.aurora__layer {
  position: absolute;
  inset: -50%;
  filter: blur(var(--aurora-blur));
  opacity: 0.5;
  will-change: transform;
}

.aurora__layer--1 {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(8, 145, 178, 0.4) 0%, transparent 70%);
  animation: aurora-drift-1 var(--aurora-speed-1) ease-in-out infinite alternate;
}

.aurora__layer--2 {
  background: radial-gradient(ellipse 50% 40% at 40% 60%, rgba(6, 182, 212, 0.35) 0%, transparent 65%);
  animation: aurora-drift-2 var(--aurora-speed-2) ease-in-out infinite alternate;
}

.aurora__layer--3 {
  background: radial-gradient(ellipse 40% 50% at 60% 40%, rgba(125, 211, 252, 0.25) 0%, rgba(132, 204, 22, 0.08) 40%, transparent 70%);
  animation: aurora-drift-3 var(--aurora-speed-3) ease-in-out infinite alternate;
}

@keyframes aurora-drift-1 {
  0% { transform: translate(-10%, -5%) scale(1); }
  50% { transform: translate(5%, 8%) scale(1.1); }
  100% { transform: translate(10%, -3%) scale(1.05); }
}

@keyframes aurora-drift-2 {
  0% { transform: translate(8%, 5%) scale(1.05); }
  50% { transform: translate(-5%, -8%) scale(0.95); }
  100% { transform: translate(-10%, 3%) scale(1.1); }
}

@keyframes aurora-drift-3 {
  0% { transform: translate(5%, -10%) scale(1.1); }
  50% { transform: translate(-8%, 5%) scale(1); }
  100% { transform: translate(-3%, 10%) scale(0.95); }
}

@media (max-width: 768px) {
  .aurora__layer--3 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__layer {
    animation: none;
  }
  .aurora__layer--1 {
    transform: translate(-5%, 0%) scale(1);
  }
  .aurora__layer--2 {
    transform: translate(3%, -3%) scale(1);
  }
  .aurora__layer--3 {
    display: none;
  }
}