/* =====================================
   NEON NEBULA BACKGROUND (Async ONE-Page)
   pure CSS – no images, low GPU load
   ===================================== */

#bg-space {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, #000010 0%, #000 70%);
  transition: opacity 2s ease, background 5s ease;
}

/* ---------- nebula clouds ---------- */
#bg-space::before,
#bg-space::after {
  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 0, 255, 0.15), transparent 70%),
    radial-gradient(circle at 70% 60%, rgba(0, 255, 255, 0.15), transparent 70%),
    radial-gradient(circle at 50% 85%, rgba(255, 255, 0, 0.08), transparent 80%);
  mix-blend-mode: screen;
  filter: blur(80px);
  animation: nebulaDrift 180s linear infinite;
}
#bg-space::after {
  animation-direction: reverse;
  opacity: 0.8;
}

/* ---------- distant stars ---------- */
#bg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 90% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 90%, rgba(255,255,255,0.4), transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: starsDrift 250s linear infinite, starsPulse 8s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* ---------- planets / dual stars ---------- */
.planet {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.4;
  animation: planetOrbit 200s linear infinite;
}
.planet.one {
  top: 60%;
  left: 20%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 30% 30%, #ff66cc 0%, #330033 80%);
}
.planet.two {
  top: 25%;
  left: 75%;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 70% 40%, #00ffff 0%, #002244 90%);
  animation-direction: reverse;
}
.planet.three {
  top: 75%;
  left: 55%;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 60% 60%, #ffffaa 0%, #221100 85%);
  animation-duration: 150s;
}

/* ---------- occasional shooting star ---------- */
.shooting-star {
  position: absolute;
  top: -10px;
  left: 100%;
  width: 2px;
  height: 80px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0));
  transform: rotate(45deg);
  opacity: 0;
  animation: shootingStar 60s linear infinite;
}
@keyframes shootingStar {
  0%, 98%, 100% { opacity: 0; transform: translateX(0) translateY(0) rotate(45deg); }
  2% {
    opacity: 1;
    transform: translateX(-600px) translateY(300px) rotate(45deg);
  }
  4% { opacity: 0; }
}

/* ---------- animations ---------- */
@keyframes starsDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 10000px 5000px, -5000px 2000px, 8000px -4000px, -10000px 10000px, 2000px -6000px; }
}
@keyframes starsPulse {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}
@keyframes nebulaDrift {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1.1); }
}
@keyframes planetOrbit {
  from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

/* ---------- login glow-up ---------- */
body.logged-in #bg-space::before {
  background:
    radial-gradient(circle at 25% 35%, rgba(255,0,200,0.25), transparent 70%),
    radial-gradient(circle at 75% 65%, rgba(0,255,255,0.25), transparent 70%),
    radial-gradient(circle at 55% 85%, rgba(255,255,255,0.1), transparent 80%);
  filter: hue-rotate(45deg) brightness(1.4);
}
#bg-dust {
  position: absolute;
  inset: 0;
  background: url('../img/A_digital_image_consists_of_a_colorful_nebula_set_.png') repeat;
  background-size: 1024px 1024px;
  opacity: 0.15;
  mix-blend-mode: screen;
  animation: dustDrift 300s linear infinite;
  pointer-events: none;
}

@keyframes dustDrift {
  from { background-position: 0 0; }
  to { background-position: 2000px 1000px; }
}