/* 高级黑白灰主题配色与印刷级排版系统 */

:root {
    /* 基础色彩系统 - 黑白灰高级配色 */
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-dark: #1a1a1a;
    --background-light: #fafafa;

    /* 文字色彩 - 印刷级灰度系统 */
    --text-primary: #0a0a0a;
    --text-secondary: #4a4a4a;
    --text-muted: #8a8a8a;
    --text-light: #fafafa;

    /* 印刷级字体色彩微调 */
    --text-body: #1a1a1a;
    --text-headline: #0a0a0a;
    --text-caption: #6a6a6a;
    --text-subtle: #9a9a9a;

    /* 主色调 - 使用深灰色代替鲜艳颜色 */
    --primary-dark: #212529;
    --primary-medium: #495057;
    --primary-light: #868e96;

    /* 强调色 - 使用优雅的灰色 */
    --accent-primary: #343a40;
    --accent-secondary: #6c757d;
    --accent-light: #dee2e6;

    /* 特殊色彩 - 替换金色为优雅的灰色 */
    --special-gray: #495057;
    --special-silver: #868e96;
    --special-gold: #adb5bd; /* 替换为银灰色 */

    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #212529 0%, #495057 50%, #6c757d 100%);
    --gradient-subtle: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

    /* 边框和分割线 */
    --border-light: #dee2e6;
    --border-medium: #ced4da;
    --border-dark: #adb5bd;

    /* 玻璃效果 */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(207, 207, 207, 0.3);
    --glass-shadow: rgba(0, 0, 0, 0.1);

    /* 阴影 */
    --shadow-subtle: 0 2px 15px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 8px 32px rgba(52, 58, 64, 0.2);

    /* 章节背景色 - 黑白灰渐变 */
    --section-loading: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --section-prelude: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --section-opening: linear-gradient(135deg, #fafafa 0%, #f1f3f4 100%);
    --section-data: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --section-memories: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    --section-words: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --section-ending: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);

    /* 印刷级排版系统 */
    /* 基础字体大小 - 使用16px作为基准，符合印刷标准 */
    --font-size-base: 16px;

    /* 模块化比例系统 - 1.250 (Major Third) */
    --font-scale-ratio: 1.250;

    /* 字体大小系统 */
    --font-size-xs: calc(var(--font-size-base) / var(--font-scale-ratio) / var(--font-scale-ratio)); /* 10.24px */
    --font-size-sm: calc(var(--font-size-base) / var(--font-scale-ratio)); /* 12.8px */
    --font-size-base: 16px;
    --font-size-lg: calc(var(--font-size-base) * var(--font-scale-ratio)); /* 20px */
    --font-size-xl: calc(var(--font-size-lg) * var(--font-scale-ratio)); /* 25px */
    --font-size-2xl: calc(var(--font-size-xl) * var(--font-scale-ratio)); /* 31.25px */
    --font-size-3xl: calc(var(--font-size-2xl) * var(--font-scale-ratio)); /* 39.06px */
    --font-size-4xl: calc(var(--font-size-3xl) * var(--font-scale-ratio)); /* 48.83px */
    --font-size-5xl: calc(var(--font-size-4xl) * var(--font-scale-ratio)); /* 61.04px */
    --font-size-6xl: calc(var(--font-size-5xl) * var(--font-scale-ratio)); /* 76.3px */
    --font-size-7xl: calc(var(--font-size-6xl) * var(--font-scale-ratio)); /* 95.37px */
    --font-size-8xl: calc(var(--font-size-7xl) * var(--font-scale-ratio)); /* 119.21px */
    --font-size-9xl: calc(var(--font-size-8xl) * var(--font-scale-ratio)); /* 149.01px */
    --font-size-10xl: calc(var(--font-size-9xl) * var(--font-scale-ratio)); /* 186.26px */
    --font-size-11xl: calc(var(--font-size-10xl) * var(--font-scale-ratio)); /* 232.83px */
    --font-size-12xl: calc(var(--font-size-11xl) * var(--font-scale-ratio)); /* 291.04px */

    /* 印刷级行高系统 */
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

    /* 印刷级间距系统 - 基于8px网格 */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */
    --space-5xl: 8rem;     /* 128px */

    /* 印刷级字重系统 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* 印刷级字偶距和字母间距 */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

  
    /* 印刷级文字对齐 */
    --text-align: justify;
}

/* 全局样式 */
* {
    box-sizing: border-box;
}

