/* Midnight Sky — Enhanced */

.uiverse-midnight-sky {
  width: 100%;
  height: 100%;
  min-height: 500px;
  overflow: hidden;
  background: #0c1a2e;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

/* ── Base Sky ── */
.uiverse-midnight-sky .sky-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 80% at 30% 110%, #142840 0%, #0c1a2e 40%, #081420 100%);
}

/* ── Milky Way Band ── */
.uiverse-midnight-sky .milky-way {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 200% 30% at 50% 60%, rgba(100,80,180,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 180% 20% at 40% 55%, rgba(80,120,200,0.15) 0%, transparent 50%);
  transform: rotate(-20deg) scale(1.5);
}

/* ── Generic Star Layer ── */
.uiverse-midnight-sky .stars {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  pointer-events: none;
}

/* Layer 1: Tiny dense stars — mixed white/blue-white/warm */
.uiverse-midnight-sky .stars-1 {
  background-image:
    radial-gradient(1.5px 1.5px at 7%  8%,  rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 17% 22%, rgba(221,232,255,0.90),  rgba(221,232,255,0)),
    radial-gradient(1.5px 1.5px at 27% 6%,  rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 37% 38%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 47% 15%, rgba(255,232,204,0.90),  rgba(255,232,204,0)),
    radial-gradient(1.5px 1.5px at 57% 48%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 63% 9%,  rgba(221,232,255,0.90),  rgba(221,232,255,0)),
    radial-gradient(1.5px 1.5px at 73% 29%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 83% 19%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 93% 41%, rgba(255,232,204,0.90),  rgba(255,232,204,0)),
    radial-gradient(1.5px 1.5px at 13% 55%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 23% 75%, rgba(221,232,255,0.90),  rgba(221,232,255,0)),
    radial-gradient(1.5px 1.5px at 43% 62%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 53% 88%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 67% 71%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 77% 84%, rgba(255,232,204,0.90),  rgba(255,232,204,0)),
    radial-gradient(1.5px 1.5px at 87% 58%, rgba(221,232,255,0.90),  rgba(221,232,255,0)),
    radial-gradient(1.5px 1.5px at 3%  91%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 97% 77%, rgba(255,255,255,0.95),     rgba(255,255,255,0)),
    radial-gradient(1.5px 1.5px at 33% 96%, rgba(255,255,255,0.95),     rgba(255,255,255,0));
  background-size: 220px 220px;
  animation: twinkle 3s ease-in-out infinite;
}

/* Layer 2: Medium stars, slower twinkle */
.uiverse-midnight-sky .stars-2 {
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,0.95),    rgba(255,255,255,0)),
    radial-gradient(2px 2px at 32% 72%, rgba(221,232,255,0.90), rgba(221,232,255,0)),
    radial-gradient(2px 2px at 52% 34%, rgba(255,255,255,0.95),    rgba(255,255,255,0)),
    radial-gradient(2px 2px at 72% 58%, rgba(255,232,204,0.90), rgba(255,232,204,0)),
    radial-gradient(2px 2px at 88% 12%, rgba(221,232,255,0.90), rgba(221,232,255,0)),
    radial-gradient(2px 2px at 22% 86%, rgba(255,255,255,0.95),    rgba(255,255,255,0)),
    radial-gradient(2px 2px at 62% 92%, rgba(255,255,255,0.95),    rgba(255,255,255,0)),
    radial-gradient(2px 2px at 42% 46%, rgba(255,232,204,0.90), rgba(255,232,204,0)),
    radial-gradient(2px 2px at 8%  64%, rgba(221,232,255,0.90), rgba(221,232,255,0)),
    radial-gradient(2px 2px at 96% 38%, rgba(255,255,255,0.95),    rgba(255,255,255,0));
  background-size: 320px 320px;
  animation: twinkle 5s ease-in-out infinite 1.2s;
}

/* Layer 3: Larger, very slow stars */
.uiverse-midnight-sky .stars-3 {
  background-image:
    radial-gradient(2.5px 2.5px at 18% 28%, rgba(255,255,255,0.95),    rgba(255,255,255,0)),
    radial-gradient(3px 3px at 42% 62%, rgba(221,232,255,0.90), rgba(221,232,255,0)),
    radial-gradient(2.5px 2.5px at 68% 18%, rgba(255,255,255,0.95),    rgba(255,255,255,0)),
    radial-gradient(3px 3px at 82% 74%, rgba(255,232,204,0.90), rgba(255,232,204,0)),
    radial-gradient(2.5px 2.5px at 28% 88%, rgba(221,232,255,0.90), rgba(221,232,255,0)),
    radial-gradient(2.5px 2.5px at 56% 44%, rgba(255,255,255,0.95),    rgba(255,255,255,0)),
    radial-gradient(3px 3px at 6%  52%, rgba(255,232,204,0.90), rgba(255,232,204,0)),
    radial-gradient(2.5px 2.5px at 92% 92%, rgba(221,232,255,0.90), rgba(221,232,255,0));
  background-size: 450px 450px;
  animation: twinkle 8s ease-in-out infinite 2.5s;
}

