/* html */
/* 
<div id="bg">
    <div class="stars far"></div>
    <div class="stars near"></div>
    <div class="twinkle"></div>   <!-- 可選：微微閃爍 -->
    <div class="meteor"></div>    <!-- 可選：偶爾流星 -->
</div>
 */



/* 固定在最底層，完全不吃滑鼠事件 */
#bg-stars.theme {
    background:
        radial-gradient(800px 600px at 20% 15%, rgba(14, 165, 233, 0.45) 0%, transparent 100%),
        radial-gradient(800px 600px at 80% 85%, rgba(139, 92, 246, 0.45) 0%, transparent 100%),
        linear-gradient(180deg, #0b0e12 0%, #0b0e12 100%);
}

/* 星點層：只做背景位移（GPU 合成） */
#bg-stars .stars {
    position: fixed;
    inset: -2%;
    will-change: background-position;
    z-index: 1;
}

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

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

/* 微微閃爍（可留可刪） */
#bg-stars .twinkle {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: .09;
    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 .meteor {
    --x: -10%;
    --y: -10%;
    --scale: 1;
    --dur: 1.6s;
    --delay: 0s;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 140px;
    height: 2px;
    z-index: 3;
    background: linear-gradient(90deg, #0000 0%, #eaf6ff 35%, #0000 100%);
    opacity: .18;
    transform: rotate(25deg) scaleX(var(--scale));
    filter: drop-shadow(0 0 4px #d9f2ff);
    animation: shoot var(--dur) linear var(--delay) infinite;
}

/* ★ 新增：底部地面陰影（讓畫面更有場景感） */
#bg-stars::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        /* 下緣壓黑 */
        linear-gradient(to top, rgba(0, 0, 0, .55) 0 22%, transparent 55%),
        /* 底部淡淡反光 */
        radial-gradient(120% 120% at 50% 110%, rgba(255, 255, 255, .06) 0%, transparent 60%);
}

/* 邊緣暗角，集中視線（覆蓋在最上面） */
#bg-stars::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: radial-gradient(1000px 700px at 50% 50%, transparent 58%, rgba(0, 0, 0, .42) 100%);
}

/* 動畫方向：斜向右下（與你截圖一致） */
@keyframes moveFar {
    to {
        background-position: 900px 900px;
    }
}

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

@keyframes twinkle {

    0%,
    100% {
        opacity: .04
    }

    50% {
        opacity: .16
    }
}

@keyframes shoot {
    to {
        transform: translate3d(120vw, 60vh, 0) rotate(25deg) scaleX(var(--scale));
        opacity: 0;
    }
}

/* 行動裝置：更淡/更慢，並確保星點不變大顆 */
@media (max-width:768px) {
    #bg-stars .stars.far {
        opacity: .38;
        animation-duration: 140s;
    }

    #bg-stars .stars.near {
        opacity: .56;
        animation-duration: 95s;
    }
}

@media (max-width:480px) {

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

/* 使用者偏好減少動態 */
@media (prefers-reduced-motion: reduce) {

    #bg-stars .stars,
    #bg-stars .twinkle,
    #bg-stars .meteor {
        animation: none;
    }
}

/* （若曾有視差）強制關閉滑鼠影響 */
#bg-stars {
    --px: 0px !important;
    --py: 0px !important;
}

#bg-stars .stars.far,
#bg-stars .stars.near {
    transform: translate3d(0, 0, 0) !important;
}