/* 透明背景效果範例 */
:root {
    --sunny__day1: #4facfe;
    --sunny__day2: #00f2fe; 
    /* sunny 混合模式 normal */
    --cloudy__night1: #0f2027;
    --cloudy__night2: #2c5364;
    /* 混合模式screen */
    --rainy1: #3d3d3d;
    --rainy2: #242424;
    /* 混合模式 multiply */

}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    height: 100dvh;
    background-color: #242424;
}

/* 粒子特效層 */
.tsparticles {
    position: fixed;
    /* 固定定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 讓滑鼠可以穿透，點到下層的按鈕或卡片 */
}

/* 太陽光圈的 CSS */
#sunny-flare {
    display: none;
    position: fixed;
    z-index: 0;
    top: -350px;
    left: -350px;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle,
            rgb(247, 247, 247) 0%,
            rgb(247, 247, 247) 10%,
            rgba(247, 247, 247, 0.751) 15%,
            transparent 45%,
            rgba(255, 0, 0, 0.5) 60%,
            rgba(255, 255, 0, 0.5) 61%,
            rgba(15, 245, 34, 0.5) 62%,
            rgba(0, 255, 255, 0.5) 63%,
            rgba(247, 247, 247, 0.8) 67%,
            rgb(247, 247, 247) 70%,
            transparent 75%);
    filter: blur(40px);
    /* mix-blend-mode: screen; */
    z-index: 0;
    pointer-events: none;
    /* 應用動畫 */
    animation: pulse-glow 8s ease-in-out infinite;

    /* 確保旋轉和縮放的中心點在光圈中心 */
    transform-origin: center center;
}

@keyframes pulse-glow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
        /* 初始透明度 */
    }

    40% {
        transform: scale(1.2);
        /* 稍微放大一點點 */
        opacity: 0.9;
        /* 稍微變亮 */
        /* 1. saturate: 讓彩虹色更鮮豔
        2. contrast: 讓亮的中心更亮，暗的邊緣更乾淨
        3. drop-shadow: 創造一層額外的白色光暈，這比亮度濾鏡更像真實的光
        */
        filter: blur(40px) saturate(1.8) contrast(1.2) drop-shadow(0 0 25px rgba(255, 255, 255, 0.5));
    }

    60% {
        transform: scale(1.2);
        opacity: 0.9;
        filter: blur(40px) saturate(1.8) contrast(1.2) drop-shadow(0 0 25px rgba(255, 255, 255, 0.5));
    }
}

/* 閃電的 CSS */
.thunder-effect{ 
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -4;
    pointer-events: none;
}


#lightning-canvas {
    width: 100%;
    height: 100%;
    background: transparent;
}

#bg-color-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    /* 確保在所有圖層的最底層 */
    transition: background 1.5s ease;
    /* 緩慢變色的關鍵 */
}

/* 晴天：亮藍色漸層 */
.state-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00c7fec9 100%);
}

/* 陰天：沈穩的灰色漸層 */
.state-gray {
    background: linear-gradient(190deg, #7b7b7b 0%, #646464 70%, #292929 100%);
}

/* 晚上：深邃的夜空藍 */
.state-night {
    background: linear-gradient(155deg, #081115 0%, #101c21 80%, #1b323c 100%);
}

/*! 做給瑞秋的popover */

.location-popup__container {
    /* 用 anchor定位 focus 按鈕 */
    inset: unset;
    position: absolute;
    top: anchor(bottom);
    left: anchor(center);
    transform: translateX(-50%);
        /* 水平居中對齊 */
    margin-top: 20px;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 100;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@media (max-width:600px) {
    .location-popup__container {
        top: anchor(bottom);
        right: anchor(right);
        left: unset;
        transform: unset;
    }
}



.location-popup__container h4 {
    margin-bottom: 10px;
    font-size: 16px;
    letter-spacing: 0.1rem;
}

.location-popup__container p {
    font-size: 14px;
    margin-bottom: 10px;
}

.location-popup__info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.location-popup__container li {
    list-style: none;
    direction: none;
    color: white;
    padding: 5px 5px;
    font-size: 12px;
    letter-spacing: 0.1rem;
}


.location-popup__container hr {
    margin: 10px 0;
    color: rgba(255, 255, 255, 0.662);
}