/* css/stars.css */

/* --- 1. 定义星星的粒子 --- */
/*
   我们创建 3 种大小不同的星星，它们有不同的动画延迟和持续时间，
   以模拟随机性。它们实际上只是白色的小圆点。
*/
.stars {
    position: absolute; /* 相对于 body 定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 防止星星超出可见区域 */
    z-index: 2; /* 确保星星在所有内容之下 */
    pointer-events: none; /* 确保星星不会干扰鼠标事件 */
}

.stars .star {
    position: absolute;
    background-color: white;
    border-radius: 50%; /* 使其成为圆形 */
    opacity: 0; /* 初始不可见 */
    animation-name: twinkle; /* 应用闪烁动画 */
    animation-iteration-count: infinite; /* 无限循环 */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}

/* --- 2. 闪烁动画的定义 --- */
@keyframes twinkle {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.0); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* --- 3. 生成大量随机位置的星星 --- */
/*
   这部分需要我们手动生成一些星星，
   每个星星都有随机的大小、位置、动画延迟和持续时间。
   这会使得 CSS 文件有点长，但效果非常好。
*/

/* Small stars (大约 2x2px) */
/* 每个 .star:nth-child(n) 都代表一个独立的星星 */
.stars .star:nth-child(1) { width: 2px; height: 2px; top: 10%; left: 5%; animation-duration: 4s; animation-delay: 0s; }
.stars .star:nth-child(2) { width: 2px; height: 2px; top: 2%; left: 15%; animation-duration: 5s; animation-delay: 1s; }
.stars .star:nth-child(3) { width: 2px; height: 2px; top: 32%; left: 22%; animation-duration: 3.5s; animation-delay: 0.5s; }
.stars .star:nth-child(4) { width: 2px; height: 2px; top: 42%; left: 35%; animation-duration: 4.5s; animation-delay: 2s; }
.stars .star:nth-child(5) { width: 2px; height: 2px; top: 55%; left: 43%; animation-duration: 5.5s; animation-delay: 1.5s; }
.stars .star:nth-child(6) { width: 2px; height: 2px; top: 62%; left: 57%; animation-duration: 3s; animation-delay: 0.8s; }
.stars .star:nth-child(7) { width: 2px; height: 2px; top: 70%; left: 64%; animation-duration: 4s; animation-delay: 2.5s; }
.stars .star:nth-child(8) { width: 2px; height: 2px; top: 82%; left: 25%; animation-duration: 5s; animation-delay: 3s; }
.stars .star:nth-child(9) { width: 2px; height: 2px; top: 97%; left: 25%; animation-duration: 3.8s; animation-delay: 1.2s; }
.stars .star:nth-child(10) { width: 2px; height: 2px; top: 5%; left: 95%; animation-duration: 4.2s; animation-delay: 0.3s; }

.stars .star:nth-child(11) { width: 2px; height: 2px; top: 15%; left: 8%; animation-duration: 4.7s; animation-delay: 1.7s; }
.stars .star:nth-child(12) { width: 2px; height: 2px; top: 25%; left: 15%; animation-duration: 3.2s; animation-delay: 0.7s; }
.stars .star:nth-child(13) { width: 2px; height: 2px; top: 35%; left: 29%; animation-duration: 4.9s; animation-delay: 2.2s; }
.stars .star:nth-child(14) { width: 2px; height: 2px; top: 42%; left: 35%; animation-duration: 5.2s; animation-delay: 0.1s; }
.stars .star:nth-child(15) { width: 2px; height: 2px; top: 55%; left: 48%; animation-duration: 3.7s; animation-delay: 2.7s; }
.stars .star:nth-child(16) { width: 2px; height: 2px; top: 22%; left: 58%; animation-duration: 4.8s; animation-delay: 1.9s; }
.stars .star:nth-child(17) { width: 2px; height: 2px; top: 75%; left: 28%; animation-duration: 5.3s; animation-delay: 0.6s; }
.stars .star:nth-child(18) { width: 2px; height: 2px; top: 82%; left: 78%; animation-duration: 3.9s; animation-delay: 2.9s; }
.stars .star:nth-child(19) { width: 2px; height: 2px; top: 91%; left: 28%; animation-duration: 4.1s; animation-delay: 1.1s; }
.stars .star:nth-child(20) { width: 2px; height: 2px; top: 12%; left: 2%; animation-duration: 5.1s; animation-delay: 0.4s; }


