.space {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #02030B;
}

.space__milkyway {
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(118deg,
      transparent 34%,
      rgba(180, 200, 255, 0.025) 46%,
      rgba(255, 220, 200, 0.045) 50%,
      rgba(180, 200, 255, 0.030) 54%,
      transparent 66%);
  filter: blur(10px);
  pointer-events: none;
  opacity: 0.85;
}

.space__nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  mix-blend-mode: screen;
}
.space__nebula--a {
  width: 60vmax; height: 60vmax;
  left: -25vmax; top: 10vh;
  background:
    radial-gradient(circle at 60% 40%, rgba(120, 70, 200, 0.42) 0%, transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(200, 80, 150, 0.28) 0%, transparent 55%);
  opacity: 0.55;
  animation: nebPulse 22s ease-in-out infinite;
}
.space__nebula--b {
  width: 38vmax; height: 38vmax;
  right: -12vmax; bottom: -12vmax;
  background:
    radial-gradient(circle at 40% 60%, rgba(70, 110, 200, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(110, 180, 230, 0.25) 0%, transparent 55%);
  opacity: 0.45;
  animation: nebPulse 28s ease-in-out -10s infinite;
}

@keyframes nebPulse {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0); opacity: var(--op, 0.55); }
  50%      { transform: scale(1.06) translate3d(2vw, -1vh, 0); opacity: 0.7; }
}

.space__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: fieldFadeIn 1.4s ease-out 0.1s forwards;
}

@keyframes fieldFadeIn {
  to { opacity: 1; }
}

.space__moon {
  position: absolute;
  left: 50%;
  bottom: calc(-100vmax + 8vh);
  transform: translateX(-50%);
  width: 100vmax;
  height: 100vmax;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -0.2%,
      rgba(255, 255, 248, 0.85) 0%,
      rgba(255, 250, 228, 0.42) 0.6%,
      rgba(255, 246, 215, 0.16) 1.6%,
      transparent 3.2%),
    radial-gradient(ellipse 65% 9% at 50% 0%,
      rgba(255, 238, 195, 0.20) 0%,
      rgba(255, 230, 180, 0.08) 45%,
      transparent 80%),
    radial-gradient(circle at 50% 50%,
      transparent 72%,
      rgba(50, 34, 16, 0.12) 86%,
      rgba(32, 22, 10, 0.32) 96%,
      rgba(18, 12, 6, 0.48) 100%),
    radial-gradient(circle at 50% 0%,
      rgba(254, 248, 225, 1) 0%,
      rgba(248, 236, 200, 0.98) 1.5%,
      rgba(240, 222, 178, 0.96) 3.5%,
      rgba(228, 206, 154, 0.93) 6%,
      rgba(208, 184, 130, 0.90) 9%,
      rgba(180, 156, 104, 0.85) 13%,
      rgba(146, 122, 82, 0.79) 18%,
      rgba(108, 88, 60, 0.70) 25%,
      rgba(72, 58, 38, 0.54) 33%,
      rgba(40, 30, 18, 0.34) 42%,
      transparent 50%);
  box-shadow:
    0 0 0 1px rgba(255, 240, 195, 0.18),
    0 -2px 14px rgba(255, 240, 195, 0.55),
    0 -10px 44px rgba(252, 222, 158, 0.30),
    0 -24px 88px rgba(248, 208, 138, 0.16),
    0 -48px 140px rgba(245, 198, 130, 0.08);
  pointer-events: none;
  opacity: 0;
  animation: fieldFadeIn 1.8s ease-out 0.4s forwards;
  will-change: opacity;
}

