/* 全局 CSS 变量 (设计令牌�? */
:root {
    /* 顶部栏双色渐变与文字 (日间默认) */
    --nav-bg: linear-gradient(to right, #F5E6D3, #5C4033);
    --nav-text: #FFF;
    --dir-text: #FFF;
    --dir-bg: rgb(255 255 255 / 95%);
    
    /* 背景视频遮罩 */
    --bg-mask: transparent;
    
    /* 装饰圆角渐变 */
    --circle-tl: linear-gradient(135deg, #FFD700, #FFA500);
    --circle-br: linear-gradient(135deg, #FFD700, #FFA500);
    
    /* 返回按钮变量 */
    --back-btn-bg: #FFF;
    --back-btn-text: #FFF;
    --back-btn-shadow: 0 2px 8px rgb(0 0 0 / 15%);
    
    /* 主题发光颜色 */
    --theme-glow-color: hsl(45deg 100% 50% / 40%);
    
    /* 交互发光动效变量 */
    --interactive-glow: rgba(253, 50, 51, 0.6);
    --interactive-glow-strong: rgba(253, 50, 51, 0.9);
    --text-shimmer-color: #FFF;
    
    /* 颜色令牌 */
    --color-primary-day: #8ec5fc;
    --color-secondary-day: #e0c3fc;
    --color-primary-night: #2b5876;
    --color-secondary-night: #4e4376;
    --color-text-day: #FFF;
    --color-text-night: #FFF;
    
    /* 导航栏专属颜色令�?*/
    --nav-color-day: #FFF; /* 恢复为偏白色 */
    --nav-color-day-hover: #fd3233; /* 统一日间发光�?*/
    --nav-color-day-active: #FFF; /* 恢复为偏白色 */
    
    /* 果冻效果专属阴影�?*/
    --jelly-shadow-day: rgb(142 197 252 / 40%);
    --jelly-shadow-night: rgb(43 88 118 / 60%);
    
    /* 字体与排版令�?*/
    --font-family: "Noto Serif SC", "LXGW WenKai", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-size-base: 16px;
    --font-weight: 400;
    --line-height: 1.6;
    --letter-spacing: 0px;
    
    /* 统一视觉规范 (圆角与阴�? */
    --border-radius: 8px;
    --box-shadow: 0 0.15rem 0.5rem rgb(0 0 0 / 15%);
    
    /* 统一动效规范 */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-complex: 300ms;

    /* 主题过渡时间设置 */
    --theme-transition-duration: 300ms;
    --theme-transition-ease: var(--ease-standard);
}

/* 交互元素发光�?*/
.interactive-glow-effect {
    will-change: transform, opacity, filter;
    transition: all var(--duration-normal) var(--ease-standard);
    will-change: box-shadow, transform;
}

.interactive-glow-effect:hover,
.interactive-glow-effect:focus-visible {
    box-shadow: 0 0 15px var(--interactive-glow), 0 0 30px var(--interactive-glow-strong);
    transform: translateY(-2px) scale(1.02);
    border-color: var(--interactive-glow-strong);
}

/* 针对文字的交互发�?*/
.text-interactive-glow:hover,
.text-interactive-glow:focus-visible {
    text-shadow: 0 0 10px var(--interactive-glow), 0 0 20px var(--interactive-glow-strong);
    color: #fff;
}

/* === 文本高级视觉动效 (GPU 加�? === */
/* 1. 微光扫掠 (Shimmer Sweep) */
.text-shimmer-sweep {
    position: relative;
    display: inline-block;
    background: linear-gradient(
        120deg,
        var(--global-text-color, #fff) 20%,
        var(--interactive-glow, #FFD700) 40%,
        var(--interactive-glow-strong, #FFA500) 50%,
        var(--interactive-glow, #FFD700) 60%,
        var(--global-text-color, #fff) 80%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer-sweep 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: background-position;
}

@keyframes shimmer-sweep {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* 2. 立体阴影 (3D Shadow) */
.text-3d-shadow {
    text-shadow: 
        1px 1px 0px rgba(0, 0, 0, 0.2),
        2px 2px 0px rgba(0, 0, 0, 0.15),
        3px 3px 0px rgba(0, 0, 0, 0.1),
        4px 4px 10px rgba(0, 0, 0, 0.3);
    transition: text-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
    will-change: transform, text-shadow;
}

.text-3d-shadow:hover {
    transform: translate(-2px, -2px);
    text-shadow: 
        1px 1px 0px rgba(0, 0, 0, 0.3),
        2px 2px 0px rgba(0, 0, 0, 0.2),
        3px 3px 0px rgba(0, 0, 0, 0.15),
        4px 4px 0px rgba(0, 0, 0, 0.1),
        6px 6px 15px var(--interactive-glow);
}

/* 3. 金属描边 (Metallic Stroke) */
.text-metallic-stroke {
    color: var(--global-text-color, #fff);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 8px rgba(0,0,0,0.5);
    transition: all var(--duration-normal) var(--ease-standard);
}

.text-metallic-stroke:hover {
    -webkit-text-stroke: 1px var(--interactive-glow-strong);
    text-shadow: 0 0 15px var(--interactive-glow);
}

/* 4. 逐字渐显 (Character Fade-in) */
.char-fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: charFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: opacity, transform;
}

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

/* 无障碍焦点可见样�?(Focus Visible) */
:focus-visible {
    outline: 2px solid var(--theme-glow-color, #8ec5fc);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(142, 197, 252, 0.3);
    border-radius: 4px;
    transition: outline 150ms var(--ease-standard), box-shadow 150ms var(--ease-standard);
}

/* 加载状态指示器 */
.theme-switching-loading svg {
    animation: spin 1s linear infinite;
    opacity: 0.5;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 开屏页左下角文案专用排版保�?*/
.splash-footer-protection {
    line-height: var(--splashFooter-line-height);
    white-space: var(--splashFooter-white-space);
    word-break: var(--splashFooter-word-break);
    font-size: clamp(12px, 2vw, 16px);
    letter-spacing: 0.15em;
    text-shadow: var(--text-shadow-color);
    font-family: var(--font-family);
}

/* 日夜模式 CSS 变量 */
body {
    background-color: var(--body-bg, #FFF);
    color: var(--global-text-color);
}

body[data-theme="day"] {
    --global-text-color: #FFF; /* 统一亮白�?*/
    --nav-bg: rgb(255 255 255 / 25%); /* 降低背景不透明�?*/
    --nav-text: #FFF; /* 偏白色文字，与夜间模式相�?*/
    --nav-text-hover: #e97719; /* 橙红色发�?*/
    --dir-bg: #FFF;
    --dir-text: #FFF;
    --captain-btn-bg: rgba(255, 255, 255, 0.15); /* 日间模式修改为明亮的玻璃白 */
    --captain-btn-hover: rgba(255, 255, 255, 0.25);
    --captain-btn-active: rgba(255, 255, 255, 0.2);
    --captain-btn-tab: rgba(255, 255, 255, 0.3);
    
    --captain-btn-grad-start: rgba(255, 255, 255, 0.3);
    --captain-btn-grad-end: rgba(255, 255, 255, 0.05);
    --captain-btn-hover-grad-start: rgba(255, 255, 255, 0.15);
    --captain-btn-hover-grad-end: rgba(255, 255, 255, 0.0);
    --captain-btn-active-grad-start: rgba(255, 255, 255, 0.2);
    --captain-btn-active-grad-end: rgba(255, 255, 255, 0.05);
    --captain-btn-tab-grad-start: rgba(255, 255, 255, 0.4);
    --captain-btn-tab-grad-end: rgba(255, 255, 255, 0.1);
    
    --captain-btn-border: rgba(255, 255, 255, 0.25);
    --captain-btn-border-hover: rgba(255, 255, 255, 0.5);

/* 日间模式背景遮罩 */
    --bg-mask: rgb(255 255 255 / 0%);
    --circle-tl: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --circle-br: linear-gradient(135deg, rgb(255 215 0 / 20%) 0%, rgb(255 165 0 / 20%) 100%);
    --back-btn-bg: transparent;
    --back-btn-border: 1px solid rgb(255 255 255 / 40%);
    --back-btn-hover-bg: rgb(255 255 255 / 10%);
    --back-btn-text: #FFF; /* 亮白�?*/
    --back-btn-shadow: none;
    --main-glow-color: rgb(255 255 255 / 60%);
    --glow-color: rgb(253 50 51 / 80%); /* 统一日间发光�?#fd3233 */
    --ui-3d-shadow: 0 4px 12px 0 rgb(210 180 140 / 35%);
    --readability-bg: rgb(255 255 255 / 8%);
    --readability-border: 1px solid rgb(255 255 255 / 20%);
    --readability-text: #FFF; /* 亮白色文�?*/
    --text-shadow-color: 2px 2px 4px rgb(101 67 33 / 70%);
    --text-hover-bg: rgb(253 50 51 / 15%); /* 统一日间发光色蒙�?#fd3233 */
    
    /* 区域磨砂背景�?- 日间模式 (暖橙色系) */
    --region-backdrop-bg: rgb(255 180 100 / 15%); /* 极淡的半透明暖橙，不透明�?5%左右 */
    --region-backdrop-blur: blur(20px);
    --region-backdrop-shadow: inset 0 0 60px rgb(255 140 50 / 15%), inset -1px 0 0 rgb(255 255 255 / 40%), 0 8px 32px rgb(0 0 0 / 10%);
    --region-fallback-bg: rgb(255 200 150 / 85%);
    --btn-primary-bg: rgb(142 197 252 / 20%);
    --btn-primary-hover-bg: rgb(142 197 252 / 40%);
    --btn-primary-border: rgb(255 255 255 / 40%);
    --btn-primary-hover-border: rgb(255 255 255 / 80%);
    --btn-primary-shadow: 0 8px 32px 0 rgb(31 38 135 / 15%);
    --btn-primary-hover-shadow: 0 8px 32px 0 rgb(31 38 135 / 30%);
    --hero-glow-color-1: rgb(255 215 0 / 80%);
    --hero-glow-color-2: rgb(255 200 50 / 60%);
    --hero-glow-color-3: rgb(255 180 0 / 40%);
    --hero-glow-color-4: rgb(255 150 0 / 20%);
    
    /* 舰长须知等大按钮的主题辉光配�?*/
    --captain-glow-color: rgba(253, 50, 51, 0.6); /* 日间：统一发光�?*/
    --captain-glow-strong: rgba(253, 50, 51, 0.9); /* 日间：更强的统一发光�?*/
}

body[data-theme="night"] {
    --global-text-color: #FFF; /* 统一亮白�?*/
    --nav-bg: rgb(0 0 0 / 25%);
    --nav-text: #FFF;
    --nav-text-hover: #71efcf; /* 统一夜间发光�?*/
    --dir-bg: #1E1E1E;
    --dir-text: #FFF;
    --bg-mask: rgb(255 255 255 / 0%); /* Removed the pure color mask */
    --circle-tl: linear-gradient(135deg, #6A5ACD 0%, #483D8B 100%);
    --circle-br: linear-gradient(135deg, rgb(106 90 205 / 20%) 0%, rgb(72 61 139 / 20%) 100%);
    --back-btn-bg: transparent;
    --back-btn-border: 1px solid rgb(0 0 0 / 40%);
    --back-btn-hover-bg: rgb(0 0 0 / 10%);
    --back-btn-text: #FFF;
    --back-btn-shadow: none;
    --main-glow-color: rgb(106 90 205 / 60%);
    --glow-color: rgb(113 239 207 / 90%); /* 统一夜间发光�?#71efcf */
    --ui-3d-shadow: 0 4px 12px 0 rgb(160 100 255 / 45%);
    --readability-bg: rgb(0 0 0 / 18%);
    --readability-border: 1px solid rgb(255 255 255 / 10%);
    --readability-text: #FFF;
    --text-shadow-color: 2px 2px 4px rgb(200 180 255 / 70%);
    --text-hover-bg: rgb(113 239 207 / 15%); /* 统一夜间发光蒙层 #71efcf */
    --theme-glow-color: hsl(262deg 72% 53% / 40%);
    --interactive-glow: rgba(113, 239, 207, 0.6);
    --interactive-glow-strong: rgba(113, 239, 207, 0.9);

    /* 区域磨砂背景�?- 夜间模式 (蓝紫色系) */
    --region-backdrop-bg: rgb(100 80 160 / 15%); /* 极淡的半透明蓝紫，不透明�?5%左右 */
    --region-backdrop-blur: blur(20px);
    --region-backdrop-shadow: inset 0 0 60px rgb(60 30 110 / 20%), inset -1px 0 0 rgb(255 255 255 / 10%), 0 8px 32px rgb(0 0 0 / 20%);
    --region-fallback-bg: rgb(80 60 130 / 85%);
    --btn-primary-bg: rgb(43 88 118 / 20%);
    --btn-primary-hover-bg: rgb(43 88 118 / 40%);
    --btn-primary-border: rgb(255 255 255 / 20%);
    --btn-primary-hover-border: rgb(255 255 255 / 60%);
    --btn-primary-shadow: 0 8px 32px 0 rgb(10 15 50 / 40%);
    --btn-primary-hover-shadow: 0 8px 32px 0 rgb(10 15 50 / 60%);
    --hero-glow-color-1: rgb(100 200 255 / 90%);
    --hero-glow-color-2: rgb(150 100 255 / 70%);
    --hero-glow-color-3: rgb(200 50 255 / 50%);
    --hero-glow-color-4: rgb(100 50 255 / 30%);

    --captain-btn-bg: rgba(15, 23, 54, 0.2); /* 夜间模式更透明的信件色彩 */
    --captain-btn-hover: rgba(26, 36, 86, 0.3);
    --captain-btn-active: rgba(15, 23, 54, 0.25);
    --captain-btn-tab: rgba(26, 36, 86, 0.35);
    
    --captain-btn-grad-start: rgba(26, 36, 86, 0.15);
    --captain-btn-grad-end: rgba(15, 23, 54, 0.25);
    --captain-btn-hover-grad-start: rgba(26, 36, 86, 0.05);
    --captain-btn-hover-grad-end: rgba(15, 23, 54, 0.15);
    --captain-btn-active-grad-start: rgba(26, 36, 86, 0.1);
    --captain-btn-active-grad-end: rgba(15, 23, 54, 0.2);
    --captain-btn-tab-grad-start: rgba(46, 66, 126, 0.2);
    --captain-btn-tab-grad-end: rgba(25, 33, 74, 0.3);
    
    --captain-btn-border: rgba(255, 255, 255, 0.1);
    --captain-btn-border-hover: rgba(255, 255, 255, 0.2);

    /* 舰长须知等大按钮的主题辉光配�?*/
    --captain-glow-color: rgba(113, 239, 207, 0.6); /* 夜间：统一发光�?*/
    --captain-glow-strong: rgba(113, 239, 207, 0.9); /* 夜间：更强的统一发光�?*/
}

/* 文字颜色通用�?*/

/* 文字交互动效通用�?*/
.nav-link-interactive {
    position: relative;
    color: var(--nav-text);
    font-family: inherit;
    transition: color var(--duration-normal) var(--ease-standard);
}

.nav-link-interactive:hover {
    color: var(--nav-text-hover) !important;
}

.nav-link-interactive::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--nav-text-hover);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-normal) var(--ease-standard);
}

.nav-link-interactive:hover::after, .nav-link-interactive.active::after {
    transform: scaleX(1);
}

.text-glow-interactive {
    transition: color var(--duration-normal) var(--ease-standard), text-shadow var(--duration-normal) var(--ease-standard);
}

.text-glow-interactive:hover {
    color: var(--nav-text-hover);
    text-shadow: 0 0 8px var(--glow-color);
}

.liquid-glass-nav {
    background-color: var(--nav-bg) !important;
    backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color var(--duration-normal) var(--ease-standard), backdrop-filter var(--duration-normal) var(--ease-standard);
}

.text-shadow-custom {
    text-shadow: var(--text-shadow-color);
    transition: text-shadow var(--duration-normal) var(--ease-standard);
}

/* 导航栏自适应文字及背景组�?*/
.nav-text-adaptive {
    color: var(--nav-text);
    transition: color var(--duration-normal) var(--ease-standard);
}

.nav-btn-bg {
    background-color: rgb(0 0 0 / 20%);
    transition: background-color var(--duration-normal) var(--ease-standard);
}

body[data-theme="day"] .nav-btn-bg {
    background-color: rgb(255 255 255 / 50%);
}



.ui-3d-shadow {
    box-shadow: var(--ui-3d-shadow);
    transition:  var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

.text-readability-bg {
    background-color: var(--readability-bg);
    border: var(--readability-border);
    color: var(--readability-text);
    border-radius: 4px;
    padding: 4px 8px;
    backdrop-filter: blur(4px);
    transition: background-color 100ms var(--ease-standard), 
                color 100ms var(--ease-standard), 
                transform 100ms var(--ease-standard), 
                border 100ms var(--ease-standard),
                filter 100ms var(--ease-standard),
                box-shadow 100ms var(--ease-standard);
    transform-origin: left center;
    will-change: transform, background-color;
}

#captain-detail-content p:hover {
    background-color: var(--text-hover-bg) !important;
    transform: scale(1.08);
    filter: brightness(1.06);
    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
    z-index: 10;
    position: relative;
}

/* 返回按钮内部 */
.br-circle-inner {
    background-color: var(--back-btn-bg);
    color: var(--back-btn-text);
    box-shadow: var(--back-btn-shadow);
    transition: background-color var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

/* 底部液态玻璃按�?(Frosted Glass 优化�? */
.glass-footer-btn {
    background: rgb(255 255 255 / 20%); /* 提高透明度，保证在各种背景下可见 */
    backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 24px;
    border: 1px solid rgb(255 255 255 / 30%); /* 明确的边框提升边缘清晰度 */
    box-shadow: 0 8px 32px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--theme-glow-color);
    transition: transform var(--duration-normal) var(--ease-standard), filter var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), background var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard);
    will-change: transform, filter, box-shadow;
}

body[data-theme="night"] .glass-footer-btn {
    background: rgb(0 0 0 / 30%); /* 夜间模式使用半透明深色�?*/
    border-color: rgb(255 255 255 / 15%);
    box-shadow: 0 8px 32px rgb(0 0 0 / 40%), inset 0 0 0 1px var(--theme-glow-color);
}

@supports not (backdrop-filter: blur(16px)) {
    .glass-footer-btn {
        background: rgb(240 240 240 / 85%); /* 降级方案：提高不透明�?*/
    }

    body[data-theme="night"] .glass-footer-btn {
        background: rgb(30 30 30 / 85%);
    }
}

.glass-footer-btn:hover,
.glass-footer-btn:focus {
    transform: scale(1.05) !important; /* 强制覆盖可能存在的Tailwind冲突 */
    background: rgb(255 255 255 / 30%); /* Hover 提亮背景 */
    border-color: rgb(255 255 255 / 50%);
    box-shadow: 0 12px 40px rgb(0 0 0 / 20%), inset 0 0 0 1px var(--theme-glow-color);
    outline: none;
}

body[data-theme="night"] .glass-footer-btn:hover,
body[data-theme="night"] .glass-footer-btn:focus {
    background: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 30%);
    box-shadow: 0 12px 40px rgb(0 0 0 / 50%), inset 0 0 0 1px var(--theme-glow-color);
}

.glass-footer-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 16px rgb(0 0 0 / 10%), inset 0 0 0 1px var(--theme-glow-color);
}

body[data-theme="night"] .glass-footer-btn:active {
    box-shadow: 0 4px 16px rgb(0 0 0 / 30%), inset 0 0 0 1px var(--theme-glow-color);
}

.glass-footer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1) !important;
    filter: none;
    box-shadow: none;
}

/* 舰长须知 液态玻璃容�?(带有流光扫过光效) */
.captain-glass-container {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--captain-btn-bg);
    /* 引入信件模块的雨�?星空渐变质感遮罩 */
    background-image: linear-gradient(to bottom, var(--captain-btn-grad-start) 0%, var(--captain-btn-grad-end) 100%);
    backdrop-filter: blur(12px); /* 默认模糊效果 */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--captain-btn-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease;
    will-change: transform, filter, backdrop-filter, opacity, background-color, border-color, box-shadow;
}

/* Hover & Active 交互变色及发光逻辑 */
.captain-glass-container:hover {
    background: var(--captain-btn-hover);
    background-image: linear-gradient(to bottom, var(--captain-btn-hover-grad-start) 0%, var(--captain-btn-hover-grad-end) 100%);
    backdrop-filter: blur(0px); /* 悬停时清晰显示背景 */
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--captain-glow-strong);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 
                0 0 25px var(--captain-glow-color), 
                inset 0 0 15px var(--captain-glow-color); /* 增加内发光和外发�?*/
    transform: translateY(-6px) scale(1.03); /* 略微加大浮动幅度 */
    outline: none;
}

.captain-glass-container:active {
    background: var(--captain-btn-active);
    background-image: linear-gradient(to bottom, var(--captain-btn-active-grad-start) 0%, var(--captain-btn-active-grad-end) 100%);
    backdrop-filter: blur(0px); /* 激活时也保持清晰 */
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--captain-btn-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(0) scale(0.98);
}

/* 针对当前选中的激活状�?(类似 Tab 切换时的选中) */
.captain-glass-container.active-tab {
    background: var(--captain-btn-tab);
    background-image: linear-gradient(to bottom, var(--captain-btn-tab-grad-start) 0%, var(--captain-btn-tab-grad-end) 100%);
    backdrop-filter: blur(0px); /* 选中状态保持清晰 */
    -webkit-backdrop-filter: blur(0px);
    border: 1px solid var(--captain-btn-border-hover);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* 添加流光扫过的伪元素 */
.captain-glass-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* 初始位置在左侧外 */
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 40%) 50%, rgb(255 255 255 / 0%) 100%);
    mix-blend-mode: lighten;
    z-index: 25;
    pointer-events: none;
    transform: skewX(-25deg) translate3d(0, 0, 0);
    will-change: transform, opacity;
    opacity: 0; /* 默认未触发状态隐�?*/
}

.captain-glass-container.is-sweeping::before {
    opacity: 1;
    animation: captain-sweep 0.8s ease-in-out forwards;
}

@keyframes captain-sweep {
    0% { transform: skewX(-25deg) translate3d(0, 0, 0); }
    100% { transform: skewX(-25deg) translate3d(600%, 0, 0); } /* 等效于左移更远，利用 GPU 加�?*/
}

/* 降级方案 */
@supports not (backdrop-filter: blur(12px)) {
    .captain-glass-container {
        background: rgba(255, 255, 255, 0.8);
    }
}

body[data-theme="night"] .captain-glass-container {
    border-color: rgb(255 255 255 / 10%);
}

@supports not (backdrop-filter: blur(12px)) {
    body[data-theme="night"] .captain-glass-container {
        background: rgba(15, 23, 54, 0.3);
    }
}

/* 移除废弃的 .captain-glass-bg 和 .image-load-failed 样式 */

/* 阶梯错层布局核心�?(Staggered Layout) */
:root {
    --stagger-step: 40px; /* 可配置的阶梯垂直偏移步长 */
    --stagger-step-mobile: 20px; /* 移动端稍小步�?*/
}

.staggered-layout-container {
    align-items: flex-start; /* 允许子元素独立控制高度与位置 */
}

.staggered-item {
    position: relative;

    --pop-x: 0px;

    /* CSS 变量继承，由 nth-child 赋予具体的偏移倍数 */
    transform: translateY(calc(var(--stagger-index, 0) * var(--stagger-step))) translateX(var(--pop-x));

    /* 组合原有的缩放动画与新增�?translateY 状�?*/
    transition: transform var(--duration-normal) var(--ease-standard), filter 100ms var(--ease-standard), opacity 100ms var(--ease-standard);
}

@media (width <= 768px) {
    .staggered-item {
        transform: translateY(calc(var(--stagger-index, 0) * var(--stagger-step-mobile))) translateX(var(--pop-x));
    }
}

/* hover 状态下组合缩放与原本的 Y 轴偏�?*/
.staggered-item:hover, .staggered-item:focus {
    transform: translateY(calc(var(--stagger-index, 0) * var(--stagger-step))) translateX(var(--pop-x)) scale(1.08) !important;
    outline: none;
}

/* active 状态增加点击下沉反馈，保留 Y 轴偏�?*/
.staggered-item:active {
    transform: translateY(calc(var(--stagger-index, 0) * var(--stagger-step))) translateX(var(--pop-x)) scale(0.98) !important;
}

@media (width <= 768px) {
    .staggered-item:hover, .staggered-item:focus {
        transform: translateY(calc(var(--stagger-index, 0) * var(--stagger-step-mobile))) translateX(var(--pop-x)) scale(1.08) !important;
    }

    .staggered-item:active {
        transform: translateY(calc(var(--stagger-index, 0) * var(--stagger-step-mobile))) translateX(var(--pop-x)) scale(0.98) !important;
    }
}

/* 定义偏移倍数，支持到最�?5 个项�?*/
.staggered-item:nth-child(1) { --stagger-index: 0; }
.staggered-item:nth-child(2) { --stagger-index: 1; }
.staggered-item:nth-child(3) { --stagger-index: 2; }
.staggered-item:nth-child(4) { --stagger-index: 3; }
.staggered-item:nth-child(5) { --stagger-index: 4; }

/* 废弃的 .captain-glass-bg 状态样式已移除 */

/* CSS 鼠标悬停放大动效（已在上面统一定义） */
.captain-glass-container:focus {
    outline: none;
}

.captain-glass-container:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

.captain-glass-content {
    position: relative;
    z-index: 10;
}

/* 隐藏返回按钮内容时的动画 */
.br-circle-btn.hidden-content .br-circle-inner {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: var(--global-text-color, #FFF);
    background-color: #f3f4f6;
    transition: background-color var(--duration-complex) var(--ease-standard), 
                color var(--duration-complex) var(--ease-standard);
}

/* 全屏模块滚动定位 */
.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;
    width: 100%;
}

/* 隐藏滚动�?*/
::-webkit-scrollbar {
    display: none;
}

/* 全场景液态玻璃拟态基础�?(Glassmorphism + Jelly 3D) */
.glass {
    background: rgb(255 255 255 / 12%); /* 修改�?2%透明�?*/
    backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border: 1px solid rgb(255 255 255 / 30%);

    /* 果冻厚度模拟：多�?box-shadow + drop-shadow滤镜配合 */
    box-shadow: inset 0 2px 4px rgb(255 255 255 / 50%), 
                inset 0 -2px 4px rgb(0 0 0 / 10%), 
                0 8px 16px var(--jelly-shadow-day), 
                var(--box-shadow);
    border-radius: var(--border-radius);
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / 10%));
}