html {
    /* 基础字体大小设置 */
    font-size: var(--font-size-base);
    /* 印刷级文字渲染优化 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
}

body {
    background: var(--background-primary);
    color: var(--text-body);
    /* 全部使用宋体类字体 */
    font-family:
        'Times New Roman',                    /* 经典英文衬线字体 */
        'Georgia',                            /* 优雅英文衬线字体 */
        'STSong',                             /* 华文中宋 */
        'SimSun',                             /* 中易宋体 */
        'Noto Serif CJK SC',                  /* Google Noto Serif CJK */
        'Source Han Serif SC',                /* Adobe思源宋体 */
        '宋体',                               /* 系统宋体 */
        serif;                                /* 回退衬线字体 */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    /* 印刷级文字对齐 */
    text-align: var(--text-align);
    /* 优化中文混排 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* 中文字体优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 暗色分节特殊处理 */
#loading,
#heartfelt-words,
#ending {
    color: var(--text-light);
}

/* 渐变文字 */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 暗色背景下的渐变文字 */
#loading .gradient-text,
#heartfelt-words .gradient-text,
#ending .gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #adb5bd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 印刷级标题系统 */
h1, h2, h3, h4, h5, h6 {
    /* 全部使用宋体类字体 */
    font-family:
        'Times New Roman',                    /* 经典英文衬线字体 */
        'Georgia',                            /* 优雅英文衬线字体 */
        'STSong',                             /* 华文中宋 */
        'SimSun',                             /* 中易宋体 */
        'Noto Serif CJK SC',                  /* Google Noto Serif CJK */
        'Source Han Serif SC',                /* Adobe思源宋体 */
        '宋体',                               /* 系统宋体 */
        serif;                                /* 回退衬线字体 */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--text-headline);
    margin-top: 0;
    margin-bottom: var(--space-lg);
    /* 优化中文混排 */
    text-align: left;
    /* 标题字体优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-black);
    line-height: 1.1;
    margin-bottom: var(--space-xl);
    letter-spacing: -0.03em;
}

h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
}

h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-sm);
}

h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-sm);
    color: var(--text-secondary);
}

/* 印刷级段落系统 */
p {
    margin-top: 0;
    margin-bottom: var(--space-md);
    widows: 2;
    orphans: 2;
    /* 优化首行样式 */
    first-line: var(--text-secondary);
}


/* 印刷级列表系统 */
ul, ol {
    margin-top: 0;
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

li {
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-relaxed);
}

/* 电影感文字 - 印刷级优化 */
.cinematic-text {
    /* 电影感文字使用宋体类字体 */
    font-family:
        'Times New Roman',                    /* 经典英文衬线字体 */
        'Georgia',                            /* 优雅英文衬线字体 */
        'STSong',                             /* 华文中宋 */
        'SimSun',                             /* 中易宋体 */
        'Noto Serif CJK SC',                  /* Google Noto Serif CJK */
        'Source Han Serif SC',                /* Adobe思源宋体 */
        '宋体',                               /* 系统宋体 */
        serif;                                /* 回退衬线字体 */
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 玻璃卡片效果 */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-subtle);
    transition: all 0.3s ease;
}

/* 暗色背景下的玻璃卡片 */
#loading .glass-card,
#heartfelt-words .glass-card,
#ending .glass-card {
    background: rgba(26, 26, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* 进度条 */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-primary);
    z-index: 1000;
    transition: width 0.3s ease;
    border-radius: 0 3px 3px 0;
}

/* 导航点 */
.nav-dots {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-medium);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.nav-dot:hover {
    background: var(--accent-secondary);
    transform: scale(1.2);
}

.nav-dot.active {
    background: var(--special-gray);
    border-color: var(--special-gray);
    box-shadow: 0 0 20px rgba(52, 58, 64, 0.3);
}

/* 按钮样式 */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-light);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-subtle);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* 滚动动画基础类 */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.active {
    opacity: 1;
    transform: translateY(0);
}

/* 印刷级排版工具类 */

/* 字体大小类 */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }
.text-7xl { font-size: var(--font-size-7xl); }
.text-8xl { font-size: var(--font-size-8xl); }
.text-9xl { font-size: var(--font-size-9xl); }

/* 字重类 */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-black { font-weight: var(--font-weight-black); }

/* 行高类 */
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* 字母间距类 */
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* 文字对齐类 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* 段落类 */
.paragraph-plain {
    margin-bottom: var(--space-md);
}

.paragraph-spaced {
    margin-bottom: var(--space-lg);
}

/* 引用样式 */
blockquote {
    /* 引用使用宋体类字体 */
    font-family:
        'Times New Roman',                    /* 经典英文衬线字体 */
        'Georgia',                            /* 优雅英文衬线字体 */
        'STSong',                             /* 华文中宋 */
        'SimSun',                             /* 中易宋体 */
        'Noto Serif CJK SC',                  /* Google Noto Serif CJK */
        'Source Han Serif SC',                /* Adobe思源宋体 */
        '宋体',                               /* 系统宋体 */
        serif;                                /* 回退衬线字体 */
    font-size: var(--font-size-lg);
    font-style: italic;
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    margin: var(--space-xl) 0;
    padding-left: var(--space-lg);
    border-left: 4px solid var(--border-medium);
}

