:root {
    /* 品牌色 */
    --p-blue: #063f44;
    --p-green: #158791;
    --p-green-light: #00b1e4;

    /* 导航栏高度 */
    --nav-h: 100px;
    --nav-h-scroll: 80px;

    /* 响应式液体缩放参数 */
    --logo-base-width: clamp(180px, 18vw, 260px);
    --delay: 0s;

    /* 通用色板 */
    --white-100: #ffffff;
    --white-80: rgba(255, 255, 255, 0.8);
    --text-deep: #333333;
    --text-muted: #555555;
    --bg-paper: #F8F9FA;
    --border-soft: #EAECEF;
    --placeholder-bg: #f0f4f4;
    --bezier-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* 新闻卡片 */
    --news-title: #222222;
    --news-title-size: clamp(1.1rem, 2.2vw, 1.6rem);
    --tag-font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    --card-padding: clamp(1.2rem, 3vw, 2.5rem);
    --card-head-bg: #F4F7F9;

    /* 字号 */
    --fs-h1: clamp(1.2rem, 2.5vw, 1.8rem);
    --fs-h2: clamp(1rem, 2vw, 1.4rem);
    --fs-body: clamp(0.75rem, 1vw, 1rem);

    font-size: 16px;
    transition: font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 确保所有多语言文本具备基础过渡属性 */
[data-i18n],
.reveal-text {
    transition: opacity 0.3s ease;
}

@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    src: url('../font/fonts/OpenSans.ttf') format('truetype-variations');
    font-weight: 300 800;
}

@font-face {
    font-family: 'Alibaba PuHuiTi';
    font-display: swap;
    /* 优先使用 WOFF2 格式（5.2MB），回退到 TTF（8MB） */
    src: url('../font/fonts/AlibabaPuHuiTi-3-65-Medium.woff2') format('woff2'),
         url('../font/fonts/AlibabaPuHuiTi-3-65-Medium.ttf') format('truetype-variations');
    font-weight: 300 800;
}


body {
    font-family:'Open Sans';
    margin: 0;
    overflow-x: hidden;
    background-color: #fafafa;

    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

main {
    flex: 1;
}

/* 确保动画样式的基础属性存在 */
.letter-flip-container span {
    display: inline-block;
    will-change: transform, opacity;
    transition-delay: var(--delay, 0s);
}

.lang-node {
    background: none;
    border: none;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.nav-active-state .lang-node {
    color: var(--p-blue);
}

.lang-node.active {
    color: var(--p-green) !important;
}

.sep {
    color: rgba(90, 89, 89, 0.7);
    margin: 0 5px;
}

.nav-active-state .sep {
    color: rgba(90, 89, 89);
}

/* 移动端 Toggle 按钮 */
.mobile-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    margin: 5px 0;
    transition: 0.4s;
}

.nav-active-state .mobile-toggle span {
    background: var(--p-blue);
}

/* 移动端菜单底部居中切换器 */
.mobile-menu-footer {
    display: none;
}

.mobile-menu-footer .lang-node {
    color: var(--p-blue);
    padding: 10px 15px;
}


/* 仅在移动端分辨率下显示 */
@media (max-width: 991px) {
    .mobile-menu-footer {
        display: flex !important;
        /* 只有在小屏幕才激活 */
        justify-content: center;
        align-items: center;
        margin: 20px auto 0;
        padding-top: 20px;
        width: 100%;
    }

    .mobile-menu-footer .lang-node {
        color: var(--p-blue);
        padding: 10px 15px;
    }
}

/* ================================================================
   语言切换过渡样式（不影响 Hero 入场动画，瞬间切换）
   ================================================================ */

/* 这些元素在语言切换时使用隐藏/可见类（无过渡，瞬间切换） */
[data-i18n]:not(.reveal-text),
#about_title, #about_text_wrapper,
#news_main_title, .news-card .news-title, .news-card .news-desc,
.news-card .news-date, .tag-capsule, .section-tag {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* 性能优化: 移除 will-change，避免大量元素常驻合成层 */
}

/* 可见状态：清晰 */
.lang-visible {
    opacity: 1 !important;
}

/* 隐藏状态：透明（淡出） */
.lang-hidden {
    opacity: 0 !important;
    animation: none !important;
}

/* ================================================================
   Hero 区域切换状态（屏蔽入场动画干扰）
   ================================================================ */
.hero-text-area.lang-switching .reveal-text {
    animation: none !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ================================================================
   滚动条统一样式（针对 macOS Chrome 优化）
   ================================================================ */

/* 1. 针对 WebKit 内核（Chrome, Safari, Edge） */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent !important;  /* 关键：强制透明 */
}

::-webkit-scrollbar-track {
    background: transparent !important;  /* 关键：轨道透明 */
    border-radius: 0 !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25) !important;  /* 半透明灰色，更柔和 */
    border-radius: 3px !important;
    border: 1px solid transparent !important;   /* 消除白边 */
    background-clip: content-box !important;    /* 确保背景不溢出 */
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4) !important;
}

::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* 2. 针对 Firefox - 使用 html/body 代替通配符 * 避免全量样式计算 */
html, body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* 3. 针对 Chrome 的特殊补丁（隐藏默认的滚动条背景） */
html, body {
    scrollbar-face-color: transparent !important;
    scrollbar-track-color: transparent !important;
    scrollbar-highlight-color: transparent !important;
    scrollbar-shadow-color: transparent !important;
    scrollbar-dark-shadow-color: transparent !important;
}

/* ================================================================
   子页面语言切换过渡（适配 work-detail 风格的极简模糊感）
   ================================================================ */
.lang-transitioning {
    filter: blur(8px) !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}