/* =========================================
   1. 全局设置 & 字体
   ========================================= */
:root {
    --timeline-color: #CD5C5C;
    --animation-duration: 3s;
}

@font-face {
    font-family: 'MyWebFont';
    src: url('https://nanyang-image.oss-cn-chengdu.aliyuncs.com/static/fonts/MyCustomFont.woff2') format('woff2'); font-display: block; 
    font-display: block; 
}

body {
    margin: 0;
    font-family: 'MyWebFont', sans-serif;
    background-image: url('../images/2.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh; 
    overflow: hidden; 
    position: relative;
    display: flex;
    flex-direction: column;
}

/* =========================================
   🕊️ 鸽子飞翔特效
   ========================================= */
#flying-dove {
    position: fixed; top: 10vh; left: -250px;    
    width: 200px; height: auto;
    animation: flyAcross 6s ease-out forwards;
    pointer-events: none; z-index: -1; opacity: 0.4; 
}

@keyframes flyAcross {
    0% { transform: translate(0, 0) scale(0.4) rotate(-15deg); opacity: 0; }
    10% { opacity: 0.4; }
    100% { transform: translate(calc(100vw + 250px), 70vh) scale(1.0) rotate(10deg); opacity: 0.4; }
}

/* =========================================
   2. 导航栏样式
   ========================================= */
.main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative; z-index: 1000; flex-shrink: 0; 
}
.main-nav ul { margin: 0; padding: 0; list-style: none; display: inline-block; }
.main-nav li { display: inline-block; margin: 0 15px; }
.main-nav a {
    color: #444; text-decoration: none; font-size: 16px;
    padding: 10px 0; transition: color 0.3s ease; position: relative; cursor: pointer;
}
.main-nav a:hover, .main-nav a.active { color: #000; }
.main-nav a.active::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 3px; background-color: #CD5C5C;
}

/* =========================================
   3. 页面核心布局 (灰色滚动条 + 左侧固定标题)
   ========================================= */
.page-content {
    flex: 1; width: 100%;
    overflow-x: auto; 
    overflow-y: hidden; 
    display: flex; flex-direction: column; 
    
    /* 靠左排列，防止内容溢出被切 */
    align-items: flex-start; 
    
    padding-bottom: 20px; 
    box-sizing: border-box;
}

/* 灰色滚动条 */
.page-content::-webkit-scrollbar { height: 12px; background-color: transparent; }
.page-content::-webkit-scrollbar-thumb {
    background-color: rgba(150, 150, 150, 0.6); 
    border-radius: 10px; border: 3px solid transparent; background-clip: content-box;
}
.page-content::-webkit-scrollbar-track { background-color: rgba(255,255,255,0.1); }

/* 标题样式：固定在左侧 */
.page-title {
    font-size: 48px;
    color: #4a4a4a;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3);
    text-align: center;
    flex-shrink: 0; 
    margin-top: 50px;
    margin-bottom: 80px; 
    width: 100%;
    position: sticky; left: 0;
}

/* =========================================
   4. 时间轴组件 (核心修改：调整终点位置)
   ========================================= */
.timeline-container {
    position: relative;
    display: flex;
    align-items: center;
    
    width: 80%; 
    /* 最小宽度保证小屏可滑动 */
    min-width: 900px; 
    
    flex-shrink: 0;
    min-height: 300px; 
    
    /* 智能居中 */
    margin: 0 auto;
    
    /* 【修改】恢复简洁的代码，去掉复杂的 padding */
    padding: 0;
}

/* 红色横线：恢复标准的 100% */
.timeline-bar {
    width: 100%; 
    height: 3px; background-color: var(--timeline-color); position: relative;
    animation: unfold var(--animation-duration) ease-out forwards;
}

/* 箭头 */
.timeline-bar::after {
    content: ''; position: absolute; 
    right: -1px; 
    top: 50%; transform: translateY(-50%);
    width: 0; height: 0; border-left: 12px solid var(--timeline-color);
    border-top: 8px solid transparent; border-bottom: 8px solid transparent;
    opacity: 0; animation: fade-in 0.5s forwards; animation-delay: var(--animation-duration);
}
/* 动画也恢复到 100% */
@keyframes unfold { from { width: 0%; } to { width: 100%; } }