blockquote p {
    margin-bottom: var(--space-sm);
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* 强调文字 */
em, .italic {
    font-style: italic;
}

strong, .bold {
    font-weight: var(--font-weight-semibold);
}

/* 小号文字 */
.small, .caption {
    font-size: var(--font-size-sm);
    color: var(--text-caption);
    line-height: var(--line-height-normal);
}

/* 超大主标题 - 年度回忆专用 */
.hero-title {
    /* 继承标题字体栈 */
    font-family:
        'Times New Roman',                    /* 经典英文衬线字体 */
        'Georgia',                            /* 优雅英文衬线字体 */
        'STSong',                             /* 华文中宋 */
        'SimSun',                             /* 中易宋体 */
        'Noto Serif CJK SC',                  /* Google Noto Serif CJK */
        'Source Han Serif SC',                /* Adobe思源宋体 */
        '宋体',                               /* 系统宋体 */
        serif;                                /* 回退衬线字体 */
    /* 使用更大的字体尺寸，确保在各种屏幕上都足够大 */
    font-size: clamp(80px, 12vw, 240px); /* 最小80px，理想12vw，最大240px */
    font-weight: var(--font-weight-black);
    line-height: 0.8; /* 更紧凑的行高适应大字体 */
    letter-spacing: -0.06em; /* 更紧密的字距 */
    color: var(--text-headline);
    margin-bottom: var(--space-2xl);
    text-align: center;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 确保标题不会被截断 */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 大号印刷文字 */
.display-text {
    /* 使用宋体类字体 */
    font-family:
        'Times New Roman',                    /* 经典英文衬线字体 */
        'Georgia',                            /* 优雅英文衬线字体 */
        'STSong',                             /* 华文中宋 */
        'SimSun',                             /* 中易宋体 */
        'Noto Serif CJK SC',                  /* Google Noto Serif CJK */
        'Source Han Serif SC',                /* Adobe思源宋体 */
        '宋体',                               /* 系统宋体 */
        serif;                                /* 回退衬线字体 */
    font-size: var(--font-size-8xl);
    font-weight: var(--font-weight-black);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--text-headline);
    margin-bottom: var(--space-xl);
}

/* 副标题 */
.subheading {
    /* 副标题也使用宋体类字体 */
    font-family:
        'Times New Roman',                    /* 经典英文衬线字体 */
        'Georgia',                            /* 优雅英文衬线字体 */
        'STSong',                             /* 华文中宋 */
        'SimSun',                             /* 中易宋体 */
        'Noto Serif CJK SC',                  /* Google Noto Serif CJK */
        'Source Han Serif SC',                /* Adobe思源宋体 */
        '宋体',                               /* 系统宋体 */
        serif;                                /* 回退衬线字体 */
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-secondary);
    /* 中文不需要uppercase，保持正常显示 */
    text-transform: none;
    font-variant: normal;
    margin-bottom: var(--space-md);
}

/* 正文段落 */
.body-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-body);
}

/* 阅读优化文本 */
.reading-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    max-width: 65ch; /* 印刷推荐的行长 */
    margin: 0 auto;
}

/* 印刷级分割线 */
.divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-xl) 0;
    border: none;
}

.divider-thick {
    height: 2px;
    background: var(--border-medium);
    margin: var(--space-2xl) 0;
    border: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-dots {
        right: 1rem;
    }

    .nav-dot {
        width: 10px;
        height: 10px;
    }

    .glass-card {
        border-radius: 12px;
    }

    /* 移动端字体调整 */
    .display-text {
        font-size: var(--font-size-6xl);
    }

    h1 {
        font-size: var(--font-size-4xl);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    .reading-text {
        font-size: var(--font-size-base);
    }

  }

@media (max-width: 480px) {
    /* 小屏幕进一步调整 */
    .display-text {
        font-size: var(--font-size-5xl);
    }

    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

  }

/* ============================================
   从HTML文件移动过来的样式
   ============================================ */

/* 分段式滚动和章节布局 */
.section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    scroll-snap-align: start;
    transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 章节背景过渡效果 */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

/* 为每个章节添加独特的过渡效果 */
.section.bg-transition-light::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%);
}

.section.bg-transition-dark::before {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.05) 50%,
        rgba(0, 0, 0, 0.1) 100%);
}

