/* ============================================================
   Shared galaxy background — visible through grass page bottom
   and aligned with Floaty page atmosphere.
   ============================================================ */

#cosmos-shared-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.6s ease;
  --cosmos-horizon: 66vh;
  --cosmos-blend: 3vh;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--cosmos-horizon) - var(--cosmos-blend)),
    rgba(0, 0, 0, 0.35) calc(var(--cosmos-horizon) - var(--cosmos-blend) * 0.35),
    rgba(0, 0, 0, 0.72) var(--cosmos-horizon),
    black calc(var(--cosmos-horizon) + var(--cosmos-blend))
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--cosmos-horizon) - var(--cosmos-blend)),
    rgba(0, 0, 0, 0.35) calc(var(--cosmos-horizon) - var(--cosmos-blend) * 0.35),
    rgba(0, 0, 0, 0.72) var(--cosmos-horizon),
    black calc(var(--cosmos-horizon) + var(--cosmos-blend))
  );
}

#cosmos-shared-bg.is-hidden {
  opacity: 0;
}

.cosmos-stellar {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 38% at 52% 55%, var(--cosmos-stellar-purple) 0%, transparent 62%),
    radial-gradient(ellipse 45% 32% at 38% 58%, var(--cosmos-stellar-pink) 0%, transparent 58%),
    radial-gradient(ellipse 60% 42% at 62% 52%, var(--cosmos-stellar-blue) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% 58%, var(--cosmos-core-glow) 0%, transparent 68%),
    linear-gradient(
      180deg,
      var(--cosmos-void) 0%,
      var(--cosmos-deep) 28%,
      var(--cosmos-mid) 62%,
      #0e1222 100%
    );
}

.cosmos-stellar-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 42% at 50% 55%,
      rgba(180, 160, 255, 0.14) 0%,
      rgba(100, 80, 180, 0.06) 32%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 35% 28% at 48% 52%,
      rgba(200, 210, 255, 0.1) 0%,
      transparent 48%
    );
  animation: stellar-glow-breathe 8s ease-in-out infinite;
  mix-blend-mode: screen;
}

#cosmosDustCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.92;
}

@keyframes stellar-glow-breathe {
  0%, 100% {
    opacity: 0.78;
    transform: scale(1) translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translate(1%, 0.8%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos-stellar-glow {
    animation: none;
    opacity: 0.9;
  }
}