/* ===== 基本設定 ===== */
:root {
    --primary-color: #a3d8f4;
    --background-color: #0c0c1e;
    --text-color: #f0f0f0;
    --placeholder-bg: #2a2a4e; /* 色塊顏色 */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    overflow-x: hidden;
}

/* ===== 載入動畫 ===== */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

#loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-text {
    font-size: 2rem;
    color: var(--primary-color);
    letter-spacing: 5px;
}

/* ===== 頂部導覽列 ===== */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: rgba(12, 12, 30, 0.5);
    backdrop-filter: blur(5px);
    transition: top 0.3s;
}

.logo img {
    width: 75px;
    height: auto;
    max-height: 75px;
    display: block;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--primary-color);
}

.animated-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: #fff;
    white-space: nowrap;
}


/* ===== 主視覺區 (Hero Section) ===== */
#hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-background img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    opacity: 0.5;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    height: 100%;
}

.character-placeholders {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1000px;
    height: 85%;
}


/* ===== 角色通用與個別樣式 ===== */
.character {
    position: absolute;
    height: auto;
    object-fit: contain;
    object-position: bottom;
    opacity: 0;
    transform: translateY(50px);
    transition: transform 1s ease-out, opacity 1s ease-out;
}

.character.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 角色位置設定 --- */
#char-1 { left: -90%; bottom: -50px; width: 80%; z-index: 12; transition-delay: 0.1s; }
#char-2 { left: -67.14%; bottom: -50px; width: 80%; z-index: 13; transition-delay: 0.3s; }
#char-3 { left: -44.28%; bottom: -50px; width: 80%; z-index: 14; transition-delay: 0.5s; }
#char-4 { left: -21.42%; bottom: -50px; width: 80%; z-index: 15; transition-delay: 0.7s; }
#char-5 { left: 1.44%; bottom: -50px; width: 80%; z-index: 15; transition-delay: 0.7s; }
#char-6 { left: 24.3%; bottom: -50px; width: 80%; z-index: 14; transition-delay: 0.5s; }
#char-7 { left: 47.16%; bottom: -50px; width: 80%; z-index: 13; transition-delay: 0.3s; }
#char-8 { left: 70%; bottom: -50px; width: 80%; z-index: 12; transition-delay: 0.1s; }
#char-9 { left: -90%; bottom: 250px; width: 80%; z-index: 5; transition-delay: 0.9s; }
#char-10 { left: -67.14%; bottom: 250px; width: 80%; z-index: 6; transition-delay: 1.1s; }
#char-11 { left: -44.28%; bottom: 250px; width: 80%; z-index: 7; transition-delay: 1.3s; }
#char-12 { left: -21.42%; bottom: 250px; width: 80%; z-index: 8; transition-delay: 1.5s; }
#char-13 { left: 1.44%; bottom: 250px; width: 80%; z-index: 8; transition-delay: 1.5s; }
#char-14 { left: 24.3%; bottom: 250px; width: 80%; z-index: 7; transition-delay: 1.3s; }
#char-15 { left: 47.16%; bottom: 250px; width: 80%; z-index: 6; transition-delay: 1.1s; }
#char-16 { left: 70%; bottom: 250px; width: 80%; z-index: 5; transition-delay: 0.9s; }
#char-17 { left: -90%; bottom: 500px; width: 80%; z-index: 1; transition-delay: 1.8s; }
#char-18 { left: -63.33%; bottom: 500px; width: 80%; z-index: 2; transition-delay: 2.1s; }
#char-19 { left: -36.66%; bottom: 500px; width: 80%; z-index: 3; transition-delay: 2.3s; }
#char-20 { left: -10%; bottom: 500px; width: 80%; z-index: 4; transition-delay: 2.5s; }
#char-21 { left: 16.66%; bottom: 500px; width: 80%; z-index: 3; transition-delay: 2.3s; }
#char-22 { left: 43.33%; bottom: 500px; width: 80%; z-index: 2; transition-delay: 2.1s; }
#char-23 { left: 70%; bottom: 500px; width: 80%; z-index: 1; transition-delay: 1.8s; }


/* ===== 內容區塊通用設定 ===== */
.content-wrapper {
    background-color: #101024;
}

/* 這是所有區塊共用的最基礎樣式 */
.content-section {
    border-bottom: 1px solid var(--placeholder-bg);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    scroll-margin-top: 75px;
    padding: 100px 10%; /* 給予一個基礎的上下內距 */
}

.content-section:last-child {
    border-bottom: none;
}

/* 這是控制動畫的 class，保持不變 */
.content-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 通用的標題和段落樣式 */
.content-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    text-align: center;
}

.content-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

/* 【重要】這是一個獨立的 class，只用來實現全螢幕置中 */
.fullscreen-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 5%; /* 全螢幕區塊使用較小的上下內距 */
}

/* ===== Members 區塊 ===== */
.members-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    width: 100%;
}

.member-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 1000px;
    width: 100%;
    background-color: rgba(42, 42, 78, 0.5);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.member-image-wrapper {
    width: 850px;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.member-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-details {
    flex: 1;
}

.member-details p {
    text-align: center;
    max-width: none;
    margin-bottom: 1rem;
}


/* ===== Favorite/Music (影片) 區塊 ===== */
.video-container {
    position: relative;
    width: 100%;
    max-width: 640;
    margin: 2rem auto 0;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Stats (圖表) 區塊 ===== */
.chart-container {
    width: 100%;
    max-width: 800px;
    margin: 3rem auto 0;
    background-color: rgba(42, 42, 78, 0.5);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ===== 頁腳 (Footer) ===== */
footer {
    text-align: center;
    padding: 2rem;
    background-color: var(--background-color);
}

.social-links {
    margin-bottom: 2rem;
}

.social-links h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.social-links ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.social-links a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color);
}

/* ===== 響應式設計 (手機版) ===== */
@media (max-width: 768px) {
    #main-header {
        flex-direction: column;
        gap: 1rem;
    }

    .animated-text {
        position: static; /* 在手機版讓標題回歸正常排版 */
        order: -1; /* 讓標題顯示在 Logo 上方 */
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .content-section {
        padding: 4rem 5%; /* 調整手機版內邊距 */
    }

    /* 調整手機版 Member 圖片大小 */
    .member-image-wrapper {
        width: 100%; /* 寬度設為 100% */
        max-width: 300px; /* 但最大不超過 300px */
        height: auto; /* 高度自動 */
        aspect-ratio: 1 / 1; /* 維持 1:1 的正方形比例 */
    }
}