/* 章节进入动画 */
.section.section-enter {
    animation: sectionFadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes sectionFadeIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 背景渐变过渡动画 */
.section.bg-transition {
    animation: bgTransition 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bgTransition {
    0% {
        filter: brightness(0.8) saturate(0.8);
        transform: scale(1.02);
    }
    50% {
        filter: brightness(1.1) saturate(1.1);
        transform: scale(1.01);
    }
    100% {
        filter: brightness(1) saturate(1);
        transform: scale(1);
    }
}

/* HTML和Body重置 */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    height: 100%;
}

body {
    scroll-snap-type: y mandatory;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Times New Roman', 'Georgia', 'STSong', 'SimSun', 'Noto Serif CJK SC', 'Source Han Serif SC', '宋体', serif;
}

/* 章节主题色 - 增强版黑白灰主题，添加动态微彩 */
#loading {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 40%, #2d2d2d 70%, #1a1a1a 100%) !important;
    color: #ffffff !important;
    position: relative;
}
#loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(30, 144, 255, 0.12) 0%, transparent 50%);
    pointer-events: none;
    animation: loading-glow 8s ease-in-out infinite;
}
#loading * {
    color: inherit !important;
}

#opening-prelude {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 30%, #e8f4f8 70%, #f0f4f8 100%) !important;
    color: #1a1a1a !important;
    position: relative;
}
#opening-prelude::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 60% 40%, rgba(135, 206, 250, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 20% 70%, rgba(255, 182, 193, 0.06) 0%, transparent 50%);
    pointer-events: none;
    animation: prelude-glow 10s ease-in-out infinite;
}
#opening-prelude * {
    color: inherit !important;
}

#opening {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 40%, #e8f0f8 70%, #f0f8ff 100%) !important;
    color: #1a1a1a !important;
    position: relative;
}
#opening::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 30%, rgba(100, 149, 237, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 30% 80%, rgba(255, 218, 185, 0.07) 0%, transparent 40%);
    pointer-events: none;
    animation: opening-glow 12s ease-in-out infinite;
}
#opening * {
    color: inherit !important;
}

#special-data {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 40%, #f0fff0 70%, #e8f5e8 100%) !important;
    color: #1a1a1a !important;
    position: relative;
}
#special-data::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 20%, rgba(0, 191, 255, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 25% 75%, rgba(50, 205, 50, 0.1) 0%, transparent 50%);
    pointer-events: none;
    animation: data-glow 9s ease-in-out infinite;
}
#special-data * {
    color: inherit !important;
}

#memories {
    background: linear-gradient(135deg, #fff5ee 0%, #f8f4ff 40%, #f0ffff 70%, #fafafa 100%) !important;
    color: #1a1a1a !important;
    position: relative;
}
#memories::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 85% 15%, rgba(255, 105, 180, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 15% 85%, rgba(147, 112, 219, 0.07) 0%, transparent 60%),
                radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 70%);
    pointer-events: none;
    animation: memories-glow 11s ease-in-out infinite;
}
#memories * {
    color: inherit !important;
}

#heartfelt-words {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 40%, #0a0a0a 70%, #1a1a1a 100%) !important;
    color: #ffffff !important;
    position: relative;
}
#heartfelt-words::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(255, 20, 147, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.12) 0%, transparent 50%);
    pointer-events: none;
    animation: words-glow 13s ease-in-out infinite;
}
#heartfelt-words * {
    color: #ffffff !important;
}

#ending {
    background: radial-gradient(ellipse at center, #0a0a0a 0%, #000000 50%, #0a0a0a 100%) !important;
    color: #ffffff !important;
    position: relative;
}
#ending::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(75, 0, 130, 0.2) 0%, transparent 70%),
                radial-gradient(circle at 80% 20%, rgba(0, 191, 255, 0.15) 0%, transparent 60%);
    pointer-events: none;
    animation: ending-glow 15s ease-in-out infinite;
}
#ending * {
    color: inherit !important;
}

/* 背景微光动态动画 */
@keyframes loading-glow {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1) rotate(0deg);
    }
    25% {
        opacity: 1;
        transform: scale(1.1) rotate(90deg);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.95) rotate(180deg);
    }
    75% {
        opacity: 1;
        transform: scale(1.05) rotate(270deg);
    }
}

@keyframes prelude-glow {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1) translate(0, 0);
    }
    33% {
        opacity: 0.9;
        transform: scale(1.08) translate(10px, -5px);
    }
    66% {
        opacity: 0.8;
        transform: scale(0.98) translate(-8px, 8px);
    }
}

@keyframes opening-glow {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(1) hue-rotate(0deg);
    }
    20% {
        opacity: 1;
        filter: brightness(1.2) hue-rotate(10deg);
    }
    50% {
        opacity: 0.7;
        filter: brightness(0.9) hue-rotate(-5deg);
    }
    80% {
        opacity: 1;
        filter: brightness(1.1) hue-rotate(5deg);
    }
}

@keyframes data-glow {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        opacity: 0.95;
        transform: scale(1.06);
        filter: brightness(1.15);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.02);
        filter: brightness(1.05);
    }
    75% {
        opacity: 1;
        transform: scale(1.08);
        filter: brightness(1.1);
    }
}