.glass-night {
    background: rgb(20 20 20 / 12%); /* 同样12% */
    border: 1px solid rgb(255 255 255 / 10%);
    box-shadow: inset 0 2px 4px rgb(255 255 255 / 10%), 
                inset 0 -2px 4px rgb(0 0 0 / 40%), 
                0 8px 16px var(--jelly-shadow-night), 
                var(--box-shadow);
    border-radius: var(--border-radius);
}

/* 卡片交互状态：Hover 果冻弹性放大与回弹 */
.glass-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    transition: transform var(--duration-normal) var(--ease-standard), 
                box-shadow var(--duration-normal) var(--ease-standard),
                filter var(--duration-normal) var(--ease-standard);
    cursor: pointer;
    will-change: transform, filter;
}

.glass-card:hover {
    /* 0.8% 的放大即 scale(1.008)，叠�?2% 的色调偏�?hue-rotate(7.2deg) */
    transform: scale(1.008) translateY(-4px);
    filter: drop-shadow(0 8px 12px rgb(0 0 0 / 15%)) hue-rotate(7.2deg);
}

/* 动态光反射效果 */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 40%) 50%, rgb(255 255 255 / 0%) 100%);
    transform: skewX(-25deg);
    z-index: 25;
    pointer-events: none;
}

.glass-card:hover::before {
    animation: liquid-shine 0.8s ease-in-out forwards;
}

