/* Eclipse Background Effect - Main Styles */

:root {
    --eclipse-color-1: #00f450;
    --eclipse-color-2: #4937ff;
    --eclipse-color-3: #ee73f1;
    --eclipse-color-4: #992af2;
}

.eclipse-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Cover 圖層 - 最底層 */
.eclipse-cover-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://dev.8f-2.cc/sonicshaman/wp-content/uploads/2025/11/SONIC-SHAMAN-07_h_bg2.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    pointer-events: none;
    z-index: -2;
}

/* PNG 材質層 - 中間層 */
.eclipse-texture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://dev.8f-2.cc/sonicshaman/wp-content/uploads/2025/11/SONIC-SHAMAN-07_h_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    pointer-events: none;
    z-index: -1;
}

/* 背景顏色動畫 - 白色到黑色緩緩變化 */
@keyframes bg-color-change {
    0% {
        background-color: #ffffff;
    }
    50% {
        background-color: #000000;
    }
    100% {
        background-color: #ffffff;
    }
}

/* 背景容器淡出動畫 - 只改變 opacity */
@keyframes fade-out-bg-opacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 內容淡入動畫 */
@keyframes fade-in-content-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 行容器 */
.eclipse-row {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10vw;
}

.eclipse-row-1 {
    top: 0%;
    height: 200px;
}

.eclipse-row-2 {
    top: 20%;
    height: 220px;
}

.eclipse-row-3 {
    top: 30%;
    height: 200px;
}

.eclipse-row-4 {
    top: 50%;
    height: 220px;
}

.eclipse-row-5 {
    top: 85%;
    height: 220px;
}

.eclipse-row-6 {
    top: 95%;
    height: 200px;
}

.eclipse-row-7 {
    top: 105%;
    height: 220px;
}

.eclipse-row-8 {
    top: 115%;
    height: 200px;
}

.eclipse-row-9 {
    top: 125%;
    height: 220px;
}

.eclipse-row-10 {
    top: 135%;
    height: 200px;
}

/* 月全蝕單位 - 中間透明 - 更密集 */
.eclipse {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    margin-left: -60px;
}

/* 光暈層 */
.eclipse-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85vw;
    height: 85vw;
    border-radius: 50%;
}

/* 色彩變化 - 靜態顯示 */
.eclipse-1 .eclipse-halo {
    box-shadow: 0 0 80px 30px rgba(0, 255, 0, 1),
                0 0 120px 50px rgba(0, 255, 0, 0.50),
                0 0 160px 70px rgba(0, 255, 0, 0.08);
}

.eclipse-2 .eclipse-halo {
    box-shadow: 0 0 80px 30px rgba(0, 0, 255, 1),
                0 0 120px 50px rgba(0, 0, 255, 0.50),
                0 0 160px 70px rgba(0, 0, 255, 0.08);
}

.eclipse-3 .eclipse-halo {
    box-shadow: 0 0 80px 30px rgba(255, 0, 255, 1),
                0 0 120px 50px rgba(255, 0, 255, 0.50),
                0 0 160px 70px rgba(255, 0, 255, 0.08);
}

.eclipse-4 .eclipse-halo {
    box-shadow: 0 0 80px 30px rgba(255, 255, 0, 1),
                0 0 120px 50px rgba(255, 255, 0, 0.50),
                0 0 160px 70px rgba(255, 255, 0, 0.08);
}

/* 確保所有頁面內容都在背景上方 */
#content > * {
    position: relative;
}

body {
    position: relative;
}

html {
    background-color: #ffffff;
    animation: bg-color-change 8s ease-in-out infinite;
}