@keyframes memories-glow {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    30% {
        opacity: 0.6;
        transform: scale(0.95) rotate(120deg);
        filter: brightness(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotate(240deg);
        filter: brightness(1.2);
    }
    90% {
        opacity: 0.9;
        transform: scale(1.03) rotate(320deg);
        filter: brightness(1.1);
    }
}

@keyframes words-glow {
    0%, 100% {
        opacity: 0.75;
        transform: scale(1) translateX(0);
        filter: brightness(1) hue-rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: scale(1.08) translateX(15px);
        filter: brightness(1.3) hue-rotate(20deg);
    }
    40% {
        opacity: 0.85;
        transform: scale(0.96) translateX(-10px);
        filter: brightness(1.1) hue-rotate(-10deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) translateX(8px);
        filter: brightness(1.2) hue-rotate(10deg);
    }
    80% {
        opacity: 0.9;
        transform: scale(1.02) translateX(-5px);
        filter: brightness(1.15) hue-rotate(-5deg);
    }
}

@keyframes ending-glow {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        opacity: 0.6;
        transform: scale(1.15);
        filter: brightness(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(0.9);
        filter: brightness(1.4);
    }
    75% {
        opacity: 0.9;
        transform: scale(1.08);
        filter: brightness(1.2);
    }
}

/* 进度条样式 */
.progress-bar {
    background: linear-gradient(90deg, #495057 0%, #212529 100%) !important;
    height: 3px;
}

/* 背景效果容器样式 */
.particles-container,
#digitalRainContainer,
#timelineParticles,
#textRipples,
#starField {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 结尾章节的星空效果层级更高 */
#ending #starField {
    z-index: 2 !important;
}

/* 为结尾分节添加全屏黑色覆盖层 */
#ending::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 0;
}

/* 当loading页面被清空后，禁用所有伪元素 */
#loading:empty::before,
#loading:empty::after,
#loading:empty .parallax-bg,
#loading:empty .bg-texture,
#loading:empty .particles-container {
    display: none !important;
}

/* 确保结尾分节的全屏黑色覆盖 */
#ending .parallax-bg,
#ending .bg-texture {
    display: none !important;
}

/* 章节内容容器 */
.section-content {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    width: 100%;
    padding: 3rem;
}

/* 确保结尾分节内容在星空之上 */
#ending .section-content {
    z-index: 20;
    position: relative;
}

/* 通用文本可见性增强 */
.section-content h1,
.section-content h2,
.section-content h3,
.section-content h4,
.section-content h5,
.section-content h6,
.section-content p,
.section-content blockquote,
.section-content .subheading,
.section-content .body-text,
.section-content .reading-text,
.section-content .display-text,
.section-content .cinematic-text {
    position: relative;
    z-index: 15;
    opacity: 1 !important;
    transform: none !important;
}

/* 修复文字居中问题 - 覆盖外部CSS */
#heartfelt-words .section-content,
#ending .section-content {
    text-align: center !important;
}

#heartfelt-words .section-content * {
    text-align: center !important;
}

#heartfelt-words .section-content p:not(.text-left),
#ending .section-content p:not(.text-left) {
    text-align: center !important;
    text-indent: 0 !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 覆盖居中样式，允许指定左对齐的段落保持左对齐 */
#heartfelt-words .section-content p.text-left,
#ending .section-content p.text-left {
    text-align: left !important;
}

#heartfelt-words .section-content h3,
#ending .section-content h3,
#heartfelt-words .section-content h2,
#ending .section-content h2 {
    text-align: center !important;
}

#heartfelt-words .reading-text,
#ending .reading-text {
    text-align: center !important;
    max-width: none !important;
    text-indent: 0 !important;
}

/* 特别致谢部分文字居中 */
#ending .text-center {
    text-align: center !important;
}

#ending .text-center p {
    text-align: center !important;
    text-indent: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 珍贵记忆碎片部分卡片文字左对齐 */
#memories .photo-frame {
    text-align: left !important;
}

#memories .photo-frame h3,
#memories .photo-frame p {
    text-align: left !important;
    text-indent: 0 !important;
}

/* 恢复原始滚动动画效果 */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.memory-card {
    opacity: 0;
    transform: translateY(60px) rotateX(15deg);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 滚动动画激活状态 */
.scroll-animate.visible,
.memory-card.visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* 特定分节的文本颜色确保 */
#loading .section-content *,
#heartfelt-words .section-content *,
#ending .section-content * {
    color: inherit !important;
}

#loading .gradient-text,
#heartfelt-words .gradient-text,
#ending .gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #adb5bd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 视差背景层 - 简化为黑白灰色调 */
.parallax-bg {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: var(--gradient-subtle);
    opacity: 0.15;
}

