/**
 * CSS Starfield Background - 纯 CSS 星空粒子效果
 * 零 JS 开销，仅 GPU 合成层动画
 * 仅在暗黑模式下显示
 */

/* 星空容器：固定在 body 最底层 */
html[data-mode="dark"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -100;
  pointer-events: none;
  background-color: #0a0a14;
  /* 三层星空：大星/中星/小星 */
  background-image:
    /* 层1：大亮星 ~30颗 */
    radial-gradient(1.5px 1.5px at 20px 30px, #e8f0ff, transparent),
    radial-gradient(1.5px 1.5px at 80px 120px, #c9d6ff, transparent),
    radial-gradient(2px 2px at 150px 60px, #a8c0ff, transparent),
    radial-gradient(1.5px 1.5px at 220px 180px, #fff5e0, transparent),
    radial-gradient(2px 2px at 310px 40px, #d0e8ff, transparent),
    radial-gradient(1.5px 1.5px at 400px 200px, #e0d8ff, transparent),
    radial-gradient(1.5px 1.5px at 480px 90px, #b8d4ff, transparent),
    radial-gradient(2px 2px at 560px 250px, #ffe0f0, transparent),
    radial-gradient(1.5px 1.5px at 640px 150px, #c8e0ff, transparent),
    radial-gradient(1.5px 1.5px at 720px 70px, #d8e8ff, transparent),
    radial-gradient(2px 2px at 100px 300px, #a8c0ff, transparent),
    radial-gradient(1.5px 1.5px at 250px 380px, #fff0e0, transparent),
    radial-gradient(1.5px 1.5px at 380px 320px, #e8f0ff, transparent),
    radial-gradient(2px 2px at 500px 400px, #c9d6ff, transparent),
    radial-gradient(1.5px 1.5px at 620px 360px, #d0e0ff, transparent),
    radial-gradient(1.5px 1.5px at 700px 420px, #e0d8ff, transparent),
    /* 层2：中星 ~40颗 */
    radial-gradient(1px 1px at 10px 50px, rgba(200,220,255,0.8), transparent),
    radial-gradient(1px 1px at 45px 90px, rgba(180,200,255,0.7), transparent),
    radial-gradient(1px 1px at 90px 15px, rgba(220,230,255,0.8), transparent),
    radial-gradient(1px 1px at 135px 170px, rgba(200,210,255,0.7), transparent),
    radial-gradient(1px 1px at 180px 45px, rgba(255,240,220,0.8), transparent),
    radial-gradient(1px 1px at 225px 200px, rgba(190,210,255,0.7), transparent),
    radial-gradient(1px 1px at 270px 110px, rgba(210,220,255,0.8), transparent),
    radial-gradient(1px 1px at 315px 260px, rgba(180,200,255,0.7), transparent),
    radial-gradient(1px 1px at 360px 30px, rgba(220,230,255,0.8), transparent),
    radial-gradient(1px 1px at 405px 150px, rgba(200,215,255,0.7), transparent),
    radial-gradient(1px 1px at 450px 80px, rgba(255,230,240,0.8), transparent),
    radial-gradient(1px 1px at 495px 230px, rgba(190,210,255,0.7), transparent),
    radial-gradient(1px 1px at 540px 10px, rgba(210,225,255,0.8), transparent),
    radial-gradient(1px 1px at 585px 180px, rgba(200,210,255,0.7), transparent),
    radial-gradient(1px 1px at 630px 100px, rgba(220,230,255,0.8), transparent),
    radial-gradient(1px 1px at 675px 280px, rgba(180,200,255,0.7), transparent),
    radial-gradient(1px 1px at 720px 50px, rgba(210,220,255,0.8), transparent),
    radial-gradient(1px 1px at 765px 190px, rgba(200,215,255,0.7), transparent),
    radial-gradient(1px 1px at 50px 350px, rgba(220,230,255,0.8), transparent),
    radial-gradient(1px 1px at 150px 420px, rgba(190,210,255,0.7), transparent),
    radial-gradient(1px 1px at 280px 450px, rgba(200,220,255,0.8), transparent),
    radial-gradient(1px 1px at 410px 480px, rgba(210,225,255,0.7), transparent),
    radial-gradient(1px 1px at 540px 350px, rgba(255,240,220,0.8), transparent),
    radial-gradient(1px 1px at 670px 400px, rgba(190,210,255,0.7), transparent),
    /* 层3：小暗星 ~60颗 密集背景 */
    radial-gradient(0.5px 0.5px at 15px 25px, rgba(160,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 38px 72px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 62px 8px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 88px 55px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 112px 98px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 140px 135px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 168px 22px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 195px 165px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 218px 88px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 245px 210px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 275px 42px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 302px 128px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 330px 195px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 358px 68px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 385px 240px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 415px 15px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 442px 108px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 470px 175px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 498px 48px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 525px 220px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 555px 78px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 582px 155px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 610px 250px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 638px 38px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 665px 195px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 695px 118px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 722px 260px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 750px 58px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 28px 280px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 75px 330px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 122px 380px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 170px 450px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 218px 310px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 265px 490px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 312px 360px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 360px 420px, rgba(155,175,215,0.4), transparent),
    radial-gradient(0.5px 0.5px at 408px 340px, rgba(165,180,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 455px 470px, rgba(150,170,210,0.4), transparent),
    radial-gradient(0.5px 0.5px at 502px 390px, rgba(170,185,220,0.5), transparent),
    radial-gradient(0.5px 0.5px at 550px 440px, rgba(155,175,215,0.4), transparent);
  background-size: 800px 500px;
  background-repeat: repeat;
  animation: starfield-drift 120s linear infinite;
}

/* 缓慢漂移动画 - 仅 transform，GPU 合成层 */
@keyframes starfield-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-30px, -20px); }
  50%  { transform: translate(-60px, 0); }
  75%  { transform: translate(-30px, 20px); }
  100% { transform: translate(0, 0); }
}

/* 亮色模式下隐藏 */
html:not([data-mode="dark"]) body::before {
  display: none;
}

/* 无障碍：尊重用户减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  html[data-mode="dark"] body::before {
    animation: none;
  }
}