@keyframes liquid-shine {
    100% { left: 200%; }
}

/* 涟漪点击动效 */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation var(--duration-complex) linear;
    background-color: rgb(255 255 255 / 40%);
    pointer-events: none;
    z-index: 100;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.glass-card .bg-layer {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter var(--duration-normal) var(--ease-standard),
                opacity var(--duration-normal) var(--ease-standard),
                transform var(--duration-normal) var(--ease-standard);
    will-change: transform, opacity, filter;
}

/* Normal状�?*/
.glass-card .bg-normal {
    filter: blur(4px) brightness(0.85);
    opacity: 1;
}

/* Hover状�?*/
.glass-card .bg-hover {
    filter: blur(0) brightness(1.1);
    opacity: 0;
    transform: scale(1.05); /* 轻微放大 */
}

.glass-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 35px rgb(0 0 0 / 20%);
}

.glass-card:hover .bg-normal {
    opacity: 0;
}

.glass-card:hover .bg-hover {
    opacity: 1;
    transform: scale(1);
}

/* 玻璃遮罩层，放在背景上面，文字下�?*/
.glass-card .glass-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 0%) 60%);
    z-index: 10;
}

/* 子菜单与配置栏液态玻璃全填充 */

/* 内容�?*/
.glass-card .content-layer {
    position: relative;
    z-index: 20;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: white;
}