/* 简化的背景纹理 */
.bg-texture {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image:
        radial-gradient(circle at 20% 20%, #000 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, #000 1px, transparent 1px);
    background-size: 50px 50px;
}

/* 优化加载动画 */
.loader {
    width: 70px;
    height: 70px;
    border: 4px solid #495057;
    border-top: 4px solid #212529;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 20px rgba(33, 37, 41, 0.3);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 数字计数动画 - 优化 */
.counter-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* 记忆卡片 - 优化动画 */
.memory-card {
    opacity: 0;
    transform: translateY(60px) rotateX(15deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.memory-card.visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* 时间轴 - 优化样式 */
.timeline-line {
    background: linear-gradient(180deg, #495057 0%, #6c757d 50%, #495057 100%);
    width: 4px;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 15px rgba(73, 80, 87, 0.3);
}

.timeline-dot {
    width: 20px;
    height: 20px;
    background: #495057;
    border: 4px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 25px rgba(73, 80, 87, 0.4);
    transition: all 0.3s ease;
}

.timeline-dot:hover {
    transform: translateX(-50%) scale(1.3);
    box-shadow: 0 0 35px rgba(73, 80, 87, 0.6);
}

/* 优化心跳动画 */
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.05); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.05); }
}

/* 优化照片悬停效果 */
.photo-frame {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
}

.photo-frame:hover {
    transform: scale(1.08) rotateY(8deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.photo-frame img {
    transition: all 0.4s ease;
}

.photo-frame:hover img {
    transform: scale(1.1);
}

/* 深色主题玻璃卡片 */
#heartfelt-words .glass-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 优化字体和排版 */
.cinematic-text {
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.gradient-text {
    background: linear-gradient(135deg, #495057, #6c757d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 动画性能优化 */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 硬件加速优化 */
.parallax-bg,
.geometric-shape,
.flowing-line,
.digital-rain,
.timeline-particle,
.text-ripple,
.star-twinkle,
.shooting-star {
    will-change: transform, opacity;
}

/* 响应式优化 - 增强版 */
@media (max-width: 1024px) {
    .section-content {
        padding: 2rem;
    }

    .timeline-line {
        left: 30px;
    }

    .timeline-dot {
        left: 30px;
    }

    /* 修复中尺寸设备的记忆卡片布局 */
    .memory-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 3rem !important;
    }

    .memory-card .timeline-dot {
        position: absolute;
        left: 30px;
        top: 20px;
    }

    .memory-card .w-full.md\:w-1\/2 {
        width: 100% !important;
        padding-left: 60px !important;
        padding-right: 1rem !important;
    }

    .memory-card .hidden.md\:block {
        display: none !important;
    }
}

/* 专门针对中尺寸设备的优化 (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .memory-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 3rem !important;
        position: relative !important;
    }

    .memory-card .timeline-dot {
        position: absolute !important;
        left: 30px !important;
        top: 30px !important;
        z-index: 5 !important;
    }

    .memory-card .w-full.md\:w-1\/2 {
        width: 100% !important;
        padding-left: 70px !important;
        padding-right: 1rem !important;
        max-width: calc(100% - 70px) !important;
    }

    .memory-card .hidden.md\:block {
        display: none !important;
    }

    .memory-card .photo-frame {
        padding: 1.5rem !important;
        margin-left: 0 !important;
    }

    .memory-card img {
        max-height: 280px;
        object-fit: cover;
        width: 100%;
    }

    /* 确保时间轴在中尺寸设备上正确显示 */
    .timeline-line {
        left: 30px !important;
        width: 4px !important;
    }

    /* 优化网格布局在中尺寸设备上的显示 */
    #memories .section-content {
        max-width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (max-width: 768px) {
    .section-content {
        padding: 1.5rem;
    }

    .timeline-line {
        left: 20px;
        width: 3px;
    }

    .timeline-dot {
        left: 20px;
        width: 16px;
        height: 16px;
        border: 3px solid #ffffff;
    }

    /* 小屏幕设备的记忆卡片布局优化 */
    .memory-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 2.5rem !important;
        position: relative !important;
    }

    .memory-card .timeline-dot {
        position: absolute !important;
        left: 20px !important;
        top: 20px !important;
        z-index: 5 !important;
    }

    .memory-card .w-full.md\:w-1\/2 {
        width: 100% !important;
        padding-left: 50px !important;
        padding-right: 0.5rem !important;
        max-width: calc(100% - 50px) !important;
    }

    .memory-card .hidden.md\:block {
        display: none !important;
    }

    .memory-card .photo-frame {
        padding: 1rem !important;
        margin-left: 0 !important;
    }

    .memory-card img {
        max-height: 200px;
        object-fit: cover;
        width: 100%;
    }

    /* 确保时间轴在小屏幕上正确显示 */
    .timeline-line {
        left: 20px !important;
        width: 3px !important;
    }
}

@media (max-width: 640px) {
    .section-content {
        padding: 1rem;
    }

    .cinematic-text {
        line-height: 1.2;
    }
}

/* 背景动效粒子系统样式 */

/* 加载画面 - 多层次彩色粒子系统 */
.bw-particle {
    position: absolute;
    border-radius: 50%;
    animation: bw-float-up 8s linear infinite;
}

.bw-particle.small {
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(138, 43, 226, 0.6));
    box-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.bw-particle.medium {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(30, 144, 255, 0.7));
    box-shadow: 0 0 8px rgba(30, 144, 255, 0.5);
}

.bw-particle.large {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 20, 147, 0.7));
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.6);
}