/* 时间点与文字 */
.timeline-event { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; animation: fade-in-up 1s forwards; display: flex; justify-content: center; }

/* 响应式字体 */
.timeline-year { 
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); 
    color: var(--timeline-color); 
    font-size: clamp(12px, 1.5vw, 20px); 
    white-space: nowrap; 
}
.timeline-year.year-black { color: #333; }

.timeline-dot { width: 10px; height: 10px; background-color: var(--timeline-color); border-radius: 50%; }
.timeline-dot.large { width: 18px; height: 18px; }

/* 响应式字体 */
.timeline-name {
    position: absolute; left: 50%; transform: translateX(-50%);
    color: var(--timeline-color); 
    text-decoration: none;
    transition: all 0.3s ease; white-space: nowrap; writing-mode: vertical-rl; padding: 10px 0;
    font-size: clamp(14px, 1.6vw, 22px);
}
.timeline-name:hover { transform: translateX(-50%) scale(1.05); text-shadow: 0 0 8px rgba(205, 92, 92, 0.8); }
.timeline-name.name-top { bottom: 55px; }
.timeline-name.name-bottom { top: 30px; }

/* 【核心修改】调整最后两个点的位置，确保线比点长 */
#event-1931 { left: 0%; animation-delay: calc(var(--animation-duration) * 0.00); }
#event-1932 { left: 6.79%; animation-delay: calc(var(--animation-duration) * 0.07); }
#event-1933 { left: 13.57%; animation-delay: calc(var(--animation-duration) * 0.14); }
#event-1934 { left: 20.36%; animation-delay: calc(var(--animation-duration) * 0.20); }
#event-1935 { left: 27.14%; animation-delay: calc(var(--animation-duration) * 0.27); }
#event-1936 { left: 33.93%; animation-delay: calc(var(--animation-duration) * 0.34); }
#event-1937 { left: 40.71%; animation-delay: calc(var(--animation-duration) * 0.41); }
#event-1938 { left: 47.50%; animation-delay: calc(var(--animation-duration) * 0.47); }
#event-1939 { left: 54.29%; animation-delay: calc(var(--animation-duration) * 0.54); }
#event-1940 { left: 61.07%; animation-delay: calc(var(--animation-duration) * 0.61); }
#event-1941 { left: 67.86%; animation-delay: calc(var(--animation-duration) * 0.68); }
#event-1942 { left: 74.64%; animation-delay: calc(var(--animation-duration) * 0.75); }
#event-1943 { left: 81.43%; animation-delay: calc(var(--animation-duration) * 0.81); }
/* 微调倒数第二个点 */
#event-1944 { left: 87%; animation-delay: calc(var(--animation-duration) * 0.88); }
/* 【重点】终点设为 92%，线是 100%，保证留出 8% 的余量 */
#event-1945 { left: 92%; animation-delay: calc(var(--animation-duration) * 0.95); }

@keyframes fade-in-up { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   5. 侧边拉窗 (Side Panels)
   ========================================= */
.side-panel {
    position: fixed; top: 0; right: -500px; width: 500px; height: 100%;
    background-color: white; box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    z-index: 10001; transition: right 0.4s ease-in-out; overflow-y: auto;
}
.side-panel.is-visible { right: 0; }
.panel-content { width: 100%; min-height: 100%; background-size: cover; background-position: center; position: relative; }
.close-panel-btn {
    position: absolute; top: 15px; right: 15px; font-size: 30px; color: #aaa;
    background: none; border: none; cursor: pointer; line-height: 1; padding: 0; z-index: 10;
}
.close-panel-btn:hover { color: #333; }
#yingzi-panel .panel-content { background-image: url('../images/yingzi-profile-bg.webp'); }
#fengyimei-panel .panel-content { background-image: url('../images/fengyimei-profile-bg.webp'); }
#wangyingxia-panel .panel-content { background-image: url('../images/wangyingxia-profile-bg.webp'); }
#wangying-panel .panel-content { background-image: url('../images/wangying-profile-bg.webp'); }
#shenzjiu-panel .panel-content { background-image: url('../images/shenzjiu-profile-bg.webp'); }

/* --- 新增：侧边栏悬浮文字样式 --- */
/* 1. 整体拉窗文字容器 */
.text-overlay {
    position: relative; 
    width: 100%;
    /* 第一个数字px 控制整体往下移的距离，觉得高了就改成 120px 或更大 */
    padding: 110px 50px 30px 50px; 
    box-sizing: border-box;
    color: #4A3525;
}

/* 2. 针对名字 (h2) - 放在右上方 */
.text-overlay h2 {
    margin: 0 0 30px 45%; /* 45% 是往右挤的距离，可以根据你的头像宽度微调 */
    font-size: 32px; /* 字体加大 */
    text-shadow: none; /* 确保没有水印 */
}

/* 3. 针对第一段文字 - 跟着名字放在右上方 */
.text-overlay p:first-of-type {
    margin: 0 0 50px 45%; /* 同样往右挤，50px是为了和下方正文拉开距离，避开头像底部 */
    font-size: 18px; /* 字体稍微比正文大一点 */
    line-height: 1.8;
    text-shadow: none;
    text-align: justify;
}

/* 4. 针对剩下的段落 - 放在原来的下方 */
.text-overlay p:not(:first-of-type) {
    margin: 0 0 10px 0; /* 没有往右挤，恢复全宽 */
    font-size: 15px; /* 原本的正文大小 */
    line-height: 1.8;
    text-shadow: none;
    text-align: justify;
}
.page-hint {
    position: fixed; bottom: 20px; right: 30px; background-color: rgba(255, 255, 255, 0.7);
    color: #555; padding: 5px 15px; border-radius: 15px; font-size: 14px; z-index: 999;
}
.page-hint p { margin: 0; }

/* =========================================
   1. 电脑端专属背景设置 (默认)
   ========================================= */
/* 注意：请务必去 HTML 的 body 标签加上 class="page-style-2" */
.page-style-2 {
    background-image: url('../images/2.webp'); /* 电脑端图片 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* 电脑端固定背景 */
}

/* =========================================
   2. 手机端适配 (合并版)
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* --- A. 原有的布局调整 --- */
    .main-nav { overflow-x: auto; white-space: nowrap; }
    .main-nav ul { padding: 0 10px; display: inline-block; min-width: 100%; box-sizing: border-box; }
    
    .page-title {
        font-size: 32px;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .timeline-container { 
        min-width: 800px; 
        width: 90%; 
        padding: 0;      /* 恢复默认 padding */
        margin-left: 20px; /* 智能居中 */
        margin-right: auto;
    }
    
    .side-panel { width: 95%; right: -95%; }
    .side-panel .panel-content { 
        background-position: center top; 
    }
    /* 手机端悬浮文字适配 */
    .text-overlay {
        padding: 120px 50px 20px 50px; /* 手机端整体靠上一点 */
    }
    .text-overlay h2 { 
        margin: 0 0 20px 40%; /* 手机屏幕窄，往右挤 40% 即可 */
        font-size: 22px; 
    }
    .text-overlay p:first-of-type { 
        margin: 0 0 30px 40%; 
        font-size: 15px; 
    }
    .text-overlay p:not(:first-of-type) {
        font-size: 14px;
    }

    /* --- B. 新增：背景图切换 (针对 .page-style-2) --- */
    .page-style-2 {
        /* 切换为手机竖屏背景 2-mobile.webp */
        background-image: url('../images/2-mobile.webp') !important;
        
        /* 核心三件套：居中、锁定不滚动、铺满 */
        background-position: center top; 
        background-attachment: fixed !important; 
        background-size: cover !important;
        
        /* 确保高度撑满 */
        min-height: 100vh;
    }
}
/* 基础背景设置（电脑端或其他默认背景） */
.archive-container {
    background-image: url('your-desktop-bg.webp');
    background-size: cover;
    background-attachment: fixed;
}

/* 针对手机端的响应式修改 */
@media screen and (max-width: 768px) {
    body {
        /* 将背景绑定在 body 上，确保它相对于视口固定，而不是随时间轴滚动 */
        background-image: url('2-mobile.webp') !important;
        background-attachment: fixed; /* 核心：背景固定，不随滚动条移动 */
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .archive-container {
        /* 清除容器自身的背景，避免遮挡 body 背景 */
        background: transparent !important;
        
        /* 确保你的时间轴容器允许横向溢出 */
        overflow-x: auto; 
        display: block;
        width: 100%;
    }
}