/* 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: -10vh;
    left: 0;
    width: 100%;
    height: 120vh; 
    pointer-events: none;
    z-index: -3;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* Cover 圖層 - 最底層 */
.eclipse-cover-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://sonicshaman.live/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: -4;
}

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

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

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

.eclipse-row-1 {
    top: 20%;
    height: 200px;
    animation: rotate-cw 320s linear infinite;
}

.eclipse-row-2 {
    top: 40%;
    height: 220px;
    animation: rotate-ccw 90s linear infinite;
}

.eclipse-row-3 {
    top: 60%;
    height: 200px;
    animation: rotate-cw 100s linear infinite;
}

.eclipse-row-4 {
    top: 80%;
    height: 220px;
    animation: rotate-ccw 140s linear infinite;
}

.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: 75vw;
    height: 75vw;
    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;
}

/* 定義順時針旋轉動畫 */
@keyframes rotate-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 定義逆時針旋轉動畫 */
@keyframes rotate-ccw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* 針對手機尺寸 (小於 768px) 的設定 */
@media screen and (max-width: 768px) {
    .eclipse-halo {
        width: 85vh;
        height: 85vh;
    }
    .eclipse-background-container {
        width: 200vw;
    }
}