/* 子窗口视觉美�?(Day / Night Themes) */
.modal-glass-day {
    background: rgb(245 245 245 / 85%) !important; /* 85%透明�?亮白�?*/
    color: #FFF !important; /* 棕灰色字�?*/
    backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border: 1px solid rgb(255 255 255 / 50%);
    box-shadow: 0 10px 40px rgb(0 0 0 / 10%);
}

.modal-glass-night {
    background: rgb(106 90 205 / 85%) !important; /* 85%透明�?蓝紫�?*/
    color: #FFF !important; /* 亮白色字�?*/
    backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border: 1px solid rgb(255 255 255 / 20%);
    box-shadow: 0 10px 40px rgb(0 0 0 / 40%);
}

/* 夜晚模式流光发光动画 */
.modal-glass-night h2,
.modal-glass-night h3,
.modal-glass-night p,
.modal-glass-night li {
    animation: text-stream-glow 2.5s infinite alternate ease-in-out;
}

@keyframes text-stream-glow {
    0% { text-shadow: 0 0 5px rgb(240 240 240 / 50%); }
    100% { text-shadow: 0 0 15px rgb(240 240 240 / 80%), 0 0 25px rgb(255 255 255 / 60%); }
}

/* 弹窗动效 */
.modal-overlay {
    transition: backdrop-filter var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
}

.modal-content {
    transition: all var(--duration-normal) var(--ease-standard);
}

.modal-enter .modal-overlay {
    backdrop-filter: blur(10px);
    background-color: rgb(0 0 0 / 50%);
}

.modal-enter .modal-content {
    transform: scale(1);
    opacity: 1;
}

.modal-leave .modal-overlay {
    backdrop-filter: blur(0);
    background-color: rgb(0 0 0 / 0%);
}

.modal-leave .modal-content {
    transform: scale(0.9);
    opacity: 0;
}

/* 高性能滑动渐入动画系统 (Scroll Reveal) */
.scroll-reveal {
    opacity: 0;

    /* 默认从下�?40px 平移，仅使用 translate3d 开�?GPU 硬件加�?*/
    transform: translate3d(0, 40px, 0); 
    transition: opacity var(--duration-normal) var(--ease-standard), 
                transform var(--duration-normal) var(--ease-standard);
    will-change: opacity, transform;
}

.scroll-reveal.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 支持不同方向的平�?*/
.scroll-reveal.from-left {
    transform: translate3d(-40px, 0, 0);
}

.scroll-reveal.from-right {
    transform: translate3d(40px, 0, 0);
}

.scroll-reveal.from-top {
    transform: translate3d(0, -40px, 0);
}

.scroll-reveal.from-left.in-view,
.scroll-reveal.from-right.in-view,
.scroll-reveal.from-top.in-view {
    transform: translate3d(0, 0, 0);
}

/* 舰长须知右侧按钮专用渐显动效：translateX 20px -> 0, duration 300ms ease-out */

/* MC联机须知左侧按钮专用渐显动效：translateX -20px -> 0, duration 300ms ease-out */

/* 
 * !IMPORTANT: 阶梯布局 (Staggered Layout) �?scroll-reveal 动画复合处理
 * 当一个元素同时拥�?staggered-item �?scroll-reveal 时，
 * 需要确保其 transform 中同时包含阶�?translateY 和动画相关的 translateX�?
 */

/* 延迟类，用于元素交错进入动画（仅在进入时有延迟，退出时无延迟，提升响应感） */
.scroll-reveal.in-view.delay-100 { transition-delay: 100ms; }
.scroll-reveal.in-view.delay-200 { transition-delay: 200ms; }
.scroll-reveal.in-view.delay-400 { transition-delay: 400ms; }

/* 辅助文案统一响应类（保持与详情页出入�?300ms 一致） */
.fast-hide {
    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard) !important;
}

/* 舰长须知/MC联机须知 精细化字号约�?(�?font-size) */
.guide-main-title {
    font-size: 2.000rem; /* 32px / 16 = 2.000rem (Base 375px) - 极限单行字号 */
    white-space: nowrap; /* 强制一行显�?*/
}

.guide-poetic-text-cn {
    font-size: 0.875rem; /* 14px / 16 = 0.875rem (Base 375px) */
}

.guide-poetic-text-en {
    font-size: 0.625rem; /* 10px / 16 = 0.625rem (Base 375px) */
    white-space: nowrap; /* 强制每行英文单行显示 */
}

@media (width >= 414px) {
    .guide-main-title {
        font-size: 2.250rem; /* 36px / 16 = 2.250rem */
    }

    .guide-poetic-text-cn {
        font-size: 0.938rem; /* 15px / 16 = 0.9375rem */
    }

    .guide-poetic-text-en {
        font-size: 0.688rem; /* 11px / 16 = 0.6875rem */
    }
}

@media (width >= 768px) {
    .guide-main-title {
        font-size: 3.500rem; /* 56px / 16 = 3.500rem */
    }

    .guide-poetic-text-cn {
        font-size: 1.000rem; /* 16px / 16 = 1.000rem */
    }

    .guide-poetic-text-en {
        font-size: 0.750rem; /* 12px / 16 = 0.750rem */
    }
}

@media (width >= 1440px) {
    .guide-main-title {
        font-size: 4.500rem; /* 72px / 16 = 4.500rem */
    }

    .guide-poetic-text-cn {
        font-size: 1.125rem; /* 18px / 16 = 1.125rem */
    }

    .guide-poetic-text-en {
        font-size: 0.875rem; /* 14px / 16 = 0.875rem */
    }
}

/* 舰长须知/MC联机须知 弹出详情正文样式统一约束 */
.guide-detail-text {
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.8;
    color: #FFF;
    font-size: 1.125rem; /* 18px (原15px) */
}

@media (width >= 768px) {
    .guide-detail-text {
        font-size: 1.25rem; /* 20px (原17px) */
        line-height: 2;
    }
}

@media (width >= 1440px) {
    .guide-detail-text {
        font-size: 1.5rem; /* 24px (原18px) */
    }
}

/* 专门用于文本逐行飞入的动�?*/
@keyframes line-fly-in {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.line-fly-in {
    animation: line-fly-in 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    will-change: transform, opacity;
}

/* 舰长须知/MC联机须知 左下角文本容器状态类 */
#captain-dir-text, #mc-dir-text {
    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

#captain-dir-text.is-hidden, #mc-dir-text.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#captain-dir-text.is-visible, #mc-dir-text.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* 舰长须知逐行飞入动画�?*/
.captain-stagger-line {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: transform, opacity;
}

.captain-stagger-line.animate-in {
    animation: line-fly-in 400ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        transition: none !important;
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

    .modal-glass-night h2,
    .modal-glass-night h3,
    .modal-glass-night p,
    .modal-glass-night li {
        animation: none;
    }

    .glass-card:hover::before {
        animation: none;
    }
}

/* 了解更多 按钮玻璃拟态重设计 */
.glass-btn-primary {
    position: relative;
    background: var(--btn-primary-bg, rgb(142 197 252 / 20%));
    backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--btn-primary-border, rgb(255 255 255 / 40%));
    box-shadow: var(--btn-primary-shadow, 0 8px 32px 0 rgb(31 38 135 / 15%));
    overflow: hidden;
    color: white;
    z-index: 1;
    transition: all 0.3s var(--ease-standard);
    will-change: transform, background, box-shadow;
}

.glass-btn-primary::before {
    content: '';
    position: absolute;
    top: 0; 
    left: -100%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(to right, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 40%) 50%, rgb(255 255 255 / 0%) 100%);
    transform: skewX(-20deg);
    transition: all 0.7s var(--ease-standard);
    z-index: -1;
}

