/* ================================
   GLOBAL RESET
================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0a0a0f;
    color: #fff;
    font-family: 'EB Garamond', serif;
    min-height: 100vh;
}

/* ================================
   HEADER
================================ */
header {
    height: 70px;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #222;
}

.header-container {
    width: 100%;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.4rem;
    color: #d4af37;
    text-decoration: none;
}

.brand-name {
    font-family: 'EB Garamond', serif;
    font-weight: 700;
    color: #d4af37;
    text-shadow: 0 0 20px rgba(212, 175, 87, 0.4);
    font-size: 1.5rem;
}

.ai {
    font-family: 'Cinzel Decorative', cursive;
    color: #ff4d4d;
    text-shadow:
        0 0 15px #ff4d4d,
        0 0 30px #ff4d4d,
        0 0 60px #ff4d4d99,
        0 0 120px #ff4d4d66;
    animation: neonPulseRed 0.5s infinite alternate ease-in-out;
}

@keyframes neonPulseRed {
    0% {
        text-shadow:
            0 0 15px #ff4d4d,
            0 0 30px #ff4d4d,
            0 0 60px #ff4d4d99,
            0 0 120px #ff4d4d66;
    }
    100% {
        text-shadow:
            0 0 25px #ff4d4d,
            0 0 50px #ff4d4d,
            0 0 100px #ff4d4dcc,
            0 0 200px #ff4d4d88;
    }
}


.visions {
    font-family: 'Cinzel Decorative', cursive;
    color: #d4af37;
    text-shadow: 0 0 20px rgba(212, 175, 87, 0.4);
}

/* ================================
   HERO SECTION
================================ */
.page-hero {
    text-align: center;
    padding: 3rem 5% 2rem;
}

.hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #333;
    display: block;
}

.album-title-main {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    font-style: italic;
}

/* ================================
   GALLERY
================================ */
.gallery {
    padding: 0 5% 5rem;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.gallery-item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #333;
    transition: transform 0.3s, box-shadow 0.3s;
    aspect-ratio: 1 / 1;
    position: relative;
    background: #111;
}

.gallery-item:hover {
    transform: scale(1.04);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Like button inside gallery */
.like-container {
    position: absolute;
    bottom: 0.6rem;
    right: 0.6rem;
}

/* ================================
   LIGHTBOX
================================ */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    text-align: center;
}

.lightbox img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
}

.close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 2.5rem;
    cursor: pointer;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    cursor: pointer;
    user-select: none;
}

.prev { left: 10px; }
.next { right: 10px; }

.nav-area {
    position: absolute;
    top: 0;
    width: 40%;
    height: 70%;
    cursor: pointer;
    z-index: 10;
}

.prev-area { left: 0; }
.next-area { right: 0; }

/* ================================
   MOBILE
================================ */
@media (max-width: 480px) {
    .header-container {
        padding: 0 3%;
    }

    .hero-image {
        max-width: 98%;
        margin-bottom: 1.2rem;
    }
}


/* ================================
   MANGA ART
   主題色：金色 #d4af37
   動畫：紅色漫畫風 glow
================================ */
body.manga {
    --theme-color: #d4af37; /* 主題金色 */
    --theme-shadow: rgba(212, 175, 87, 0.6);
    --theme-font: 'Bangers', cursive; /* 漫畫風字體 */
}

/* 大標題（漫畫風 + 金色） */
body.manga .album-title-main {
    font-family: var(--theme-font);
    color: var(--theme-color); /* 金色 */
    letter-spacing: 2px;
    text-shadow:
        4px 4px 0 #000,
        6px 6px 0 #ff4d4d33; /* 淡紅漫畫陰影 */
    animation: neonPulseManga 2s infinite alternate ease-in-out;
}