/* Layer 4: Micro stars for depth */
.uiverse-midnight-sky .stars-4 {
  background-image:
    radial-gradient(1.2px 1.2px at 5%  15%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 15% 55%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 25% 35%, rgba(200,220,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 35% 75%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 45% 25%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 55% 65%, rgba(200,220,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 65% 45%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 75% 85%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 85% 30%, rgba(200,220,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 95% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 10% 90%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 50% 10%, rgba(200,220,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 80% 50%, rgba(255,255,255,0.7), transparent);
  background-size: 180px 180px;
  animation: twinkle 11s ease-in-out infinite 0.7s;
}

/* ── Nebula Clouds ── */
.uiverse-midnight-sky .nebula-1 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 25% at 20% 30%, rgba(80,40,160,0.30) 0%, transparent 70%),
    radial-gradient(ellipse 30% 20% at 70% 20%, rgba(40,80,200,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 50% 20% at 50% 70%, rgba(60,20,120,0.20) 0%, transparent 70%);
  animation: nebulaPulse 15s ease-in-out infinite;
}

.uiverse-midnight-sky .nebula-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 35% 22% at 80% 50%, rgba(20,80,160,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 25% 18% at 10% 60%, rgba(100,50,180,0.20) 0%, transparent 70%);
  animation: nebulaPulse 20s ease-in-out infinite 5s;
}

/* ── Aurora ── */
.uiverse-midnight-sky .aurora {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 100% at 20% 120%, rgba(0,180,120,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80%  at 60% 130%, rgba(60,100,220,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 90%  at 90% 120%, rgba(120,40,200,0.15) 0%, transparent 60%);
  animation: auroraShift 25s ease-in-out infinite;
}

/* ── Moon ── */
.uiverse-midnight-sky .moon {
  position: absolute;
  top: 12%;
  right: 14%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 14px 14px 0 0 #fdfbd3;
  z-index: 10;
  animation: moonGlow 8s ease-in-out infinite;
}

/* Inner glow ring */
.uiverse-midnight-sky .moon::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,251,200,0.04) 0%, transparent 70%);
  animation: moonRing 8s ease-in-out infinite;
  transition: opacity 3s ease;
}

/* Outer haze */
.uiverse-midnight-sky .moon::after {
  content: '';
  position: absolute;
  inset: -36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,251,200,0.025) 0%, transparent 65%);
  transition: opacity 3s ease;
}

/* ── Meteors ── */
.uiverse-midnight-sky .meteor {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.4);
  opacity: 0;
  pointer-events: none;
}

.uiverse-midnight-sky .meteor::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
}

/* Standard diagonal trajectory */
.uiverse-midnight-sky .m1 { top: 8%;  left: 108%; animation: shoot 9s  linear infinite;     }
.uiverse-midnight-sky .m1::after { width: 100px; }

.uiverse-midnight-sky .m2 { top: 22%; left: 105%; animation: shoot 14s linear infinite 3s;  }
.uiverse-midnight-sky .m2::after { width: 130px; }

.uiverse-midnight-sky .m3 { top: 42%; left: 112%; animation: shoot 11s linear infinite 6s;  }
.uiverse-midnight-sky .m3::after { width: 90px; }

/* Shallower trajectory */
.uiverse-midnight-sky .m4 { top: 5%;  left: 95%;  animation: shoot-diag 16s linear infinite 1s; }
.uiverse-midnight-sky .m4::after { width: 120px; }

.uiverse-midnight-sky .m5 { top: 60%; left: 108%; animation: shoot 18s linear infinite 9s;  }
.uiverse-midnight-sky .m5::after { width: 80px; }

/* ── Bright Star Flares ── */
.uiverse-midnight-sky .flare {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  animation: starFlare 12s ease-in-out infinite;
}
.uiverse-midnight-sky .flare-1 { top: 18%; left: 35%; animation-delay: 0s;  }
.uiverse-midnight-sky .flare-2 { top: 44%; left: 68%; animation-delay: 4s;  }
.uiverse-midnight-sky .flare-3 { top: 72%; left: 22%; animation-delay: 8s;  }

/* ─────────────────── Keyframes ─────────────────── */

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  40%       { opacity: 0.15; }
  60%       { opacity: 0.5; }
}

@keyframes shoot {
  0%   { transform: translateX(0)       translateY(0)       rotate(-35deg); opacity: 0; }
  4%   { opacity: 1; }
  18%  { transform: translateX(-1600px) translateY(1100px)  rotate(-35deg); opacity: 0; }
  100% { transform: translateX(-1600px) translateY(1100px)  rotate(-35deg); opacity: 0; }
}

@keyframes shoot-diag {
  0%   { transform: translateX(0)       translateY(0)      rotate(-22deg); opacity: 0; }
  4%   { opacity: 0.9; }
  20%  { transform: translateX(-1200px) translateY(900px)  rotate(-22deg); opacity: 0; }
  100% { transform: translateX(-1200px) translateY(900px)  rotate(-22deg); opacity: 0; }
}

@keyframes nebulaPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes auroraShift {
  0%,  100% { opacity: 1;   transform: skewX(0deg)   scaleY(1);    }
  25%        { opacity: 0.6; transform: skewX(3deg)   scaleY(1.1);  }
  50%        { opacity: 0.8; transform: skewX(-2deg)  scaleY(0.95); }
  75%        { opacity: 0.5; transform: skewX(4deg)   scaleY(1.05); }
}

@keyframes moonGlow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(253,251,200,0.35)); }
  50%       { filter: drop-shadow(0 0 22px rgba(253,251,200,0.55)); }
}

@keyframes moonRing {
  0%, 100% { opacity: 0.6; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.08); }
}

@keyframes starFlare {
  0%, 80%, 100% { opacity: 0; transform: scale(1);   box-shadow: none; }
  40%            { opacity: 1; transform: scale(2.5); box-shadow: 0 0 6px 2px rgba(255,255,255,0.4); }
}