.glass-btn-primary:hover::before {
    left: 200%;
}

.glass-btn-primary:hover {
    background: var(--btn-primary-hover-bg, rgb(142 197 252 / 40%));
    border-color: var(--btn-primary-hover-border, rgb(255 255 255 / 80%));
    box-shadow: var(--btn-primary-hover-shadow, 0 8px 32px 0 rgb(31 38 135 / 30%));
    transform: scale(1.05);
}

/* 媒体元素加载动画 */
.media-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-standard);
}

.media-element.loaded {
    opacity: 1;
}

/* 动态网格布局样式 (响应式断点系�? */
.dynamic-grid-1 {
    display: grid;
    grid-template-columns: min(900px, 90vw);
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 0 auto;
}

.dynamic-grid-1 .glass-card {
    height: auto;
    aspect-ratio: 16 / 9;
}

.dynamic-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    justify-content: center;
    align-items: center;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.dynamic-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    justify-content: center;
    align-items: center;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem 3rem; /* 留出箭头空间 */
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(255 255 255 / 20%);
    backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / 30%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 40;
    transition: all var(--duration-normal) var(--ease-standard);
}

.carousel-arrow:hover {
    background: rgb(255 255 255 / 40%);
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow-left { left: 0; }
.carousel-arrow-right { right: 0; }

/* 断点系统：≥1200px (Desktop), 992-1199px (Tablet Landscape), �?91px (Tablet Portrait & Mobile) */
@media (width <= 1199px) {
    .dynamic-grid-3 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
}

@media (width <= 991px) {
    .dynamic-grid-2, .dynamic-grid-3 { grid-template-columns: 1fr; max-width: 600px; }
    .carousel-container { padding: 1rem 0; }
    .carousel-arrow { display: none; } /* 移动端隐藏箭头，使用滑动 */
    
    /* 触摸设备优化：增大点击区域至�?48px */
    .nav-link, button, .footer-link-btn {
        min-height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 屏幕旋转平滑过渡 */
@media (orientation: landscape) and (width <= 991px) {
    #hero {
        min-height: 120vh; /* 横屏时留出更多滚动空�?*/
    }
}

/* 视频轮播左右箭头 */
.hero-arrow {
    background: rgb(255 255 255 / 10%);
    backdrop-filter: blur(4px);
    border: 1px solid rgb(255 255 255 / 20%);
    transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard);
}

.hero-arrow:hover {
    background: rgb(255 255 255 / 30%);
}

/* 悬停按钮动效 (通过 .hover-translate-disabled 类控�? */

/* 仅当不包�?disabled 类时才执行位�?*/
.hero-arrow:not(.hover-translate-disabled):hover {
    transform: translateY(-50%) translateX(var(--translate-x-offset, 0)) scale(1.1) !important;
}
#hero-prev:not(.hover-translate-disabled):hover { --translate-x-offset: -4px; }
#hero-next:not(.hover-translate-disabled):hover { --translate-x-offset: 4px; }

/* 舰长须知返回按钮毛玻璃动�?*/
.captain-frosted-back-btn {
    background: rgb(255 255 255 / 15%);
    backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgb(255 255 255 / 10%), 0 4px 12px rgb(0 0 0 / 15%);
    transition: all var(--duration-normal) var(--ease-standard);
    color: inherit; /* 依赖 JS 动态亮度切�?*/
}

.captain-frosted-back-btn:hover {
    background: rgb(255 255 255 / 25%);
    border-color: rgb(255 255 255 / 40%);
    box-shadow: inset 0 0 15px rgb(255 255 255 / 20%), 0 6px 16px rgb(0 0 0 / 20%);
    transform: scale(1.05);
}

/* 富文本样式重�?*/
.rich-text h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: inherit;
}

.rich-text p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.rich-text ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.rich-text li {
    margin-bottom: 0.5rem;
}

/* 日系杂志风排�?*/
.font-serif-sc {
    font-family: var(--font-family);
}

/* 新增：白�?夜晚双主题外发光与字色适配 (针对开屏杂志风) */
.hero-text-glow {
    text-shadow: 
        0 2px 4px rgb(0 0 0 / 80%),        /* 提升可读性的底层阴影 */
        0 0 10px var(--hero-glow-color-1),   /* 内层发光 */
        0 0 20px var(--hero-glow-color-2),   /* 中层发光 */
        0 0 40px var(--hero-glow-color-3),   /* 外层发光 */
        0 0 80px var(--hero-glow-color-4);   /* 超大范围泛光 */

    color: var(--hero-text-color, #fff);
    transition: text-shadow var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
}

.hero-layout {
    display: flex;
    width: 100%;
    height: 100vh;
}

.hero-text-col {
    width: 100%;
    height: 100vh;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* 让点击穿透到背景和轮播箭�?*/
    text-align: left;
}

@media (width >= 768px) {
    .hero-text-col {
        width: 50%;
    }
}

@media (width >= 1024px) {
    .hero-text-col {
        width: 30%;
    }
}

/* 瀑布流渐入动�?(GPU加速优�? */
.waterfall-text > * {
    opacity: 0;
    transform: translate3d(0, 20px, 0); /* 开启硬件加�?*/
    will-change: transform, opacity;    /* 提示浏览器提前优�?*/
}

.waterfall-text.animate-start > * {
    animation: waterfallFadeIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes waterfallFadeIn {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Intro 动画样式 */
#intro-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    justify-content: flex-start; /* 配合文字左对�?*/
    align-items: flex-start;
    transition: opacity var(--duration-normal) var(--ease-standard), visibility var(--duration-normal) var(--ease-standard);
}

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

#intro-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
}

@keyframes glowPulse {
    0% { text-shadow: 0 0 10px rgb(255 255 255 / 20%); transform: scale(0.95); }
    100% { text-shadow: 0 0 30px rgb(255 255 255 / 80%), 0 0 50px rgb(142 197 252 / 60%); transform: scale(1.05); }
}

#hero-title {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
}

/* 按钮点击反馈动效 */
button {
    transition: transform var(--duration-normal) var(--ease-standard), background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard) !important;
}

button:active {
    transform: scale(0.92) !important;
}

/* 导航栏滑动过渡下划线 */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #8ec5fc;
    transition: width var(--duration-normal) var(--ease-standard), left var(--duration-normal) var(--ease-standard);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
    left: 0;
}

/* 导航栏白天模式文本颜色覆�?(WCAG >= 4.5:1) */
body:not(.theme-night) .nav-link {
    color: var(--nav-color-day) !important;
    transition: color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}

body:not(.theme-night) .nav-link:hover {
    color: var(--nav-color-day-hover) !important;
}

body:not(.theme-night) .nav-link:active {
    color: var(--nav-color-day-active) !important;
}

body:not(.theme-night) .nav-link:focus-visible {
    color: var(--nav-color-day) !important;
    border-bottom: 2px solid var(--nav-color-day);
    outline: none;
}

/* 当对比度不足时，降级到深色以确保可见�?*/
@media (prefers-contrast: more) {
    body:not(.theme-night) .nav-link {
        color: #000 !important;
    }
}

/* QQ群号下拉菜单样式 */

/* 音乐控件样式 */
.custom-range {
    appearance: none;
    appearance: none;
    background: rgb(255 255 255 / 30%);
}

.custom-range::-webkit-slider-thumb {
    appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 2px rgb(0 0 0 / 50%);
    transition: transform 0.1s;
}

.custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.custom-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 2px rgb(0 0 0 / 50%);
    border: none;
    transition: transform 0.1s;
}

.custom-range::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* 触摸设备：音量条常驻在音乐按钮上方，便于暂停/播放与调音量 */
@media (hover: none) and (pointer: coarse) {
    #music-control-container {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 0.5rem;
    }

    #music-control-container #music-slider-wrapper {
        position: relative;
        right: auto;
        margin-right: 0;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 4s linear infinite;
}

/* 文章侧边栏主�?*/
body.theme-day #article-sidebar {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

body.theme-day #article-sidebar * {
    color: #000000 !important;
}

body.theme-night #article-sidebar {
    background-color: #1E1E1E;
    color: #FFF;
}

body.theme-day #article-level-1 { background-color: #FFFFFF !important; }
body.theme-night #article-level-1 { background-color: #1E1E1E; }

/* Level 2 需要反�?*/
body.theme-day #article-level-2 { background-color: #FFFFFF !important; } /* 反差 */
body.theme-night #article-level-2 { background-color: #2A2A2A; } /* 反差 */

/* Level 3 需要再反差 */
body.theme-day #article-level-3 { background-color: #FFFFFF !important; }
body.theme-night #article-level-3 { background-color: #252525; }

/* Hover effects */
body.theme-day .article-item:hover { background-color: rgb(142 197 252 / 8%); }
body.theme-night .article-item:hover { background-color: rgb(43 88 118 / 8%); }

/* Level 3 Typography */
#article-content {
    font-size: 15px;
    line-height: 1.8em;
}

#article-content p {
    margin-bottom: 1em;
}

#article-content h1, #article-content h2, #article-content h3 {
    font-weight: bold;
    margin-bottom: 1em;
}
#article-content h1 { font-size: 1.5em; }
#article-content h2 { font-size: 1.3em; }

/* Markdown It styles reset */
.markdown-body {
    word-break: break-word;
}

.markdown-body img {
    max-width: 100%;
    border-radius: 4px;
}