/* 返回按鈕（漫畫風 + 金色） */
body.manga header .header-container a.back-to-category {
    all: unset;

    font-family: var(--theme-font);
    font-size: 1.4rem;
    letter-spacing: 1.5px;

    color: var(--theme-color); /* 金色 */
    text-shadow:
        4px 4px 0 #000,
        6px 6px 0 #ff4d4d33;

    animation: neonPulseManga 2s infinite alternate ease-in-out;

    cursor: pointer;
}

/* Lightbox 按鈕 */
body.manga .close-btn,
body.manga .nav-btn {
    color: var(--theme-color); /* 金色 */
}

/* Gallery hover */
body.manga .gallery-item:hover {
    box-shadow: 0 15px 40px rgba(212, 175, 87, 0.25); /* 金色光暈 */
}

/* 漫畫風紅色 glow 動畫（裝飾，不是主題色） */
@keyframes neonPulseManga {
    from {
        text-shadow:
            0 0 10px #ff4d4d,
            4px 4px 0 #000,
            6px 6px 0 #ff4d4d33;
    }
    to {
        text-shadow:
            0 0 40px #ff4d4d,
            4px 4px 0 #000,
            6px 6px 0 #ff4d4d66;
    }
}

/* ================================
   FICTIONAL PORTRAITS
================================ */
body.fictional {
    --theme-color: #e0c9a6; /* 奶金色 */
    --theme-shadow: rgba(224, 201, 166, 0.6);
    --theme-font: 'Cormorant Garamond', serif;
}

/* 大標題（古典金色柔光） */
body.fictional .album-title-main {
    font-family: var(--theme-font);
    font-weight: 700;
    font-style: italic;
    color: var(--theme-color);
    letter-spacing: 1px;

    animation: neonPulsePortraits 3s infinite alternate ease-in-out;
}

/* 返回按鈕（同樣柔光金色） */
body.fictional header .header-container a.back-to-category {
    all: unset;

    font-family: var(--theme-font);
    font-weight: 700;
    font-style: italic;
    font-size: 1.4rem;
    letter-spacing: 0.5px;

    color: var(--theme-color);

    animation: neonPulsePortraits 3s infinite alternate ease-in-out;

    cursor: pointer;
}

/* Lightbox 按鈕 */
body.fictional .close-btn,
body.fictional .nav-btn {
    color: var(--theme-color);
}

/* Gallery hover */
body.fictional .gallery-item:hover {
    box-shadow: 0 15px 40px rgba(224, 201, 166, 0.15);
}

/* 柔光金色呼吸動畫（主頁同款） */
@keyframes neonPulsePortraits {
    from {
        text-shadow:
            0 0 10px #d4af37,
            0 0 20px #d4af3777,
            0 0 30px #d4af3744;
    }
    to {
        text-shadow:
            0 0 20px #d4af37,
            0 0 40px #d4af37cc,
            0 0 60px #d4af3788,
            0 0 80px #d4af3744;
    }
}

/* ================================
   SCI-FI MYTHOLOGY
   主題色：霓虹藍 #00d4ff
   動畫：neonPulseSciFi（主頁同款）
================================ */
body.scifi {
    --theme-color: #00d4ff; /* 霓虹藍 */
    --theme-shadow: rgba(0, 212, 255, 0.6);
    --theme-font: 'Orbitron', sans-serif;
}

/* 大標題（科幻霓虹藍） */
body.scifi .album-title-main {
    font-family: var(--theme-font);
    color: var(--theme-color);
    letter-spacing: 4px;

    text-shadow:
        0 0 10px #00d4ff,
        0 0 20px #00d4ff88,
        0 0 40px #00d4ff44;

    animation: neonPulseSciFi 2.5s infinite alternate;
}

/* 返回按鈕（科幻霓虹藍） */
body.scifi header .header-container a.back-to-category {
    all: unset;

    font-family: var(--theme-font);
    font-size: 1.4rem;
    letter-spacing: 2px;

    color: var(--theme-color);

    text-shadow:
        0 0 10px #00d4ff,
        0 0 20px #00d4ff88,
        0 0 40px #00d4ff44;

    animation: neonPulseSciFi 2.5s infinite alternate;

    cursor: pointer;
}