.space__moon::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 24% 5.4% at 32% 6%,    rgba(112, 86, 56, 0.36) 0%, transparent 72%),
    radial-gradient(ellipse 20% 4.4% at 64% 8%,    rgba(112, 86, 56, 0.32) 0%, transparent 72%),
    radial-gradient(ellipse 16% 3.4% at 48% 10.8%, rgba(112, 86, 56, 0.28) 0%, transparent 72%),
    radial-gradient(ellipse 13% 2.8% at 15% 11.2%, rgba(112, 86, 56, 0.24) 0%, transparent 72%),
    radial-gradient(ellipse 11% 2.4% at 84% 11%,   rgba(112, 86, 56, 0.22) 0%, transparent 72%),
    radial-gradient(ellipse 16% 3.4% at 38% 17%,   rgba(112, 86, 56, 0.30) 0%, transparent 72%),
    radial-gradient(ellipse 13% 2.8% at 70% 18%,   rgba(112, 86, 56, 0.28) 0%, transparent 72%),
    radial-gradient(ellipse 9% 2% at 22% 16%,      rgba(112, 86, 56, 0.22) 0%, transparent 72%),
    radial-gradient(ellipse 3.6% 0.85% at 27% 4.6%, rgba(60, 44, 24, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 4.2% 0.95% at 63% 4%,   rgba(60, 44, 24, 0.52) 0%, transparent 58%),
    radial-gradient(ellipse 3.4% 0.78% at 78% 7%,   rgba(60, 44, 24, 0.50) 0%, transparent 58%),
    radial-gradient(ellipse 3% 0.7%    at 35% 12%,  rgba(60, 44, 24, 0.48) 0%, transparent 58%),
    radial-gradient(ellipse 2.8% 0.65% at 80% 12.5%, rgba(60, 44, 24, 0.46) 0%, transparent 58%),
    radial-gradient(ellipse 2.6% 0.6% at 18% 9%,    rgba(60, 44, 24, 0.44) 0%, transparent 58%),
    radial-gradient(ellipse 2.4% 0.55% at 50% 7%,   rgba(60, 44, 24, 0.46) 0%, transparent 58%),
    radial-gradient(ellipse 2.2% 0.5% at 56% 14%,   rgba(60, 44, 24, 0.42) 0%, transparent 58%),
    radial-gradient(ellipse 5.2% 1.05% at 63% 3%,   rgba(255, 250, 220, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 4.2% 0.85% at 27% 3.8%, rgba(255, 250, 220, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 3.6% 0.7% at 50% 5%,    rgba(255, 250, 220, 0.16) 0%, transparent 70%);
  filter: blur(0.9px);
  animation: moonSurfaceDrift 7s linear infinite;
  will-change: transform;
}

@keyframes moonSurfaceDrift {
  0%   { transform: translate(-0.4vmax, -4.5vmax); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translate(0.4vmax, 0);         opacity: 0; }
}

.space__moon::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 0.7% 0.18% at 38% 5%,    rgba(40, 28, 14, 0.45) 0%, transparent 58%),
    radial-gradient(ellipse 0.78% 0.2% at 56% 6%,    rgba(40, 28, 14, 0.45) 0%, transparent 58%),
    radial-gradient(ellipse 0.66% 0.17% at 32% 7%,   rgba(40, 28, 14, 0.42) 0%, transparent 58%),
    radial-gradient(ellipse 0.78% 0.2% at 82% 5%,    rgba(40, 28, 14, 0.42) 0%, transparent 58%),
    radial-gradient(ellipse 0.55% 0.14% at 73% 8.5%, rgba(40, 28, 14, 0.36) 0%, transparent 58%),
    radial-gradient(ellipse 0.55% 0.14% at 41% 11%,  rgba(40, 28, 14, 0.36) 0%, transparent 58%),
    radial-gradient(ellipse 0.55% 0.14% at 35% 18%,  rgba(40, 28, 14, 0.34) 0%, transparent 58%),
    radial-gradient(ellipse 0.5% 0.13% at 67% 5%,    rgba(40, 28, 14, 0.40) 0%, transparent 58%),
    radial-gradient(ellipse 0.45% 0.11% at 18% 4%,   rgba(40, 28, 14, 0.36) 0%, transparent 58%),
    radial-gradient(ellipse 0.5% 0.13% at 88% 7%,    rgba(40, 28, 14, 0.36) 0%, transparent 58%),
    radial-gradient(ellipse 0.45% 0.11% at 26% 9%,   rgba(40, 28, 14, 0.34) 0%, transparent 58%),
    radial-gradient(ellipse 0.45% 0.11% at 60% 8%,   rgba(40, 28, 14, 0.32) 0%, transparent 58%),
    radial-gradient(ellipse 0.4% 0.1% at 78% 14%,    rgba(40, 28, 14, 0.30) 0%, transparent 58%),
    radial-gradient(ellipse 0.4% 0.1% at 16% 15%,    rgba(40, 28, 14, 0.30) 0%, transparent 58%),
    radial-gradient(ellipse 0.4% 0.1% at 64% 16%,    rgba(40, 28, 14, 0.30) 0%, transparent 58%);
  filter: blur(0.3px);
  opacity: 0.9;
  animation: moonSurfaceDrift 7s linear -2.1s infinite;
  will-change: transform;
}