/* ================= AURORA BACKDROP (persistent, whole page) ================= */
.aurora-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--void);
}
.aurora-field .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.blob.b1 {
  width: 55vw;
  height: 55vw;
  left: -15vw;
  top: -20vh;
  background: radial-gradient(circle, var(--violet), transparent 65%);
  animation: driftA 26s ease-in-out infinite;
}
.blob.b2 {
  width: 60vw;
  height: 60vw;
  right: -20vw;
  top: 10vh;
  background: radial-gradient(circle, var(--teal), transparent 65%);
  animation: driftB 32s ease-in-out infinite;
}
.blob.b3 {
  width: 45vw;
  height: 45vw;
  left: 20vw;
  bottom: -25vh;
  background: radial-gradient(circle, var(--rose), transparent 65%);
  animation: driftC 22s ease-in-out infinite;
}
@keyframes driftA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(6vw, 8vh) scale(1.15);
  }
}
@keyframes driftB {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-8vw, 6vh) scale(0.9);
  }
}
@keyframes driftC {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(4vw, -6vh) scale(1.1);
  }
}

.starfield {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#fff 1px, transparent 1px), radial-gradient(#fff 1px, transparent 1px);
  background-size:
    140px 140px,
    220px 220px;
  background-position:
    0 0,
    60px 90px;
  opacity: 0.25;
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 45%, var(--void) 100%);
}