/* Lightbox 按鈕 */
body.scifi .close-btn,
body.scifi .nav-btn {
    color: var(--theme-color);
}

/* Gallery hover（霓虹藍光暈） */
body.scifi .gallery-item:hover {
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.25);
}

/* 霓虹藍呼吸動畫（主頁同款） */
@keyframes neonPulseSciFi {
    from {
        text-shadow:
            0 0 10px #00d4ff,
            0 0 20px #00d4ff66;
    }
    to {
        text-shadow:
            0 0 20px #00d4ff,
            0 0 40px #00d4ffcc,
            0 0 60px #00d4ff88;
    }
}

/* ================================
   AI MODEL
   主題色：科技藍霓虹 #00eaff
   動畫：neonPulseAI（主頁同款）
================================ */
body.aimodel {
    --theme-color: #00eaff; /* 科技藍霓虹 */
    --theme-shadow: rgba(0, 234, 255, 0.6);
    --theme-font: 'Rajdhani', sans-serif;
}

/* 大標題（科技藍霓虹） */
body.aimodel .album-title-main {
    font-family: var(--theme-font);
    font-weight: 700;
    color: var(--theme-color);
    letter-spacing: 3px;

    text-shadow:
        0 0 10px #00eaff,
        0 0 20px #00eaff88,
        0 0 40px #00eaff44;

    animation: neonPulseAI 2s infinite alternate ease-in-out;
}

/* 返回按鈕（科技藍霓虹） */
body.aimodel header .header-container a.back-to-category {
    all: unset;

    font-family: var(--theme-font);
    font-size: 1.4rem;
    letter-spacing: 1.5px;

    color: var(--theme-color);

    text-shadow:
        0 0 10px #00eaff,
        0 0 20px #00eaff88,
        0 0 40px #00eaff44;

    animation: neonPulseAI 2s infinite alternate ease-in-out;

    cursor: pointer;
}

/* Lightbox 按鈕 */
body.aimodel .close-btn,
body.aimodel .nav-btn {
    color: var(--theme-color);
}

/* Gallery hover（科技藍光暈） */
body.aimodel .gallery-item:hover {
    box-shadow: 0 15px 40px rgba(0, 234, 255, 0.25);
}

/* 科技藍霓虹呼吸動畫（主頁同款） */
@keyframes neonPulseAI {
    from {
        text-shadow:
            0 0 10px #00eaff,
            0 0 20px #00eaff66;
    }
    to {
        text-shadow:
            0 0 20px #00eaff,
            0 0 40px #00eaffcc,
            0 0 60px #00eaff88;
    }
}

/* ================================
   18+ 主題頁面基礎 
=================================== */
body.adult18 {
    background: radial-gradient(circle at top, #1a0b1f 0, #050308 55%, #000000 100%);
    color: var(--text-color);
}

body.adult18 .album-header-title {
    color: var(--accent-color);
    text-shadow: 0 0 12px rgba(255, 47, 108, 0.7);
}

body.adult18 .album-meta-badge {
    border-color: var(--accent-color-soft);
    color: var(--muted-text-color);
    background: rgba(10, 2, 18, 0.9);
}

body.adult18 .album-thumb {
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 47, 108, 0.18),
                0 18px 40px rgba(0, 0, 0, 0.9);
}

body.adult18 .album-thumb:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--border-glow);
}

body.adult18 .pill-button {
    border-color: var(--accent-color-soft);
    color: var(--accent-color);
}

body.adult18 .pill-button.active,
body.adult18 .pill-button:hover {
    background: linear-gradient(135deg, #ff2f6c, #ff7a3c);
    color: #050308;
    box-shadow: 0 0 18px rgba(255, 47, 108, 0.7);
}