.bw-particle.glow {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 215, 0, 0.8));
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    animation: bw-float-up 10s linear infinite, pulse-glow 2s ease-in-out infinite;
}

@keyframes bw-float-up {
    0% {
        transform: translateY(100vh) translateX(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    30% {
        transform: translateY(60vh) translateX(30px) scale(1) rotate(120deg);
    }
    60% {
        transform: translateY(30vh) translateX(80px) scale(1.2) rotate(240deg);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(150px) scale(1.5) rotate(360deg);
        opacity: 0;
    }
}

@keyframes pulse-glow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.5);
    }
}

/* 准备开篇 - 动态几何图形系统 */
.geometric-shape {
    position: absolute;
    opacity: 0.04;
    animation: geometric-float 20s ease-in-out infinite;
}

.geometric-circle {
    border: 3px solid #6c757d;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(108, 117, 125, 0.2);
}

.geometric-square {
    transform: rotate(45deg);
    border: 2px solid #6c757d;
}

.geometric-triangle {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 173px solid rgba(108, 117, 125, 0.1);
}

@keyframes geometric-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-40px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translateY(20px) rotate(180deg) scale(0.9);
    }
    75% {
        transform: translateY(-20px) rotate(270deg) scale(1.05);
    }
}

/* 开篇 - 波浪流动线条系统 */
.flowing-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #6c757d, transparent);
    animation: line-flow 10s ease-in-out infinite;
    border-radius: 1px;
}

@keyframes line-flow {
    0% {
        transform: translateX(-100%) translateY(0);
        opacity: 0;
    }
    25% {
        opacity: 0.15;
    }
    50% {
        transform: translateX(50%) translateY(-10px);
        opacity: 0.2;
    }
    75% {
        opacity: 0.15;
    }
    100% {
        transform: translateX(100%) translateY(0);
        opacity: 0;
    }
}

/* 特别数据 - 彩色数字雨效果 */
.digital-rain {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    animation: digital-fall 6s linear infinite;
    text-shadow: 0 0 8px currentColor;
}

.digital-rain.blue {
    color: rgba(0, 191, 255, 0.7);
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.digital-rain.green {
    color: rgba(50, 205, 50, 0.7);
    text-shadow: 0 0 10px rgba(50, 205, 50, 0.5);
}

.digital-rain.purple {
    color: rgba(138, 43, 226, 0.7);
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
}

.digital-rain.gold {
    color: rgba(255, 215, 0, 0.7);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.digital-rain.pink {
    color: rgba(255, 20, 147, 0.7);
    text-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
}

.digital-rain.rainbow {
    background: linear-gradient(180deg,
        rgba(255, 0, 0, 0.7) 0%,
        rgba(255, 165, 0, 0.7) 17%,
        rgba(255, 215, 0, 0.7) 33%,
        rgba(50, 205, 50, 0.7) 50%,
        rgba(0, 191, 255, 0.7) 67%,
        rgba(138, 43, 226, 0.7) 83%,
        rgba(255, 20, 147, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

@keyframes digital-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateY(-90vh) rotate(10deg) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(0vh) rotate(90deg) scale(1.1);
    }
    90% {
        opacity: 0.8;
        transform: translateY(90vh) rotate(170deg) scale(1);
    }
    100% {
        transform: translateY(100vh) rotate(180deg) scale(0.8);
        opacity: 0;
    }
}

/* 特别记忆 - 彩色时间轴粒子效果 */
.timeline-particle {
    position: absolute;
    border-radius: 50%;
    animation: timeline-pulse 4s ease-in-out infinite;
}

.timeline-particle.small {
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.9), rgba(255, 20, 147, 0.6));
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}

.timeline-particle.medium {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(147, 112, 219, 0.9), rgba(138, 43, 226, 0.7));
    box-shadow: 0 0 12px rgba(147, 112, 219, 0.7);
}

.timeline-particle.large {
    width: 7px;
    height: 7px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9), rgba(255, 165, 0, 0.7));
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.timeline-particle.glow {
    width: 9px;
    height: 9px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(135, 206, 250, 0.8));
    box-shadow: 0 0 20px rgba(135, 206, 250, 0.9);
    animation: timeline-pulse 5s ease-in-out infinite, rotate-glow 8s linear infinite;
}

