/* ==========================================================================
   1. 核心变量池 (架构中心)
   ========================================================================== */
:root {
    /* 字体 */
    --font-main: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-english: 'Helvetica Neue', Arial, sans-serif;

    /* 颜色与透明度 */
    --color-white: rgba(255, 255, 255, 1);
    --text-primary: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.35);
    --text-footer: rgba(255, 255, 255, 0.45);
    --line-color: rgba(255, 255, 255, 0.3);

    /* 布局与动画 */
    --safe-width: 1920px;
    --safe-height: 1080px;
    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1); /* 提取顶级丝滑曲线 */
}

/* ==========================================================================
   2. 全局重置与渲染优化
   ========================================================================== */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html {
    background-color: #000;
    width: 100%; height: 100%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    user-select: none; -webkit-user-select: none;
}

/* --- 3. 舞台与背景封装 --- */
.stage {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #000; z-index: 1; overflow: hidden;
}

.video-bg {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.6) contrast(1.05);
    transition: filter 1.2s var(--ease-smooth), transform 1.2s var(--ease-smooth);
}

/* 当进入二级页面时，视频只负责变暗和轻微放大 */
.video-bg.dimmed {
    filter: brightness(0.25); /* 压低亮度，为玻璃感做铺垫 */
    transform: scale(1.5);   /* 稍微放大，避免模糊边缘露白 */
}

.video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 默认状态：只有淡淡的径向阴影 */
    background: radial-gradient(circle at center, transparent, rgba(0,0,0,0.3));
    transition: all 1.2s var(--ease-smooth);
    pointer-events: none;
    z-index: 2;
}

/* 🌟 核心：当背景变暗时，Overlay 转化为毛玻璃质感 */
.video-bg.dimmed + .video-overlay {
    /* 1. 模糊背后的视频 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* 2. 叠加层：胶片噪点 + 极淡的黑色遮罩 */
    background:
            url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1080' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E"),
            rgba(0, 0, 0, 0.2); /* 淡淡的黑色，增加玻璃厚度感 */
}

/* ==========================================================================
   4. 容器架构
   ========================================================================== */
.safe-container {
    position: relative;
    width: var(--safe-width); height: var(--safe-height);
    z-index: 10; flex-shrink: 0;
    will-change: transform; transform-origin: center center;
}

/* ==========================================================================
   5. 模块化组件
   ========================================================================== */
/* 5.1 导航与 Logo */
.logo { position: absolute; left: 35px; top: 31px; width: 150px; height: 82px; z-index: 100;}
.logo img { width: 100%; height: 100%; }

.nav-group { position: absolute; right: 36px; top: 49px; display: flex; gap: 75px; align-items: center; z-index: 100;}
.nav-item { transition: 0.3s ease; opacity: 0.8; height: 38px; display: block; }
.nav-item:hover { opacity: 1; transform: translateY(-3px); }
.nav-item.active { opacity: 1; }

/* 5.2 中心文案系统 */
.hero-content {
    position: absolute; left: 35px; top: 50%;
    transform: translateY(-60%);
    font-family: var(--font-main); font-weight: 100;
}

.hero-title {
    font-family: var(--font-english);
    font-size: 32px; letter-spacing: 12px; margin-bottom: 10px;
    color: var(--color-white); text-transform: uppercase; font-weight: 100;
}

.hero-subtitle {
    font-size: 12px; letter-spacing: 8px; color: var(--text-muted);
    text-transform: uppercase; margin-bottom: 60px;
}

.poetry-box { display: inline-block; text-align: center; }

.poetry-main {
    font-size: 20px; line-height: 2.8; letter-spacing: 7px; color: var(--text-primary);
}

.poetry-footer {
    margin-top: 55px; display: flex; align-items: center; justify-content: flex-end;
    font-size: 16px; color: var(--text-footer); letter-spacing: 4px;
}

.footer-line { width: 60px; height: 1px; background: var(--line-color); margin-right: 20px; }

/* 5.3 底部交互区 */
.social-group { position: absolute; left: 35px; bottom: 26px; display: flex; gap: 30px; align-items: center; z-index: 100;}
.social-item { transition: 0.3s ease; opacity: 0.35; display: flex; align-items: center; }
.social-item:hover { opacity: 1; transform: scale(1.1); }

/* 邮件联系区 */
.email-contact {
    position: absolute; right: 35px; bottom: 26px;
    font-family: var(--font-english); font-size: 12px; letter-spacing: 2px;
    color: var(--color-white); opacity: 0.45; cursor: pointer;
    transition: opacity 0.3s ease; z-index: 100;
}

.email-contact:hover { opacity: 1; }

.copy-tip {
    position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
    padding: 5px 20px; background: rgba(255,255,255,0.35); color: #000;
    font-size: 14px; letter-spacing: 3px; border-radius: 10px;
    opacity: 0; pointer-events: none; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.copy-tip.show { opacity: 1; top: -45px; }

/* ==========================================================================
   6. SPA 视图图层引擎
   ========================================================================== */
.view-section {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
    transition: opacity 0.8s var(--ease-smooth); z-index: 50;
}
.view-section.active { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   7. 核心内容容器 (呈影 & 浮光共享区域)
   ========================================================================== */
.gallery-wrapper, .candid-wrapper {
    position: absolute;
    top: 130px; left: 160px; right: 50px; bottom: 80px;
    overflow-y: auto; padding-right: 20px;
}
/* 统一隐藏滚动条 */
.gallery-wrapper::-webkit-scrollbar, .candid-wrapper::-webkit-scrollbar { width: 0; }
/* 浮光专属平滑滚动 */
.candid-wrapper { scroll-behavior: smooth; }

/* ==========================================================================
   8. 呈影画廊 (Bento Grid)
   ========================================================================== */
.bento-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 111px;
    grid-auto-flow: dense;
    gap: 15px;
}

.photo-item {
    position: relative; overflow: hidden; border-radius: 0px; cursor: zoom-in;
    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.08);
}

