/* AI Space Station - Dynamic Sci-Fi Starfield */
/* Pure CSS - WeChat X5 Compatible */

body {
  background: #000010 !important;
}

/* ── Deep space nebula glow ── */
body::before {
  content: '';
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(25,25,112,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(75,0,130,.25) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,40,.6) 0%, transparent 70%);
  animation: nebulaPulse 8s ease-in-out infinite;
}
@keyframes nebulaPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

/* ── Starfield - 50+ twinkling stars ── */
body::after {
  content: '';
  position: fixed; top: -100%; left: 0;
  width: 100%; height: 300%;
  z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 5% 3%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 10% 8%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 15% 5%, rgba(0,212,255,.8), transparent),
    radial-gradient(1px 1px at 20% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 25% 2%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 30% 15%, rgba(168,85,247,.7), transparent),
    radial-gradient(1px 1px at 35% 7%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 40% 18%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 45% 4%, rgba(108,92,231,.9), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 55% 20%, rgba(0,212,255,.6), transparent),
    radial-gradient(1px 1px at 60% 6%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 65% 13%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 70% 3%, rgba(168,85,247,.8), transparent),
    radial-gradient(1px 1px at 75% 17%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 80% 9%, rgba(108,92,231,.7), transparent),
    radial-gradient(1px 1px at 85% 5%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 90% 14%, rgba(0,212,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 95% 8%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 8% 25%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 18% 32%, rgba(168,85,247,.7), transparent),
    radial-gradient(2px 2px at 28% 28%, rgba(0,212,255,.8), transparent),
    radial-gradient(1px 1px at 38% 35%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 48% 22%, rgba(108,92,231,.9), transparent),
    radial-gradient(1px 1px at 58% 38%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 68% 26%, rgba(0,212,255,.6), transparent),
    radial-gradient(2px 2px at 78% 33%, rgba(168,85,247,.8), transparent),
    radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 3% 42%, rgba(0,212,255,.7), transparent),
    radial-gradient(1px 1px at 13% 48%, rgba(108,92,231,.6), transparent),
    radial-gradient(1px 1px at 23% 45%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 33% 50%, rgba(0,212,255,.9), transparent),
    radial-gradient(1px 1px at 43% 55%, rgba(168,85,247,.7), transparent),
    radial-gradient(1.5px 1.5px at 53% 42%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 63% 48%, rgba(108,92,231,.8), transparent),
    radial-gradient(1px 1px at 73% 52%, rgba(0,212,255,.6), transparent),
    radial-gradient(2px 2px at 83% 46%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 93% 55%, rgba(168,85,247,.7), transparent);
  animation: starDrift 90s linear infinite;
}
@keyframes starDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(33.33%); }
}

/* ── Shooting stars container ── */
.star-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}

/* Shooting star 1 - big bright */
.star-layer::before {
  content: '';
  position: absolute;
  top: 15%; left: -20%;
  width: 200px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8) 40%, rgba(0,212,255,.9) 60%, rgba(255,255,255,.3) 70%, transparent);
  border-radius: 2px;
  transform: rotate(-35deg);
  animation: meteor1 3s linear infinite;
  box-shadow: 0 0 6px rgba(0,212,255,.5), 0 0 12px rgba(0,212,255,.2);
}
@keyframes meteor1 {
  0% { left: -20%; top: 15%; opacity: 1; }
  70% { opacity: 1; }
  100% { left: 120%; top: 85%; opacity: 0; }
}

/* Shooting star 2 - fast small */
.star-layer::after {
  content: '';
  position: absolute;
  top: 25%; left: -15%;
  width: 100px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.7) 50%, rgba(255,255,255,.2) 60%, transparent);
  border-radius: 1px;
  transform: rotate(-40deg);
  animation: meteor2 2s linear 1s infinite;
}
@keyframes meteor2 {
  0% { left: -15%; top: 25%; opacity: 1; }
  70% { opacity: 1; }
  100% { left: 120%; top: 95%; opacity: 0; }
}

/* Shooting star 3 - delayed long */
.star-layer2 {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}
.star-layer2::before {
  content: '';
  position: absolute;
  top: 8%; left: -25%;
  width: 250px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6) 35%, rgba(108,92,231,.8) 55%, rgba(255,255,255,.2) 65%, transparent);
  border-radius: 2px;
  transform: rotate(-30deg);
  animation: meteor3 4s linear 2s infinite;
  box-shadow: 0 0 4px rgba(108,92,231,.4);
}
@keyframes meteor3 {
  0% { left: -25%; top: 8%; opacity: 1; }
  70% { opacity: 1; }
  100% { left: 120%; top: 78%; opacity: 0; }
}
.star-layer2::after {
  content: '';
  position: absolute;
  top: 35%; left: -10%;
  width: 150px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.5) 50%, rgba(255,255,255,.15) 60%, transparent);
  border-radius: 1px;
  transform: rotate(-38deg);
  animation: meteor4 2.5s linear .5s infinite;
}
@keyframes meteor4 {
  0% { left: -10%; top: 35%; opacity: 1; }
  70% { opacity: 1; }
  100% { left: 120%; top: 105%; opacity: 0; }
}

/* Shooting star 5 */
.star-layer3 {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}
.star-layer3::before {
  content: '';
  position: absolute;
  top: 20%; left: -30%;
  width: 180px; height: 2.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 40%, rgba(168,85,247,.9) 55%, rgba(255,255,255,.4) 65%, transparent);
  border-radius: 2px;
  transform: rotate(-42deg);
  animation: meteor5 5s linear 3s infinite;
  box-shadow: 0 0 8px rgba(168,85,247,.6), 0 0 16px rgba(168,85,247,.2);
}
@keyframes meteor5 {
  0% { left: -30%; top: 20%; opacity: 1; }
  70% { opacity: 1; }
  100% { left: 120%; top: 90%; opacity: 0; }
}

/* ── Add star layers to pages ── */