/* Medium stars (大约 3x3px) */
.stars .star:nth-child(21) { width: 3px; height: 3px; top: 12%; left: 7%; animation-duration: 6s; animation-delay: 1s; }
.stars .star:nth-child(22) { width: 3px; height: 3px; top: 22%; left: 12%; animation-duration: 7s; animation-delay: 2s; }
.stars .star:nth-child(23) { width: 3px; height: 3px; top: 32%; left: 27%; animation-duration: 5.5s; animation-delay: 0.5s; }
.stars .star:nth-child(24) { width: 3px; height: 3px; top: 43%; left: 32%; animation-duration: 6.5s; animation-delay: 3s; }
.stars .star:nth-child(25) { width: 3px; height: 3px; top: 53%; left: 46%; animation-duration: 7.5s; animation-delay: 2.5s; }
.stars .star:nth-child(26) { width: 3px; height: 3px; top: 62%; left: 57%; animation-duration: 5s; animation-delay: 1.5s; }
.stars .star:nth-child(27) { width: 3px; height: 3px; top: 32%; left: 67%; animation-duration: 6s; animation-delay: 3.5s; }
.stars .star:nth-child(28) { width: 3px; height: 3px; top: 82%; left: 77%; animation-duration: 7s; animation-delay: 4s; }
.stars .star:nth-child(29) { width: 3px; height: 3px; top: 92%; left: 87%; animation-duration: 5.8s; animation-delay: 1.8s; }
.stars .star:nth-child(30) { width: 3px; height: 3px; top: 7%; left: 92%; animation-duration: 6.2s; animation-delay: 0.8s; }

.stars .star:nth-child(31) { width: 3px; height: 3px; top: 18%; left: 10%; animation-duration: 6.7s; animation-delay: 2.7s; }
.stars .star:nth-child(32) { width: 3px; height: 3px; top: 28%; left: 20%; animation-duration: 5.2s; animation-delay: 1.2s; }
.stars .star:nth-child(33) { width: 3px; height: 3px; top: 32%; left: 30%; animation-duration: 6.9s; animation-delay: 3.2s; }
.stars .star:nth-child(34) { width: 3px; height: 3px; top: 42%; left: 40%; animation-duration: 7.2s; animation-delay: 0.2s; }
.stars .star:nth-child(35) { width: 3px; height: 3px; top: 52%; left: 50%; animation-duration: 5.7s; animation-delay: 3.7s; }
.stars .star:nth-child(36) { width: 3px; height: 3px; top: 66%; left: 60%; animation-duration: 6.8s; animation-delay: 2.9s; }
.stars .star:nth-child(37) { width: 3px; height: 3px; top: 78%; left: 20%; animation-duration: 7.3s; animation-delay: 1.6s; }
.stars .star:nth-child(38) { width: 3px; height: 3px; top: 83%; left: 80%; animation-duration: 5.9s; animation-delay: 3.9s; }
.stars .star:nth-child(39) { width: 3px; height: 3px; top: 98%; left: 90%; animation-duration: 6.1s; animation-delay: 2.1s; }
.stars .star:nth-child(40) { width: 3px; height: 3px; top: 3%; left: 5%; animation-duration: 7.1s; animation-delay: 0.9s; }


/* Large stars (大约 4x4px) */
.stars .star:nth-child(41) { width: 4px; height: 4px; top: 1%; left: 80%; animation-duration: 8s; animation-delay: 0.5s; }
.stars .star:nth-child(42) { width: 4px; height: 4px; top: 10%; left: 90%; animation-duration: 9s; animation-delay: 1.5s; }
.stars .star:nth-child(43) { width: 4px; height: 4px; top: 25%; left: 5%; animation-duration: 7.5s; animation-delay: 0s; }
.stars .star:nth-child(44) { width: 4px; height: 4px; top: 50%; left: 95%; animation-duration: 8.5s; animation-delay: 2s; }
.stars .star:nth-child(45) { width: 4px; height: 4px; top: 70%; left: 10%; animation-duration: 9.5s; animation-delay: 1s; }
.stars .star:nth-child(46) { width: 4px; height: 4px; top: 25%; left: 46%; animation-duration: 7s; animation-delay: 2.5s; }
.stars .star:nth-child(47) { width: 4px; height: 4px; top: 99%; left: 70%; animation-duration: 8s; animation-delay: 0.2s; }
.stars .star:nth-child(48) { width: 4px; height: 4px; top: 5%; left: 53%; animation-duration: 9s; animation-delay: 3s; }
.stars .star:nth-child(49) { width: 4px; height: 4px; top: 30%; left: 60%; animation-duration: 7.8s; animation-delay: 1.2s; }
.stars .star:nth-child(50) { width: 4px; height: 4px; top: 60%; left: 20%; animation-duration: 8.2s; animation-delay: 0.8s; }