/* Starry night ambient background — subtle, behind all pages */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #030508;
}

.ambient-bg__layer {
  position: absolute;
  inset: 0;
}

/* Night sky — deep blue-black with a soft horizon glow */
.ambient-bg__base {
  background:
    radial-gradient(ellipse 100% 70% at 50% 110%, rgba(15, 40, 62, 0.45), transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 80, 120, 0.12), transparent 50%),
    radial-gradient(ellipse 55% 40% at 85% 15%, rgba(60, 40, 100, 0.08), transparent 55%),
    linear-gradient(180deg, #04060c 0%, #050608 38%, #030508 100%);
}

/* Distant stars — fine, dense field */
.ambient-bg__grid {
  opacity: 0.7;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 44% 34%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 61% 8%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 73% 56%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 88% 28%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 6% 48%, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(1px 1px at 36% 91%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 52% 62%, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(1px 1px at 94% 78%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(1px 1px at 18% 88%, rgba(200, 220, 255, 0.4), transparent),
    radial-gradient(1px 1px at 67% 42%, rgba(255, 255, 255, 0.44), transparent),
    radial-gradient(1px 1px at 81% 92%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 4% 12%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 48% 14%, rgba(255, 255, 255, 0.38), transparent);
  background-size: 320px 280px;
  background-repeat: repeat;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 40%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 40%, #000 25%, transparent 78%);
  animation:
    stars-drift-far 180s linear infinite,
    star-twinkle-far 7s ease-in-out infinite;
}

/* Brighter stars + soft clusters */
.ambient-bg__mesh {
  opacity: 0.85;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 24%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(2px 2px at 58% 16%, rgba(230, 245, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 76% 44%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 14% 58%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 42% 78%, rgba(200, 230, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 62%, rgba(255, 255, 255, 0.72), transparent),
    radial-gradient(1px 1px at 33% 42%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 68% 82%, rgba(255, 255, 255, 0.68), transparent),
    radial-gradient(ellipse 120px 40px at 30% 55%, rgba(180, 210, 255, 0.04), transparent),
    radial-gradient(ellipse 90px 35px at 72% 30%, rgba(0, 229, 255, 0.035), transparent);
  background-size: 420px 360px;
  background-repeat: repeat;
  animation:
    stars-drift-near 120s linear infinite reverse,
    star-twinkle-near 11s ease-in-out infinite;
}

/* Nebula / moonlit haze — ties into brand cyan */
.ambient-bg__glow {
  opacity: 0.65;
  background:
    radial-gradient(ellipse 50% 35% at 78% 12%, rgba(120, 160, 255, 0.1), transparent 70%),
    radial-gradient(ellipse 45% 40% at 15% 70%, rgba(0, 140, 180, 0.08), transparent 68%),
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(0, 229, 255, 0.06), transparent 60%);
  animation: nebula-drift 48s ease-in-out infinite alternate;
}

/* Slow aurora band + occasional shimmer */
.ambient-bg__scan {
  opacity: 0.5;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(0, 229, 255, 0.02) 35%,
    rgba(140, 180, 255, 0.04) 50%,
    rgba(0, 229, 255, 0.02) 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  mix-blend-mode: screen;
  animation: aurora-shift 22s ease-in-out infinite alternate;
}

@keyframes stars-drift-far {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-48px, 32px);
  }
}

@keyframes stars-drift-near {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(36px, -24px);
  }
}

@keyframes star-twinkle-far {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.82;
  }
}

@keyframes star-twinkle-near {
  0%,
  100% {
    opacity: 0.7;
  }
  45% {
    opacity: 0.95;
  }
  70% {
    opacity: 0.75;
  }
}

@keyframes nebula-drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.55;
  }
  100% {
    transform: translate(-2%, 1.5%) scale(1.03);
    opacity: 0.72;
  }
}

@keyframes aurora-shift {
  0% {
    background-position: 0% 50%;
    opacity: 0.35;
  }
  100% {
    background-position: 100% 50%;
    opacity: 0.55;
  }
}

/* Keep page content above ambient layers */
body > :not(.ambient-bg) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bg__grid,
  .ambient-bg__mesh,
  .ambient-bg__glow,
  .ambient-bg__scan {
    animation: none;
  }

  .ambient-bg__grid {
    opacity: 0.65;
  }

  .ambient-bg__mesh {
    opacity: 0.8;
  }
}