/* 速度控制（可快速微調） */
#bg-stars {
    --far-dur: 80s;
    --near-dur: 55s;
}

/* 固定在底層，避免攔截互動 */
#bg-stars,
#bg-stars .stars,
#bg-stars .twinkle {
    pointer-events: none;
}

/* 底色與漸層光暈（暗色系、護眼） */
#bg-stars.theme {
    background:
        radial-gradient(800px 600px at 20% 15%, rgba(14, 165, 233, 0.38) 0%, transparent 100%),
        radial-gradient(800px 600px at 80% 85%, rgba(139, 92, 246, 0.35) 0%, transparent 100%),
        linear-gradient(180deg, #0a0d14 0%, #080b10 100%);
}

/* 星點層（加速移動、使用平鋪與背景位移） */
#bg-stars .stars {
    position: fixed;
    inset: -2%;
    will-change: background-position;
    z-index: 1;
}

#bg-stars .stars.far {
    opacity: .42;
    background-repeat: repeat;
    background-size: clamp(360px, 40vw, 700px) clamp(360px, 40vw, 700px);
    animation: moveFar var(--far-dur) linear infinite;
}

#bg-stars .stars.near {
    opacity: .58;
    background-repeat: repeat;
    background-size: clamp(480px, 52vw, 900px) clamp(480px, 52vw, 900px);
    animation: moveNear var(--near-dur) linear infinite;
}

/* 微微閃爍 */
#bg-stars .twinkle {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .10;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 20%, #fff 98%, transparent),
        radial-gradient(1.2px 1.2px at 60% 70%, #fff 98%, transparent),
        radial-gradient(1.4px 1.4px at 80% 30%, #fff 98%, transparent),
        radial-gradient(1.0px 1.0px at 30% 85%, #fff 98%, transparent);
    background-size: 500px 500px, 620px 620px, 540px 540px, 680px 680px;
    animation: twinkle 5.6s ease-in-out infinite;
}

/* 底部地面陰影 */
#bg-stars::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(to top, rgba(0, 0, 0, .58) 0 22%, transparent 55%),
        radial-gradient(120% 120% at 50% 110%, rgba(255, 255, 255, .05) 0%, transparent 60%);
}

/* 邊緣暗角 */
#bg-stars::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(1000px 700px at 50% 50%, transparent 58%, rgba(0, 0, 0, .48) 100%);
}

/* 動畫 */
@keyframes moveFar {
    to {
        background-position: 900px 900px;
    }
}

@keyframes moveNear {
    to {
        background-position: 1300px 1300px;
    }
}

@keyframes twinkle {

    0%,
    100% {
        opacity: .04
    }

    50% {
        opacity: .16
    }
}

/* 行動裝置：略快但省電 */
@media (max-width:768px) {
    #bg-stars {
        --far-dur: 110s;
        --near-dur: 70s;
    }

    #bg-stars .stars.far {
        opacity: .35;
    }

    #bg-stars .stars.near {
        opacity: .50;
    }
}

@media (max-width:480px) {

    #bg-stars .stars.far,
    #bg-stars .stars.near {
        background-size: 100vw 100vw;
    }
}