.photo-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s var(--ease-smooth);
    display: block;
}
.photo-item:hover img { transform: scale(1.04); }
/* ==========================================================================
   毛玻璃面板 (背景、噪点与模糊度)
   ========================================================================== */
.photo-info {
    position: absolute; bottom: 0; left: 0; right: 0; height: 40px; padding: 0 15px;
    display: flex; justify-content: space-between; align-items: center;
    /* 🎨 核心：背景叠加层 (噪点图 + 颜色层) */
    background:
        /* 1. 胶片噪点层：想要噪点淡一点，就把最后的 opacity='0.35' 调小 (比如 0.15) */
            url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.2'/%3E%3C/svg%3E"),
                /* 2. 底色渐变层：控制面板颜色的关键！
               目前是半透明白色。如果你想要深色毛玻璃，可以改成黑色：
               linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)) */
            linear-gradient(rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.40));
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    pointer-events: none; z-index: 5;
}

.info-left, .info-right {
    font-family: var(--font-main);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px; letter-spacing: 3px; font-weight: 300;
}

.lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.98); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out; opacity: 0; transition: opacity 0.4s ease;
}
.lightbox-overlay.show { opacity: 1; }
.full-image { max-width: 90%; max-height: 90vh; object-fit: contain; }

/* ==========================================================================
   9. 呈影导航 (垂直书脊排版)
   ========================================================================== */
.category-spine {
    position: absolute; left: 80px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 50px; z-index: 60;
}

.spine-text {
    font-family: var(--font-english); font-size: 16px; letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.25); cursor: pointer;
    transition: all 0.5s var(--ease-smooth);
    writing-mode: vertical-rl; transform: rotate(180deg);
    display: flex; align-items: center;
}

.spine-text:hover { color: rgba(255, 255, 255, 0.6); }
.spine-text.active { color: rgba(255, 255, 255, 0.75); }
.spine-text.active::after {
    content: ''; display: inline-block; width: 3px; height: 3px;
    background: var(--text-primary); border-radius: 50%; margin-bottom: 12px;
}

/* ==========================================================================
   10. 浮光画廊 (瀑布流布局)
   ========================================================================== */
.candid-grid {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
}

.candid-column {
    flex: 1; /* 自动平分 5 列的宽度 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 🌟 最外层容器：允许标签溢出 */
.candid-item {
    position: relative;
    overflow: visible;
    cursor: zoom-in;
}

/* 🌟 内层相框：隐藏溢出的放大图片，保持边框固定 */
.candid-item .photo-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 2px; /* 圆角放在相框上 */
    background: rgba(255, 255, 255, 0.05); /* 防止图片加载前的闪烁 */
}

.candid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s var(--ease-smooth); /* 动效与呈影对齐 */
}

/* 鼠标悬停时，只有相框内部的图片放大 */
.candid-item:hover img {
    transform: scale(1.04);
}

/* 🌟 浮光专属调整：复用呈影毛玻璃，但默认透明，悬停浮现 */
.candid-item .photo-info {
    opacity: 1;
    /*transition: opacity 0.5s ease;*/
}

.candid-item:hover .photo-info {
    opacity: 1;
}

/* 悬浮在照片左侧的年月标签保持不变 */
.year-tag {
    position: absolute;
    left: -45px; top: 0px;
    font-family: var(--font-english);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    pointer-events: none;
    z-index: 10;
}

/* ==========================================================================
   11. 浮光时间轴 (档案式垂直堆叠)
   ========================================================================== */
.candid-timeline {
    position: fixed; left: 80px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 35px; z-index: 100;
    pointer-events: none; /* 防遮挡，让空白处点击能穿透到底部层 */
}

.year-block {
    display: flex; flex-direction: column; align-items: center;
    opacity: 0.25; transition: all 0.5s var(--ease-smooth);
    pointer-events: auto; /* 恢复文字区域的点击能力 */
}
.year-block.active { opacity: 0.8; }

.year-label {
    font-family: var(--font-english); font-size: 18px; font-weight: 350;
    letter-spacing: 3px; writing-mode: vertical-lr; transform: rotate(180deg);
    color: #fff; margin-bottom: 24px;
}

.months-bar {
    display: flex; flex-direction: column; align-items: center;
    gap: 30px;
}

/* 单个月份刻度与呼吸圆点 */
.month-tick {
    font-family: var(--font-english); font-size: 14px; font-weight: 300;
    cursor: pointer; color: rgba(255, 255, 255, 1);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    writing-mode: horizontal-tb; transform: none;
    position: relative; padding-bottom: 6px;
    display: inline-flex; flex-direction: column; align-items: center;
}

.month-tick.active {
    color: #fff !important; opacity: 0.9; font-weight: 400;
}

.month-tick::after {
    content: ''; position: absolute; bottom: -2px; left: 50%;
    transform: translateX(-50%) scale(0);
    width: 3px; height: 3px; background: #fff; border-radius: 50%;
    opacity: 0; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.month-tick.active::after {
    opacity: 1; transform: translateX(-50%) scale(1);
    box-shadow: 0 0 6px rgba(255,255,255,0.6);
}