#starfield-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: radial-gradient(ellipse at 50% -10%, #150f30 0%, var(--color-bg-deep) 55%, #05040c 100%);
}

.nebula {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.nebula__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}

.nebula__blob--1 {
  width: 42vw;
  height: 42vw;
  top: -8vw;
  left: -6vw;
  background: radial-gradient(circle, var(--color-purple) 0%, transparent 70%);
  animation: drift-a 46s ease-in-out infinite alternate;
}

.nebula__blob--2 {
  width: 38vw;
  height: 38vw;
  top: 30vh;
  right: -10vw;
  background: radial-gradient(circle, var(--color-pink) 0%, transparent 70%);
  animation: drift-b 58s ease-in-out infinite alternate;
}

.nebula__blob--3 {
  width: 34vw;
  height: 34vw;
  bottom: -12vw;
  left: 20vw;
  background: radial-gradient(circle, var(--color-blue) 0%, transparent 72%);
  opacity: 0.35;
  animation: drift-c 52s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(6vw, 8vh) scale(1.12);
  }
}

@keyframes drift-b {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-7vw, 6vh) scale(1.08);
  }
}

@keyframes drift-c {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(4vw, -6vh) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nebula__blob {
    animation: none !important;
  }
}