.timeline-particle.gold {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 215, 0, 0.8));
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.9);
}

@keyframes timeline-pulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
        filter: brightness(1);
    }
    25% {
        transform: scale(1.5) rotate(90deg);
        opacity: 0.8;
        filter: brightness(1.3);
    }
    50% {
        transform: scale(2) rotate(180deg);
        opacity: 1;
        filter: brightness(1.5);
    }
    75% {
        transform: scale(1.5) rotate(270deg);
        opacity: 0.8;
        filter: brightness(1.3);
    }
}

@keyframes rotate-glow {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        filter: hue-rotate(180deg) brightness(1.5);
    }
    100% {
        filter: hue-rotate(360deg) brightness(1);
    }
}

/* 想说的话 - 多层文字波纹 */
.text-ripple {
    position: absolute;
    border: 2px solid rgba(255, 20, 147, 0.6);
    border-radius: 50%;
    animation: ripple-expand 8s ease-out infinite;
    box-shadow: 0 0 20px rgba(255, 20, 147, 0.3);
}

.text-ripple.small {
    animation-duration: 6s;
    border-color: rgba(138, 43, 226, 0.5);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
}

.text-ripple.large {
    animation-duration: 10s;
    border-color: rgba(0, 191, 255, 0.4);
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.3);
}

@keyframes ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    20% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.5);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(2);
    }
    100% {
        width: 1200px;
        height: 1200px;
        opacity: 0;
        transform: translate(-50%, -50%) scale(3);
    }
}

/* 结尾 - 彩色星空效果 */
.star-twinkle {
    position: absolute;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
    z-index: 1;
}

.star-twinkle.white {
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8));
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

.star-twinkle.blue {
    background: radial-gradient(circle, rgba(135, 206, 250, 1), rgba(30, 144, 255, 0.8));
    box-shadow: 0 0 15px rgba(135, 206, 250, 0.9);
}

.star-twinkle.purple {
    background: radial-gradient(circle, rgba(221, 160, 221, 1), rgba(138, 43, 226, 0.8));
    box-shadow: 0 0 15px rgba(221, 160, 221, 0.9);
}

.star-twinkle.gold {
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 215, 0, 0.8));
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9);
}

.star-twinkle.pink {
    background: radial-gradient(circle, rgba(255, 182, 193, 1), rgba(255, 105, 180, 0.8));
    box-shadow: 0 0 15px rgba(255, 182, 193, 0.9);
}

.shooting-star {
    position: absolute;
    height: 2px;
    z-index: 1;
    border-radius: 1px;
}

.shooting-star.white {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.shooting-star.rainbow {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 0, 0, 0.8) 20%,
        rgba(255, 165, 0, 0.8) 35%,
        rgba(255, 255, 0, 0.8) 50%,
        rgba(0, 255, 0, 0.8) 65%,
        rgba(0, 191, 255, 0.8) 80%,
        transparent 100%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.shooting-star.gold {
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.9), transparent);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

.shooting-star.blue {
    background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.9), transparent);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.8);
}

.meteor-cluster {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(135, 206, 250, 0.6));
    box-shadow: 0 0 25px rgba(135, 206, 250, 1);
    border-radius: 50%;
    animation: meteor-fall 8s linear infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% {
        opacity: 0.7;
        transform: scale(1.3) rotate(90deg);
        filter: brightness(1.2);
    }
    50% {
        opacity: 1;
        transform: scale(1.5) rotate(180deg);
        filter: brightness(1.5);
    }
    75% {
        opacity: 0.7;
        transform: scale(1.3) rotate(270deg);
        filter: brightness(1.2);
    }
}

@keyframes shoot {
    0% {
        transform: translateX(-100vw) translateY(0) rotate(-45deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateX(-90vw) translateY(10px) rotate(-45deg) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50vw) translateY(50px) rotate(-45deg) scale(1.2);
    }
    90% {
        opacity: 0.8;
        transform: translateX(90vw) translateY(90px) rotate(-45deg) scale(1);
    }
    100% {
        transform: translateX(100vw) translateY(100px) rotate(-45deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes meteor-fall {
    0% {
        transform: translate(-100px, -100px) scale(0);
        opacity: 0;
    }
    20% {
        transform: translate(20vw, 20vh) scale(1.2);
        opacity: 1;
    }
    40% {
        transform: translate(40vw, 40vh) scale(1);
        opacity: 0.8;
    }
    60% {
        transform: translate(60vw, 60vh) scale(1.2);
        opacity: 1;
    }
    80% {
        transform: translate(80vw, 80vh) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(110vw, 110vh) scale(0.5);
        opacity: 0;
    }
}

/* 确保星空容器在结尾分节中正确显示 */
#ending #starField {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}