/* aurora.css — fixed background: deep night sky, twinkling stars, northern-light
   aurora ribbons, and a ground glow. Fixed-position layers => no layout shift. */

.bl-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% -10%, #15163a 0%, #0b0b22 38%, #060614 72%, #040410 100%);
}
/* ground glow at the bottom — the world below the sky */
.bl-bg::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -8%; height: 38vh;
  background: radial-gradient(60% 100% at 50% 100%, rgba(43,217,168,.18), transparent 70%),
              radial-gradient(80% 100% at 30% 100%, rgba(124,58,237,.14), transparent 75%);
  filter: blur(8px);
}

/* ---- Stars: layered CSS twinkle (JS adds a parallax canvas on top) ---- */
.bl-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px   at 70% 20%, #cfe3ff, transparent),
    radial-gradient(1px 1px   at 40% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, #d6c8ff, transparent),
    radial-gradient(2px 2px   at 55% 45%, #fff, transparent),
    radial-gradient(1px 1px   at 10% 80%, #fff, transparent),
    radial-gradient(1px 1px   at 90% 85%, #bfe9ff, transparent),
    radial-gradient(1px 1px   at 33% 15%, #fff, transparent),
    radial-gradient(1px 1px   at 65% 92%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 48% 8%, #e7dcff, transparent);
  background-repeat: repeat; background-size: 540px 540px;
  opacity: .9; animation: bl-twinkle 7s ease-in-out infinite;
}
/* a second, finer star layer for depth */
.bl-stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 80% 35%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 60% 65%, rgba(200,220,255,.7), transparent),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 95% 10%, rgba(255,255,255,.7), transparent);
  background-repeat: repeat; background-size: 320px 320px;
  opacity: .6; animation: bl-twinkle 5s ease-in-out infinite reverse;
}

/* ---- Aurora ribbons: stacked blurred gradients, translate + hue + opacity ---- */
.bl-aurora { position: absolute; inset: -25% 0 auto 0; height: 95vh;
  filter: blur(46px); opacity: .6; will-change: transform; }
.bl-ribbon {
  position: absolute; left: -15%; width: 130%; height: 280px; border-radius: 50%;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, var(--teal), var(--green), var(--cyan), transparent);
  animation: bl-wave 20s ease-in-out infinite;
}
.bl-ribbon--1 { top: 2%;  animation-delay: 0s;   opacity: .6; }
.bl-ribbon--2 { top: 15%; animation-delay: -5s;  opacity: .5;
  background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent); }
.bl-ribbon--3 { top: 28%; animation-delay: -9s;  opacity: .42;
  background: linear-gradient(90deg, transparent, var(--green), var(--teal), transparent); }
.bl-ribbon--4 { top: 42%; animation-delay: -13s; opacity: .34;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); }

/* the epic (Countdown #2) phases intensify the aurora behind them */
body.phase-p1b .bl-aurora,
body.phase-p2  .bl-aurora { opacity: .78; }

@keyframes bl-wave {
  0%, 100% { transform: translateX(-5%) translateY(0) scaleY(1); filter: hue-rotate(0deg); }
  50%      { transform: translateX(5%) translateY(22px) scaleY(1.28); filter: hue-rotate(45deg); }
}
@keyframes bl-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .bl-stars, .bl-stars::after, .bl-ribbon { animation: none; }
  .bl-aurora { filter: blur(52px); opacity: .45; }
}