/* 文章侧边栏内 "在 B 站观看" / "下载" 等跳转按钮 */
.html-link-btn {
    background-color: rgb(255 255 255 / 35%);
    border: 1px solid rgb(255 255 255 / 60%);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
}

.html-link-btn:hover {
    background-color: rgb(255 255 255 / 50%);
    border-color: rgb(255 255 255 / 80%);
    transform: translateY(-1px);
}

body[data-theme="night"] .html-link-btn {
    background-color: rgb(255 255 255 / 30%);
    border: 1px solid rgb(255 255 255 / 50%);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
}

body[data-theme="night"] .html-link-btn:hover {
    background-color: rgb(255 255 255 / 45%);
    border-color: rgb(255 255 255 / 75%);
}

/* 字体选择器辅助样�?(确保选择器下拉框在日夜模式下均有清晰的对比度) */
.font-select-custom option {
    background-color: #fff;
    color: #333;
}

body.theme-night .font-select-custom option,
body[data-theme="night"] .font-select-custom option {
    background-color: #2a2a2a;
    color: #FFF;
}

/* nav-glass 令牌 (�?SCSS 导出) */
:root {
  --nav-glass-blur: 12px;
  --nav-glass-transition: all var(--duration-normal) var(--ease-standard);
  --nav-glass-bg: linear-gradient(90deg, rgb(255 94 58 / 85%), rgb(255 149 0 / 85%));
  --nav-glass-border: rgb(255 255 255 / 30%);
  --nav-glass-shadow: 0 4px 12px 0 rgb(255 149 0 / 15%);
  --nav-glass-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSIvPjwvc3ZnPg==');
}

body[data-theme="night"],
body.theme-night {
  --nav-glass-bg: linear-gradient(90deg, rgb(25 118 210 / 85%), rgb(224 247 250 / 85%));
  --nav-glass-border: rgb(255 255 255 / 10%);
  --nav-glass-shadow: 0 4px 12px 0 rgb(25 118 210 / 20%);
  --nav-glass-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMiIvPjwvc3ZnPg==');
}

/* 顶部栏双色渐变与过渡动画 */
#navbar {
    background: transparent !important;
    transition: transform 300ms var(--ease-standard), background-color 300ms var(--ease-standard), backdrop-filter 300ms var(--ease-standard);
    position: fixed;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(var(--nav-glass-blur));
    backdrop-filter: blur(var(--nav-glass-blur));
    box-shadow: var(--nav-glass-shadow);
    border-bottom: 1px solid var(--nav-glass-border);
    will-change: transform;
    transform: translateZ(0); /* GPU硬件加�?*/
}

#navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: opacity var(--duration-normal) var(--ease-standard);
    will-change: opacity;
    background: var(--nav-glass-bg);
    opacity: 0.1;
}

#navbar::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--nav-glass-noise);
    opacity: 0.5;
    pointer-events: none;
}

#navbar.nav-scrolled::before {
    opacity: 1;
}

/* 目录指引悬浮菜单 */

/* 装饰圆弧及渐变圆形动�?*/
@keyframes breathe {
    0%, 100% { transform: scale(1) translate3d(0,0,0); }
    50% { transform: scale(1.05) translate3d(0,0,0); }
}

@keyframes rotate-ccw {
    from { transform: rotate(0deg) translate3d(0,0,0); }
    to { transform: rotate(-360deg) translate3d(0,0,0); }
}

/* 防止GPU重排，开启硬件加�?*/
.hardware-accelerated {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 共享元素过渡 (FLIP 技�? 通用�?*/

/* 页面/模块级淡入淡出，避免白屏闪跳 */

/* 一封信模块专用样式 */
.letter-page {
  /* 字体统一设定，结�?fallback �?font-display: swap 特�?*/
  font-family: var(--font-family);
  color: var(--global-text-color, #fff);
  min-height: 100vh;
}

/* CSS Grid 左右分栏布局 */
.letter-layout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0 48px;
}

/* 右侧标题容器定位 */
.letter-title-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.letter-title {
  position: absolute;
  right: 0; /* 贴紧 grid 右侧子区�?*/
  top: max(80px, calc(env(safe-area-inset-top, 0px) + 100px)); /* 右侧上方位置 */
  writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 80px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--global-text-color, #FFF);
  
  /* 增加立体阴影和微光扫�?*/
  -webkit-text-shadow: 2px 2px 0 rgb(0 0 0 / 20%), 4px 4px 0 rgb(0 0 0 / 10%), 0 4px 12px rgb(0 0 0 / 40%);
  text-shadow: 2px 2px 0 rgb(0 0 0 / 20%), 4px 4px 0 rgb(0 0 0 / 10%), 0 4px 12px rgb(0 0 0 / 40%);
  z-index: 2;
  white-space: nowrap;
  
  transition: all var(--duration-normal) var(--ease-standard);
  transform-origin: center center;
  will-change: transform, text-shadow, color;
  cursor: default;
}

/* 主标题鼠标悬停交互动�?*/
@media (hover: hover) {
  .letter-title:hover {
    transform: scale(1.05) translateY(-5px); /* 放大并稍微上�?*/
    color: var(--primary-color, #f0f8ff); /* 悬停时变为主题主色调或微�?*/
    -webkit-text-shadow: 3px 3px 0 rgb(0 0 0 / 15%), 6px 6px 0 rgb(0 0 0 / 10%), 0 8px 24px var(--glow-color, rgb(255 255 255 / 40%));
    text-shadow: 3px 3px 0 rgb(0 0 0 / 15%), 6px 6px 0 rgb(0 0 0 / 10%), 0 8px 24px var(--glow-color, rgb(255 255 255 / 40%));
  }
}

/* 左侧正文文本区域 (不滚�? */
.letter-body {
  position: relative;
  width: 100%;
  height: 100%;

  /* 通过 calc() 动态计算左�?padding，限制每行约 55-65 字符最佳阅读宽�?*/

  /* 以正�?18px 计，60个中文字符约�?1080px。当视窗极宽时，动态增加左�?padding 压缩内容�?*/
  padding: 0 calc(max(24px, (100vw - 340px - 96px - 1080px) / 2));
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 保证 letter-body 不可滚动，滚动交由子容器 */

  /* 使用全局变量字体 */
  font-family: var(--font-family);

  /* 新增：模糊磨砂暗区背景效�?*/
  background-color: var(--region-backdrop-bg);
  backdrop-filter: var(--region-backdrop-blur);
  backdrop-filter: var(--region-backdrop-blur);
  box-shadow: var(--region-backdrop-shadow);
  transition: background-color var(--theme-transition-duration) var(--theme-transition-ease),
              box-shadow var(--theme-transition-duration) var(--theme-transition-ease);
}

/* 针对不支�?backdrop-filter 的降级方�?*/
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .letter-body {
    background-color: transparent;
  }

  .letter-body::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: -1;
    background-color: var(--region-fallback-bg); /* 纯色垫底代替模糊 */
    filter: blur(10px);
    transition: background-color var(--theme-transition-duration) var(--theme-transition-ease);
  }
}

/* 独立滚动视窗容器 */
.letter-scroll-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  outline: none; /* 移除焦点边框 */
  padding-right: 12px; /* 给滚动条留出空间 */

  /* 开启独立渲染层，防止滚动触发大面积重排 */
  will-change: transform;
  
  /* Firefox 降级 */
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 40%) transparent;
  transition: scrollbar-color var(--duration-normal) var(--ease-standard);
}

.letter-scroll-viewport.is-scrolling {
  scrollbar-color: rgb(255 255 255 / 70%) transparent;
}

.letter-scroll-viewport:hover {
  scrollbar-color: rgb(255 255 255 / 70%) transparent;
}

/* 保证上下留白且内容垂直居�?*/
.letter-content-wrapper {
  margin: auto 0;
  padding: 120px 0; /* 预留滚动呼吸区，防止贴边 */
  width: 100%;
}

/* 自定义液态玻璃滚动条 */
.letter-scroll-viewport {
  scrollbar-gutter: stable both-edges; /* 保证不影响整体宽�?*/
}

.letter-scroll-viewport::-webkit-scrollbar {
  width: 14px; /* 增加�?4px */
  background: transparent;
}

.letter-scroll-viewport:hover::-webkit-scrollbar {
  width: 14px;
}

.letter-scroll-viewport::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.letter-scroll-viewport::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 40%); /* 提升对比�?>= 4.5:1 */
  border: 4px solid transparent; /* overlay模式缝隙 */
  background-clip: padding-box;
  border-radius: 8px; /* 内侧圆角�?8-4=4px */
}

.letter-scroll-viewport::-webkit-scrollbar-thumb:hover,
.letter-scroll-viewport.is-scrolling::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 60%);
  border: 4px solid transparent;
  background-clip: padding-box;
}

/* 在不支持 backdrop-filter 的浏览器中的降级 */
@supports not (backdrop-filter: blur(4px)) {
  .letter-scroll-viewport::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 50%);
    background-clip: padding-box;
  }

  .letter-scroll-viewport::-webkit-scrollbar-thumb:hover,
  .letter-scroll-viewport.is-scrolling::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 70%);
    background-clip: padding-box;
  }
}

