/* ================================
   OceanBot - 星空背景動畫
   純星空效果，不覆蓋 Filament 樣式
   ================================ */

/* 星空背景容器 */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(76, 29, 149, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(30, 58, 138, 0.12), transparent),
        radial-gradient(ellipse 50% 60% at 60% 80%, rgba(131, 24, 67, 0.08), transparent),
        radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d15 50%, #0a0a0f 100%);
    overflow: hidden;
}

/* 星星層 1 - 小星星 */
.stars-small {
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        1780px 1170px #fff, 480px 1350px #fff, 1440px 1020px #fff,
        260px 620px #fff, 1740px 1280px #fff, 1100px 340px #fff,
        420px 1480px #fff, 1920px 780px #fff, 680px 1140px #fff,
        1560px 1560px #fff, 1020px 1680px #fff, 1800px 420px #fff,
        340px 900px #fff, 1400px 1760px #fff, 920px 60px #fff,
        1620px 1300px #fff, 180px 1420px #fff, 1980px 1080px #fff,
        540px 240px #fff, 1260px 1920px #fff, 60px 1560px #fff,
        1660px 540px #fff, 1120px 1200px #fff, 380px 1800px #fff,
        1880px 120px #fff, 700px 1620px #fff, 1460px 840px #fff,
        280px 480px #fff, 1720px 1680px #fff, 1000px 1380px #fff;
    animation: twinkle-small 200s linear infinite;
}

/* 星星層 2 - 中等星星 */
.stars-medium {
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        1320px 880px #fff, 920px 1620px #fff, 1680px 340px #fff,
        580px 1760px #fff, 1980px 1440px #fff, 140px 1080px #fff,
        1540px 620px #fff, 780px 1920px #fff, 1820px 180px #fff,
        340px 1380px #fff, 1120px 1520px #fff, 1760px 920px #fff,
        460px 260px #fff, 1400px 1800px #fff, 1020px 540px #fff,
        1880px 1200px #fff, 220px 1640px #fff, 1600px 780px #fff,
        860px 1980px #fff, 1260px 420px #fff;
    animation: twinkle-medium 150s linear infinite;
}

/* 星星層 3 - 大星星 */
.stars-large {
    position: absolute;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow:
        960px 1440px #fff, 1560px 720px #fff, 480px 1680px #fff,
        1800px 960px #fff, 720px 240px #fff, 1320px 1800px #fff,
        180px 1200px #fff, 1680px 480px #fff, 1020px 1560px #fff,
        1920px 180px #fff;
    animation: twinkle-large 100s linear infinite;
}

/* 流星 */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5);
    animation: shooting 3s ease-out infinite;
    opacity: 0;
}

.shooting-star:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shooting-star:nth-child(2) {
    top: 60%;
    left: 80%;
    animation-delay: 2s;
}

.shooting-star:nth-child(3) {
    top: 40%;
    left: 50%;
    animation-delay: 4s;
}

/* 閃爍動畫 */
@keyframes twinkle-small {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

@keyframes twinkle-medium {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

@keyframes twinkle-large {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

@keyframes shooting {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(300px, 300px);
    }
}