/* ==== 舊版網站樣式 ==== */
/* Chosen Palette: Warm Neutral Archive */
        :root {
            --paper-bg: #fdfbf7;
            --ink-black: #2c2c2c;
            --ink-light: #595959;
            --alert-red: #a63e3e;
            --highlight-gold: #d4af37;
            --muted-gray: #e5e5e5;
        }

        body {
            background-color: var(--paper-bg);
            color: var(--ink-black);
            font-family: 'Noto Sans TC', sans-serif;
        }

        h1,
        h2,
        h3,
        .serif {
            font-family: 'Noto Serif TC', serif;
        }

        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 300px;
            max-height: 400px;
        }

        @media (min-width: 768px) {
            .chart-container {
                height: 350px;
            }
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        .interactive-card {
            transition: all 0.3s ease;
        }

        .interactive-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in-out forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 圖片佔位符與輪播樣式 */
        .image-placeholder {
            background-color: #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        .image-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
        }

        .carousel-slide {
            transition: opacity 1.5s ease-in-out;
        }

/* ==== 228 Intro Screen 樣式 ==== */
/* ==== 全局與重置 (Global & Reset) ==== */
:root {
    --color-bg: #050505;       /* 極深的炭黑色 */
    --color-text-main: #e0e0e0; /* 略顯蒼白的灰白色 */
    --color-blood: #6b0000;     /* 乾涸的暗紅色 */
    --color-blood-bright: #b80000; /* 較鮮豔的血紅色（用於高光或特效） */
    --font-heading: 'Noto Serif TC', serif;
}

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

#intro-screen {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-heading);
    overflow: hidden; /* 隱藏滾動條，確保沉浸感 */
    width: 100vw;
    height: 100vh;
    position: relative;
    cursor: crosshair; /* 游標改為十字準星，增加不安感 */
}

/* ==== 雜訊覆蓋層 (Noise Overlay) ==== */
/* 利用 CSS 偽元素加上 SVG 雜訊，模擬老舊歷史檔案的顆粒感 */
.noise-overlay {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200vh;
    background: transparent url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.15"/%3E%3C/svg%3E');
    animation: noiseAnimation 0.2s infinite linear;
    pointer-events: none; /* 讓點擊事件穿透 */
    z-index: 10;
}

@keyframes noiseAnimation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,15%) }
    80% { transform: translate(3%,35%) }
    90% { transform: translate(-10%,10%) }
    100% { transform: translate(0,0) }
}

/* ==== 粒子系統 Canvas ==== */
#particleCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ==== 主視覺區塊 (Hero Section) ==== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 100%);
}

.content-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

/* 年份標示 - 暗沉且有呼吸光暈 */
.year-marker {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.5rem;
    color: rgba(255, 255, 255, 0.1);
    position: relative;
    animation: pulseGlow 4s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
    0% {
        color: rgba(255, 255, 255, 0.1);
        text-shadow: 0 0 10px transparent;
    }
    100% {
        color: var(--color-blood);
        text-shadow: 0 0 20px var(--color-blood), 0 0 40px var(--color-blood);
    }
}


/* ==== 故障/撕裂文字特效 (Glitch Text) ==== */
.glitch-title {
    font-size: 8rem;
    font-weight: 900;
    position: relative;
    letter-spacing: 2rem;
    margin-right: -2rem; /* 修正因為 letter-spacing 造成的居中偏移 */
    color: var(--color-text-main);
}

.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg); /* 覆蓋底部文字，避免太雜亂 */
}

/* 紅色錯位 */
.glitch-title::before {
    left: -4px;
    text-shadow: 2px 0 var(--color-blood-bright);
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
    clip-path: inset(20% 0 80% 0);
}

/* 輕微的白/灰錯位 */
.glitch-title::after {
    left: 4px;
    text-shadow: -2px 0 rgba(255,255,255,0.3);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
    clip-path: inset(80% 0 10% 0);
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(20% 0 80% 0); }
    20% { clip-path: inset(60% 0 10% 0); }
    40% { clip-path: inset(40% 0 50% 0); }
    60% { clip-path: inset(80% 0 5% 0); }
    80% { clip-path: inset(10% 0 70% 0); }
    100% { clip-path: inset(30% 0 20% 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(10% 0 60% 0); }
    20% { clip-path: inset(80% 0 5% 0); }
    40% { clip-path: inset(30% 0 40% 0); }
    60% { clip-path: inset(60% 0 20% 0); }
    80% { clip-path: inset(5% 0 80% 0); }
    100% { clip-path: inset(40% 0 10% 0); }
}

/* ==== 副標題與淡入 ==== */
.subtitle {
    font-size: 1.2rem;
    letter-spacing: 0.5rem;
    color: rgba(224, 224, 224, 0.6);
    opacity: 0;
    animation: fadeInFadeOut 8s infinite ease-in-out;
}

@keyframes fadeInFadeOut {
    0%, 10% { opacity: 0; transform: translateY(10px); }
    40%, 60% { opacity: 1; transform: translateY(0); }
    90%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* 背景中央隱約的紅色出血暈染 */
.blood-stain {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139,0,0,0.2) 0%, transparent 60%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    filter: blur(20px);
}


#intro-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    z-index: 100;
    transition: opacity 1.5s ease, visibility 1.5s;
}

#intro-screen.hidden-intro {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}