.letter-body .salutation {
  /* 使用新的自适应字号和行�?*/
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 600;
  line-height: clamp(1.4, 1.5, 1.5);
  letter-spacing: 0.02em;
  color: var(--global-text-color, #FFF);
  margin-bottom: 48px;
  -webkit-text-shadow: 0 2px 6px rgb(0 0 0 / 30%);
  text-shadow: 0 2px 6px rgb(0 0 0 / 30%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-word;
  
  /* 发光动效预留的样�?*/
  position: relative;
  padding: 12px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 8px;
  transition: box-shadow var(--duration-normal) var(--ease-standard), z-index var(--duration-normal) var(--ease-standard);
}

.letter-body .paragraph {
  /* 使用新的自适应字号和行高，取代写死�?--font-size-base */
  font-size: clamp(0.75rem, 1.6vw, 1.125rem);
  line-height: clamp(1.4, 1.5, 1.5);
  font-weight: var(--font-weight, 400);
  letter-spacing: var(--letter-spacing, 0.02em);
  color: var(--global-text-color, #FFF);
  margin-bottom: 40px;
  -webkit-text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
  text-shadow: 0 2px 4px rgb(0 0 0 / 30%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-word;
  
  /* 发光动效预留的样�?*/
  position: relative;
  padding: 12px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 8px;
  transition: box-shadow var(--duration-normal) var(--ease-standard), z-index var(--duration-normal) var(--ease-standard);
}

.letter-body .paragraph.last {
  margin-bottom: 0;
}

/* 悬停发光动画�?(全局使用 var(--glow-color)) */
.letter-body .paragraph,
.letter-body .salutation {
  transition: all var(--duration-normal) var(--ease-standard);
  will-change: transform, text-shadow, color;
}

.letter-body .paragraph:hover,
.letter-body .salutation:hover {
  text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 2px 4px rgb(0 0 0 / 50%);
  transform: scale(1.02);
  color: #fff;
  z-index: 10;
}

/* KOOK模块专用样式 */
.kook-page {
  font-family: var(--font-family);
  color: var(--global-text-color, #FFF);
  min-height: 100vh;
}

.kook-body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 calc(max(24px, (100vw - 340px - 96px - 1080px) / 2));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.kook-content-wrapper {
  margin: auto 0;
  padding: 80px 0;
  width: 100%;
}

.kook-url {
  font-size: clamp(1.03125rem, 2.2vw, 1.375rem);
  font-weight: 600;
  line-height: clamp(1.4, 1.5, 1.5);
  letter-spacing: 0.02em;
  color: var(--global-text-color, #FFF);
  margin-bottom: 20px;
  -webkit-text-shadow: 0 2px 8px rgb(0 0 0 / 60%);
  text-shadow: 0 2px 8px rgb(0 0 0 / 60%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-word;
  padding: 12px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 8px;
  position: relative;
  transition: all var(--duration-normal) var(--ease-standard);
  will-change: transform, text-shadow, color;
}

.kook-paragraph {
  /* 使用新的自适应字号和行高，取代写死�?--font-size-base */
  font-size: clamp(0.75rem, 1.6vw, 1.125rem);
  line-height: clamp(1.4, 1.5, 1.5);
  font-weight: var(--font-weight, 400);
  letter-spacing: var(--letter-spacing, 0.02em);
  color: var(--global-text-color, #FFF);
  margin-bottom: 24px;
  -webkit-text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-word;
  padding: 12px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 8px;
  position: relative;
  transition: all var(--duration-normal) var(--ease-standard);
  will-change: transform, text-shadow, color;
}

/* KOOK 悬停发光与放大动�?*/
.kook-body .kook-paragraph:hover,
.kook-body .kook-url:hover {
  text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 2px 4px rgb(0 0 0 / 50%);
  transform: scale(1.02);
  color: #fff;
  z-index: 10;
}

/* 棉花糖模块专用样�?*/
.marshmallow-page {
  font-family: var(--font-family);
  color: var(--global-text-color, #FFF);
  min-height: 100vh;
}

.marshmallow-layout-grid {
  display: grid;

  /* 左右对调：左侧标题列，右侧自适应正文�?*/
  grid-template-columns: 340px 1fr;
  gap: 24px;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0 48px;
}

/* 左侧标题容器定位 */
.marshmallow-title-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.marshmallow-title {
  position: absolute;
  left: 0; /* 贴紧 grid 左侧子区�?*/
  top: max(80px, calc(env(safe-area-inset-top, 0px) + 100px)); /* 保持上方位置一�?*/
  writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 80px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--global-text-color, #FFF);

  /* 增加立体悬浮多层投影，打破扁平感 */
  -webkit-text-shadow: 2px 2px 0 rgb(0 0 0 / 20%), 4px 4px 0 rgb(0 0 0 / 10%), 0 4px 12px rgb(0 0 0 / 40%);
  text-shadow: 2px 2px 0 rgb(0 0 0 / 20%), 4px 4px 0 rgb(0 0 0 / 10%), 0 4px 12px rgb(0 0 0 / 40%);
  z-index: 2;
  white-space: nowrap;
  transition: all var(--duration-normal) var(--ease-standard);
  transform-origin: center center;
  will-change: transform, text-shadow, color;
  cursor: default;
}

@media (hover: hover) {
  .marshmallow-title:hover {
    transform: scale(1.05) translateY(-5px);
    color: var(--primary-color, #f0f8ff);
    -webkit-text-shadow: 3px 3px 0 rgb(0 0 0 / 15%), 6px 6px 0 rgb(0 0 0 / 10%), 0 8px 24px var(--glow-color, rgb(255 255 255 / 40%));
    text-shadow: 3px 3px 0 rgb(0 0 0 / 15%), 6px 6px 0 rgb(0 0 0 / 10%), 0 8px 24px var(--glow-color, rgb(255 255 255 / 40%));
  }
}

.marshmallow-body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 calc(max(24px, (100vw - 340px - 96px - 1080px) / 2));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.marshmallow-content-wrapper {
  margin: auto 0;
  padding: 80px 0;
  width: 100%;
  max-width: 600px; /* 限制最大宽度，使区块不会占满全�?*/

  /* 正文区块靠右对齐（类似舰长须知），内部文字靠左对齐（类似KOOK�?*/
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-left: auto; /* 靠右对齐关键 */
}

.marshmallow-intro {
  /* 使用新的自适应字号和行高，取代写死�?--font-size-base */
  font-size: clamp(0.75rem, 1.6vw, 1.125rem);
  line-height: clamp(1.4, 1.5, 1.5);
  font-weight: var(--font-weight, 400);
  letter-spacing: var(--letter-spacing, 0.02em);
  color: var(--global-text-color, #FFF);
  margin-bottom: 40px;
  -webkit-text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-word;
  padding: 12px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 8px;
  position: relative;
  transition: all var(--duration-normal) var(--ease-standard);
  will-change: transform, text-shadow, color;
}

.marshmallow-group {
  margin-bottom: 32px;
  padding: 16px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 8px;
  position: relative;
  transition: all var(--duration-normal) var(--ease-standard);
  will-change: transform, text-shadow, color;
}

.marshmallow-label {
  font-size: clamp(1.03125rem, 2.2vw, 1.375rem);
  font-weight: 500;
  margin-bottom: 12px;
  -webkit-text-shadow: 0 2px 6px rgb(0 0 0 / 60%);
  text-shadow: 0 2px 6px rgb(0 0 0 / 60%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-word;
}

.marshmallow-url {
  font-size: clamp(0.84375rem, 1.8vw, 1.125rem);
  font-weight: 400;
  -webkit-text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-all;
}

.marshmallow-url a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-normal) var(--ease-standard), text-shadow var(--duration-normal) var(--ease-standard);
}

.marshmallow-url a:hover {
  color: var(--primary-color, #8ec5fc);
  text-shadow: 0 0 12px var(--glow-color, rgb(255 255 255 / 50%));
}

/* 悬停发光与放大动�?*/
.marshmallow-body .marshmallow-intro:hover,
.marshmallow-body .marshmallow-group:hover {
  text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 2px 4px rgb(0 0 0 / 50%);
  transform: scale(1.02);
  color: #fff;
  z-index: 10;
}

/* 愿景模块专用样式 */
.vision-page {
  font-family: var(--font-family);
  color: var(--global-text-color, #FFF);
  min-height: 100vh;
}

.vision-body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 calc(max(24px, (100vw - 340px - 96px - 1080px) / 2));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.vision-content-wrapper {
  margin: auto 0;
  padding: 80px 0;
  width: 100%;
}

.vision-paragraph {
  /* 使用新的自适应字号和行高，取代写死�?--font-size-base */
  font-size: clamp(0.75rem, 1.6vw, 1.125rem);
  line-height: clamp(1.4, 1.5, 1.5);
  font-weight: var(--font-weight, 400);
  letter-spacing: var(--letter-spacing, 0.03em);
  color: var(--global-text-color, #FFF);
  margin-bottom: 32px;
  -webkit-text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  text-shadow: 0 2px 6px rgb(0 0 0 / 50%);
  
  /* 移除 overflow: hidden 允许交互动效溢出，改�?break-word 防止长英�?链接撑破布局 */
  overflow: visible;
  word-break: break-word;
  padding: 12px 24px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 8px;
  position: relative;
  transition: all var(--duration-normal) var(--ease-standard);
  will-change: transform, text-shadow, color;
}

.vision-paragraph.last {
  margin-bottom: 0;
}

/* 悬停发光与放大动�?*/
.vision-body .vision-paragraph:hover {
  text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 2px 4px rgb(0 0 0 / 50%);
  transform: scale(1.02);
  color: #fff;
  z-index: 10;
}

/* 统一降级方案：减少动�?*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.deco-circle-tl {
  position: absolute;
  top: 100px;
  left: -150px;
  width: 300px;
  height: 300px;
  border: 2px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  z-index: 1;
}

.deco-circle-br-lg {
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border: 2px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
  z-index: 1;
}

.deco-circle-br-sm {
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border: 2px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
  z-index: 1;
}

@media (width <= 1024px) {
  .letter-layout-grid {
    grid-template-columns: 1fr 120px;
    padding: 0 32px;
  }

  .letter-title {
    font-size: 64px;
    right: 0;
  }
}

@media (width <= 640px) {
  .letter-layout-grid {
    grid-template-columns: 1fr 80px;
    padding: 0 20px;
  }

  .letter-title {
    font-size: 48px;
    letter-spacing: 6px;
  }

  .letter-body .salutation {
    font-size: 20px;
  }

  .letter-body .paragraph {
    font-size: 14px;
    line-height: 1.7;
  }

  .deco-circle-tl {
    width: 225px;
    height: 225px;
    top: 75px;
    left: -112.5px;
  }

  .deco-circle-br-lg {
    width: 375px;
    height: 375px;
    bottom: -150px;
    right: -150px;
  }

  .deco-circle-br-sm {
    width: 225px;
    height: 225px;
    bottom: -75px;
    right: -75px;
  }
}

/* 主题切换按钮特效解耦：使用独立伪元素，避免主线程阻塞和重绘堆积 */
#theme-toggle {
    position: relative;
    overflow: visible;
    z-index: 1;
}

/* 移入光晕特效 (Hover Halo) */
#theme-toggle::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 250%; height: 250%;
    background: radial-gradient(circle, rgb(255 255 255 / 30%) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transition: transform var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
    will-change: transform, opacity;
}

#theme-toggle:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* 日夜模式的不同光晕颜�?*/
body.theme-night #theme-toggle::before {
    background: radial-gradient(circle, rgb(200 220 255 / 25%) 0%, transparent 60%);
}

/* 点击波纹/粒子爆炸特效 (Click Burst) */
#theme-toggle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 300%; height: 300%;
    background: radial-gradient(circle, rgb(255 255 255 / 60%) 0%, transparent 50%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    will-change: transform, opacity;
}

body.theme-night #theme-toggle::after {
    background: radial-gradient(circle, rgb(200 220 255 / 50%) 0%, transparent 50%);
}

/* 动态挂载的类，用于触发爆炸动画 */
#theme-toggle.burst::after {
    animation: theme-burst-anim 0.5s ease-out forwards;
}

@keyframes theme-burst-anim {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* 一封信模块的修复与优化 */

/* 确保一封信的文本初始隐藏，以便动画触发 */
#letter .captain-stagger-line {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    will-change: transform, opacity;
}

#letter .captain-stagger-line.animate-in {
    animation: line-fly-in 400ms ease-out forwards;
}

/* ========================================================================== */

/* 新增歌词系统与滚动条隐藏样式 */

/* ========================================================================== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.mask-image-y { mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }


/* ========================================================================== */
/* 逐字符浮动动�?(Floating Characters Animation) */
/* 包含跨浏览器前缀兼容及硬件加�?*/
/* ========================================================================== */
@-webkit-keyframes float-char-anim {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(0, var(--float-y, -3px), 0);
    }
}
@keyframes float-char-anim {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, var(--float-y, -3px), 0);
    }
}

.floating-char {
    display: inline-block;
    will-change: transform;
    /* 后备硬件加速策略，覆盖更旧设备 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    -webkit-animation-name: float-char-anim;
    animation-name: float-char-anim;
    -webkit-animation-duration: var(--float-dur, 3s);
    animation-duration: var(--float-dur, 3s);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: var(--float-delay, 0s);
    animation-delay: var(--float-delay, 0s);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    /* 保持原有的字距与排版，防止因 display: inline-block 导致折行错误 */
    white-space: pre-wrap;
}

/* 无障碍访问与偏好设置降级方案 */
@media (prefers-reduced-motion: reduce) {
    .floating-char {
        -webkit-animation: none !important;
        animation: none !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* ========================================================================== */
/* 新增：高级交互增强效果 */
/* ========================================================================== */

/* 1. 高级链接悬停效果 */
.nav-link,
.footer-link,
a:not([class*="btn"]) {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link::before,
.footer-link::before,
a:not([class*="btn"])::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--interactive-glow), var(--interactive-glow-strong));
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.nav-link:hover::before,
.footer-link:hover::before,
a:not([class*="btn"]):hover::before {
    width: 100%;
}

/* 2. 高级卡片悬浮效果 */
.glass-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.25),
        0 0 30px var(--interactive-glow),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

/* 3. 按钮点击涟漪效果 */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
    opacity: 0;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0s, height 0s, opacity 0s;
}

/* 4. 图片加载渐显效果 */
img {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

img.loaded,
img[data-loaded="true"] {
    opacity: 1;
}

/* 5. 3D悬浮卡片效果 */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-3d:hover {
    transform: rotateX(5deg) rotateY(-5deg) translateZ(10px);
    box-shadow: 
        10px 10px 30px rgba(0, 0, 0, 0.3),
        -5px -5px 20px rgba(255, 255, 255, 0.1);
}

/* 6. 文字打字机效果（用于标题） */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 3s steps(40, end) forwards;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

/* 7. 渐入上移动画（用于内容块） */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* 8. 脉冲发光效果 */
.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 10px var(--interactive-glow);
    }
    50% {
        box-shadow: 0 0 30px var(--interactive-glow-strong), 0 0 60px var(--interactive-glow);
    }
}

/* 9. 旋转加载动画 */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--interactive-glow-strong);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 10. 弹性缩放效果 */
.bounce-scale {
    animation: bounceScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceScale {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 11. 滑入滑出效果 */
.slide-in-left {
    animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 12. 背景渐变动画 */
.gradient-animate {
    background: linear-gradient(-45deg, 
        var(--gradient-start, #ee7752), 
        var(--gradient-mid, #e73c7e), 
        var(--gradient-end, #23a6d5), 
        var(--gradient-alt, #23d5ab));
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 13. 玻璃态按钮高级效果 */
.glass-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.glass-btn:hover::before {
    left: 100%;
}

.glass-btn:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.glass-btn:active {
    transform: translateY(-1px);
}

/* 14. 进度条动画 */
.progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--interactive-glow), var(--interactive-glow-strong));
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

/* 15. 鼠标悬停图片放大效果 */
.img-zoom-container {
    overflow: hidden;
}

.img-zoom-container img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-zoom-container:hover img {
    transform: scale(1.1);
}

/* 16. 毛玻璃效果增强 */
.frosted-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body[data-theme="day"] .frosted-glass {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

body[data-theme="night"] .frosted-glass {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

/* 17. 文字发光呼吸效果 */
.text-glow-breathe {
    animation: textGlowBreathe 3s ease-in-out infinite;
}

@keyframes textGlowBreathe {
    0%, 100% {
        text-shadow: 0 0 10px var(--interactive-glow);
    }
    50% {
        text-shadow: 
            0 0 20px var(--interactive-glow),
            0 0 40px var(--interactive-glow-strong),
            0 0 60px var(--interactive-glow);
    }
}

/* 18. 元素出现时的弹性动画 */
.elastic-appear {
    animation: elasticAppear 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes elasticAppear {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* 19. 渐变边框动画 */
.gradient-border {
    position: relative;
    background: inherit;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, 
        #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientBorderRotate 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 1;
}

@keyframes gradientBorderRotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* 20. 阴影跟随效果 */
.shadow-follow {
    transition: box-shadow 0.3s ease;
}

.shadow-follow:hover {
    box-shadow: 
        8px 8px 20px rgba(0, 0, 0, 0.15),
        -4px -4px 12px rgba(255, 255, 255, 0.1);
}

/* ========================================================================== */
/* 性能优化相关样式 */
/* ========================================================================== */

/* GPU 硬件加速提示类 - 用于复杂动画元素 */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 复合层分离提示 - 用于需要独立渲染的元素 */
.isolate-layer {
    isolation: isolate;
}

/* 内容可见时才渲染动画 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .floating-char,
    .text-shimmer-sweep,
    .pulse-glow,
    .gradient-animate {
        animation: none !important;
    }
}

/* 移动端性能优化 */
@media (max-width: 768px) {
    .glass-card:hover {
        transform: translateY(-4px) scale(1.01);
    }
    
    /* 减少粒子效果 */
    .bg-canvas {
        opacity: 0.6;
    }
}

/* 减少动画帧数以提升性能 */
@media (prefers-reduced-motion: reduce) {
    @keyframes shimmer-sweep {
        0% { background-position: 200% center; }
        100% { background-position: 200% center; }
    }
}

/* 画布容器性能优化 */
#bg-canvas {
    contain: strict;
    transform: translateZ(0);
}

/* 防止不必要的重排 */
.hardware-accelerated,
.transform-3d {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 动画暂停类 - 可通过JS控制 */
.paused-animations *,
.paused-animations *::before,
.paused-animations *::after {
    animation-play-state: paused !important;
    transition-play-state: paused !important;
}

/* 低性能模式 */
@media (max-width: 480px) {
    .text-shimmer-sweep {
        animation: none;
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
        color: inherit;
    }
}