/* ==================== CSS 变量定义 - V6.0 视觉底层规范 ==================== */
@import url('footer-component.css');

:root {
    /* ==================== 1. 字体与保底逻辑 (Base Setup) ==================== */
    /* 字体栈：优先使用 'Inter'（英文数字更具几何美感），'PingFang SC'（中文优雅过渡） */
    --font-family: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-main: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-number: 'Inter', 'DIN Condensed', 'PingFang SC', sans-serif;
    
    /* 强制保底：全站任何屏幕下，最小字号不得低于 12px */
    /* 超小屏 (<480px): 字号完全对齐 767px 的移动端标准，禁止进一步缩小字号 */
    
    /* 颜色变量 - 新设计系统 */
    --color-primary: #111111;  /* Primary Text */
    --color-secondary: #F7F7F7;  /* 辅助背景 */
    --color-accent: #111111;  /* Accent Color - 改为纯黑色调 */
    --color-gray-light: #F4F4F4;  /* 画廊背景 */
    --color-gray-medium: #666666;  /* Secondary Text - L3 正文颜色 */
    --color-gray-dark: #999999;  /* Divider - L4 辅助文字颜色 */
    --color-text-dark: #111111;  /* Primary Text */
    --color-text-light: #FFFFFF;  /* White Text */
    --color-bg: #FFFFFF;  /* 主背景色 */
    --color-bg-alt: #F7F7F7;  /* 辅助背景色 */
    --color-gallery: #F4F4F4;  /* 画廊背景色 */
    --color-bg-1: #FFFFFF;  /* Section 背景色 1（白） */
    --color-bg-2: #F7F7F7;  /* Section 背景色 2（中灰） */
    --color-bg-3: #F4F4F4;  /* Section 背景色 3（浅灰） */
    --color-divider: #999;  /* 分割线 - 更新为#999 */
    
    /* Dark Theme 变量（暂不实现，保留备用） */
    --color-dark-bg: #111111;
    --color-dark-bg-alt: #1a1a1a;
    --color-dark-text: #ffffff;
    --color-dark-text-secondary: #a0a0a0;
    
    /* 间距变量（8px 倍数体系） */
    --spacing-1: 4px;     /* 紧凑元素内微小间距 */
    --spacing-2: 8px;     /* 标签内上下、标题与正文间距 */
    --spacing-3: 12px;    /* 跨层级标题与正文间距 */
    --spacing-4: 16px;    /* 同级元素间、卡片间 */
    --spacing-5: 24px;    /* 区块内部间距、卡片内边距 */
    --spacing-6: 32px;     /* 小组件内边距 */
    --spacing-7: 48px;    /* 大区块内间距 */
    --spacing-8: 64px;    /* 区块间间距 */
    --spacing-9: 96px;    /* 页面级大区块分隔 */
    --spacing-10: 120px;  /* Hero 上下留白、页面级大间距 */
    --spacing-xs: 4px;    /* 兼容旧命名 */
    --spacing-sm: 8px;    /* 兼容旧命名 */
    --spacing-md: 16px;   /* 兼容旧命名 */
    --spacing-lg: 24px;   /* 兼容旧命名 */
    --spacing-xl: 48px;   /* 兼容旧命名 */
    --spacing-xxl: 120px; /* 兼容旧命名 */
    
    /* ==================== 精细化排版系统 (Typography System) V6.0 ==================== */
    /* 设计原则：英文数字更具几何美感，中英文混排优雅过渡 */
    
    /* L1 标题 (section h2, .story-l1) - PC 32px / Tablet 28px / Mobile 24px */
    /* 行高: 1.25 (紧凑且有力) | 字间距: -0.02em (负值，营造印刷质感) */
    --font-size-l1: 2rem;        /* PC 32px */
    --font-size-l1-tablet: 1.75rem;  /* Tablet 28px */
    --font-size-l1-mobile: 1.5rem;   /* Mobile 24px */
    
    /* L2 二级标题 (Card Title) - PC 20px / Tablet 18px / Mobile 17px */
    /* 行高: 1.4 | 字间距: -0.01em */
    --font-size-l2: 1.25rem;      /* PC 20px */
    --font-size-l2-tablet: 1.125rem; /* Tablet 18px */
    --font-size-l2-mobile: 1.0625rem; /* Mobile 17px */
    
    /* L3 正文 (p, .body-text, .about-description p) - 全端统一 16px (黄金阅读字号) */
    /* 行高: 1.6 (舒缓的阅读节奏) | 颜色: #666666 */
    --font-size-l3: 1rem;        /* 16px - 全端统一 */
    
    /* L4 辅助文字 (Caption, Date) - PC/Tablet 14px / Mobile 13px */
    /* 行高: 1.5 | 颜色: #999999 */
    --font-size-l4: 0.875rem;     /* PC/Tablet 14px */
    --font-size-l4-mobile: 0.8125rem; /* Mobile 13px */
    
    /* L5 标签/分类 (Tag, Label) - 全端 12px (触发保底线) */
    /* 行高: 1 (用于胶囊形状内) | 字间距: 0.05em | 字重: 500 */
    --font-size-l5: 0.75rem;      /* 12px - 保底线，全端统一 */
    
    /* 字号变量别名 - 兼容性 */
    --font-size-xs: 0.75rem;   /* 12px - L5 标签/分类（保底线） */
    --font-size-sm: 0.875rem;  /* 14px - L4 辅助文字 */
    --font-size-base: 1rem;   /* 16px - L3 正文（黄金阅读字号） */
    --font-size-md: 1.125rem;  /* 18px - 平板正文 */
    --font-size-lg: 1.25rem;  /* 20px - L2 二级标题 */
    --font-size-xl: 2rem;      /* 32px - L1 标题（PC） */
    --font-size-2xl: 2rem;    /* 32px - L1 标题（PC） */
    --font-size-3xl: 3rem;    /* 48px - 大数字展示 */
    
    /* 行高变量 */
    --line-height-heading: 1.25;  /* L1/L2 标题专用，紧凑有力 */
    --line-height-body: 1.6;      /* L3 正文专用，舒缓阅读节奏 */
    --line-height-caption: 1.5;  /* L4 辅助文字 */
    --line-height-tag: 1;        /* L5 标签/胶囊专用 */
    
    /* 字间距变量 */
    --letter-spacing-tight: -0.02em;  /* L1 标题负值字间距，营造印刷质感 */
    --letter-spacing-heading: -0.01em; /* L2 标题负值字间距 */
    --letter-spacing-tag: 0.05em;      /* L5 标签拉开字间距 */
    --letter-spacing-normal: 0;        /* 正常字间距 */
    
    /* ==================== 3. 响应式圆角阶梯 (Radius Scale) V6.0 ==================== */
    /* PC ≥1200px: 24px | Tablet 768px-1199px: 16px | Mobile ≤767px: 12px */
    /* 超小屏 ≤480px: 继承移动端标准，禁止进一步缩小 */
    --card-radius: 24px;  /* 默认 PC 圆角 24px */
    --card-radius-tablet: 16px;  /* 平板端圆角 16px */
    --card-radius-mobile: 12px;  /* 移动端圆角 12px（保底线） */
    
    /* 布局变量 */
    --max-width: 1200px;
    
    /* ==================== 4. 过渡动画 - 果冻般顺滑感 V6.0 ==================== */
    /* cubic-bezier(0.2, 0.8, 0.2, 1) - 快速启动，优雅减速 */
    /* 圆角和字号的适配产生"果冻般"的顺滑感 */
    --transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-jelly: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* 全局间距 */
    --spacing-section: 100px;  /* 模块间距 */
    --spacing-hero: 120px;  /* Hero上下留白 */
    --spacing-footer: 120px;  /* Footer上下留白 */
    
    /* 栅格系统 */
    --gutter-desktop: 24px;
    --gutter-tablet: 24px;
    --gutter-mobile: 16px;
    --gutter-small: 16px;  /* 超小屏对齐移动端，不进一步缩小 */
    
    /* 区块级间距（PC端）—— 阶梯规范：PC(120) Tablet(80) Mobile(48) */
    --section-padding-top: 120px;
    --section-padding-bottom: 120px;
    --section-gap: 80px;
    --hero-padding: 120px;
    --footer-padding: 80px;
    --card-padding: 24px;
    --card-gap: 24px;
    
    /* 导航栏高度锚点（内容偏移基准） */
    --nav-height: 65px;
}

/* ==================== 基础样式重置 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    color: var(--color-text-dark);
    background-color: var(--color-secondary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 全局主容器：实现 Footer 贴底，内容偏移避开 fixed 导航栏 */
main {
    flex: 1; /* 撑开空间，让 Footer 贴底 */
    padding-top: var(--nav-height) !important;
    box-sizing: border-box;
}

/* 强制同步 .navbar 的高度与 line-height */
.navbar {
    height: var(--nav-height);
    line-height: var(--nav-height);
}

/* ==================== 平板端（768px–1199px）======================== */
/* 圆角阶梯：16px（768px-1199px）| L1 标题：28px | L2 标题：18px */
@media (max-width: 1199px) {
    :root { 
        --nav-height: 55px;
        /* 平板端圆角阶梯：16px（768px-1199px） */
        --card-radius: 16px;
        /* 平板端 L1 标题字号：28px */
        --font-size-xl: 1.75rem;  /* 28px */
        --font-size-2xl: 1.75rem; /* 28px */
        --font-size-l1: 1.75rem;  /* 28px */
        /* 平板端 L2 二级标题：18px */
        --font-size-lg: 1.125rem; /* 18px */
        --font-size-l2: 1.125rem; /* 18px */
    }
}

/* L1 标题：使用流体字号系统 */
h1 {
    /* 字号通过 --font-size-2xl 变量响应式调整 */
    font-size: var(--font-size-2xl);
    /* L1 行高：1.25（紧凑有力） */
    line-height: var(--line-height-heading);
    font-weight: 600;
    /* L1 字间距：-0.02em（负值，营造印刷质感） */
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 0.5em;
}

/* L1 一级标题 section h2 */
/* 字号通过 --font-size-2xl 变量响应式调整 */
section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--spacing-2);  /* 主副标题间距：8px（阶梯规范，所有设备固定不变） */
    /* L1 字间距：-0.02em（负值，营造印刷质感） */
    letter-spacing: var(--letter-spacing-tight);
    /* L1 行高：1.25（紧凑有力） */
    line-height: var(--line-height-heading);
}

/* L1 一级标题 section h2.story-l1 */
section h2.story-l1,
.story-l1 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-dark);
    /* L1 字间距：-0.02em（负值，营造印刷质感） */
    letter-spacing: var(--letter-spacing-tight);
    /* L1 行高：1.25（紧凑有力） */
    line-height: var(--line-height-heading);
    margin-bottom: var(--h2-gap, 64px);
    text-align: center;
}

/* 副标题：优雅的过渡 */
.subtitle {
    font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem);
    line-height: 1.4;
    color: rgba(17, 17, 17, 0.85);
    font-weight: 500;
}

/* L3 正文：黄金阅读字号 */
p, .body-text {
    font-size: var(--font-size-base);  /* 16px 全端统一 */
    line-height: var(--line-height-body);  /* 1.6 舒缓阅读节奏 */
    color: var(--color-gray-medium);  /* #666666 减轻视觉压力 */
}

/* L5 标签：精致的工业感 */
.tag {
    font-size: var(--font-size-xs);  /* 12px 保底线 */
    font-weight: 500;
    letter-spacing: var(--letter-spacing-tag);  /* 0.05em 拉开间距 */
    text-transform: uppercase;
    color: var(--color-text-dark);
    background: #f3f3f3;
    padding: 4px 8px;
    border-radius: 12px;
    line-height: 1;  /* 用于胶囊形状内 */
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    cursor: pointer;
    transition: var(--transition);
}

/* ==================== 通用容器 ==================== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================== 全局页面内容容器（统一左右边距） ==================== */
.page-content {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 平板端（768px–1023px）page-content 左右边距 */
@media (max-width: 1024px) {
    .page-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* 移动端（≤767px）page-content 左右边距 */
@media (max-width: 767px) {
    .page-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ==================== 导航栏样式 ==================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-gray-light);
    z-index: 1000;
}

/* 汉堡按钮（桌面端默认隐藏） */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 1px solid #111111;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #111111;
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
    margin: 0 auto;
}

.hamburger:hover {
    background: #f0f0f0;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.nav-menu {
    display: flex;
    gap: 40px;
}

.nav-menu a {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: var(--transition);
}

.nav-menu a:hover::after {
    width: 100%;
}

.lang-switch {
    /* deprecated: 已迁移至 buttons.css（高度 50px） */
}

/* ==================== Hero 区域样式 ==================== */
.hero {
    box-sizing: border-box;
    height: 95vh;
    min-height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background: transparent;
    color: var(--color-text-light);
    text-align: center;
    padding: 80px var(--spacing-lg);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    animation: fadeInUp 1s ease-out;
}

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

/* ==================== Hero 样式 ==================== */
.hero h1 {
    /* 桌面端 Hero 使用超粗体，字号通过变量响应式 */
    font-size: clamp(2rem, 5vw, 2.5rem);  /* 32px - 40px 流体字号 */
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
    line-height: var(--line-height-heading);
    animation: fadeInUp 1s ease-out 0.2s both;
}

.hero p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);  /* 16px - 20px 流体字号 */
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
    animation: fadeInUp 1s ease-out 0.4s both;
}

.scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    animation: bounce 2s infinite;
    z-index: 1;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ==================== 通用 Section 样式 ==================== */
section {
    padding: var(--section-padding-top, 120px) 0 var(--section-padding-bottom, 120px);
}

/* L1 一级标题 section h2 */
/* 字号通过 --font-size-2xl 变量响应式调整 */
section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--spacing-2);  /* 主副标题间距：8px（阶梯规范，所有设备固定不变） */
    letter-spacing: var(--letter-spacing-tight);  /* -0.02em 营造印刷质感 */
    line-height: var(--line-height-heading);  /* 1.25 紧凑有力 */
}

/* L1 一级标题 section h2.story-l1 */
section h2.story-l1,
.story-l1 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-dark);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-heading);
    margin-bottom: var(--h2-gap, 64px);
    text-align: center;
}

.section-subtitle {
    text-align: center;
    color: var(--color-gray-medium);
    margin-bottom: var(--spacing-8);  /* PC端副标题→内容间距：64px（阶梯规范） */
    font-size: var(--font-size-base);
    letter-spacing: 0;
}

.section-cta {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* === About 区块副标题 === */
.about-subtitle {
    text-align: center;
    color: var(--color-gray-medium);
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: var(--spacing-8);  /* PC端副标题→内容间距：64px（阶梯规范） */
}

/* 平板端（768px–1023px）副标题→内容间距 */
@media (max-width: 1023px) {
    .about-subtitle {
        margin-bottom: 48px;  /* 平板端副标题→内容间距：48px（阶梯规范） */
    }
}

/* 移动端（≤767px）副标题→内容间距 */
@media (max-width: 767px) {
    .about-subtitle {
        margin-bottom: 32px;  /* 移动端副标题→内容间距：32px（阶梯规范） */
    }
}

.cta-link {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-primary);
    
    
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.cta-link:hover {
    background: var(--color-primary);
    color: var(--color-secondary);
    transform: translateY(-2px);
}

/* ==================== Selected Work 样式 ==================== */
.work {
    background-color: var(--color-secondary);
    padding-top: var(--section-padding-top, 120px);
    padding-bottom: var(--section-padding-bottom, 120px);
}

.work-grid {
    display: grid;
    margin-top: var(--spacing-xl);  /* PC端 48px（设计规范 19.3.3/25.2.2） */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-5);  /* PC/平板端 24px（设计规范） */
}

/* ===== Work 卡片样式 ===== */
.work-item {
    background: var(--color-gray-light);
    border: 1px solid #f8fafc;  /* 卡片边框（设计规范） */
    border-radius: var(--card-radius);  /* 响应式圆角：PC 24px / Tablet 16px / Mobile 12px */
    overflow: hidden;
    transition: var(--transition);
}

.work-item:hover {
    border-color: #111111;  /* Hover 边框色（设计规范） */
    transform: translateY(-2px);  /* 上移 2px（设计规范） */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);  /* 阴影增强（设计规范） */
}

.work-placeholder {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.work-item:nth-child(2) .work-placeholder {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.work-item:nth-child(3) .work-placeholder {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.work-item:nth-child(4) .work-placeholder {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.work-item h3 {
    /* L2 二级标题 (Card Title) - 20px/18px/17px */
    font-size: var(--font-size-lg);  /* PC 20px */
    font-weight: 600;
    color: #111111;
    /* L2 行高：1.4 */
    line-height: 1.4;
    /* L2 字间距：-0.01em */
    letter-spacing: var(--letter-spacing-heading);
    padding: var(--spacing-5);  /* 卡片内边距 24px */
    margin-bottom: 0;
}

/* ===== AI Lab 卡片样式 ===== */
.ai-lab {
    background-color: var(--color-gray-light);
}

.ai-lab-grid {
    display: grid;
    margin-top: var(--spacing-8);  /* PC端副标题→内容间距：64px（阶梯规范） */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);  /* PC/平板端 24px（设计规范） */
}

.ai-lab-item {
    background: var(--color-secondary);
    border: 1px solid #f8fafc;  /* 卡片边框（设计规范） */
    border-radius: var(--card-radius);  /* 响应式圆角：PC 24px / Tablet 16px / Mobile 12px */
    overflow: hidden;
    transition: var(--transition);
}

.ai-lab-item:hover {
    border-color: #111111;  /* Hover 边框色（设计规范） */
    transform: translateY(-2px);  /* 上移 2px（设计规范） */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);  /* 阴影增强（设计规范） */
}

.ai-lab-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ai-lab-item:nth-child(2) .ai-lab-placeholder {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.ai-lab-item:nth-child(3) .ai-lab-placeholder {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.ai-lab-item h3 {
    font-size: var(--font-size-base);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
    margin-bottom: 0;
}

.ai-lab-item p {
    font-size: var(--font-size-xs);
    color: var(--color-gray-medium);
    padding: 0 var(--spacing-md) var(--spacing-md);
    margin-bottom: 0;
}

/* ==================== Photography 样式 ==================== */
.photography {
    background-color: var(--color-secondary);
}

/* PC端 Photography 全屏沉浸式布局 */
@media (min-width: 1025px) {
    .photography {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .photo-gallery-container {
        flex: 1;
        padding: 80px 50px;
    }

    .photography .section-cta {
        padding-bottom: 0;
    }
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.photo-item {
    position: relative;
    overflow: hidden;
    border: 10px solid #ffffff;
    
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition);
}

.photo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: grayscale(60%);
    transition: var(--transition);
}

.photo-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.photo-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ==================== About 样式 ==================== */
.about {
    background-color: var(--color-secondary);
}

.about-content {
    max-width: 1200px;
    margin: var(--spacing-8) auto 0 auto;  /* PC端副标题→内容间距：64px（阶梯规范） */
    text-align: center;
}

.about-text h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.about-text p {
    font-size: 1.75rem;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

.about-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.about-link {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-primary);
    
    
    transition: var(--transition);
}

.about-link:hover {
    background: var(--color-primary);
    color: var(--color-secondary);
}

/* ==================== 弹窗组件样式 ==================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    font-size: var(--font-size-3xl);
    color: var(--color-secondary);
    cursor: pointer;
    transition: var(--transition);
    z-index: 2001;
}

/* Video Modal 专用关闭按钮 - 白色调，右上角 */
.video-modal > .modal-close {
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: 50%;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.video-modal > .modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
    color: #ffffff;
}

.modal-close:hover {
    transform: rotate(90deg);
    color: var(--color-gray-medium);
}

/* 图片弹窗 */
.photo-modal .modal-image {
    max-width: 1200px;
    max-height: 90%;
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

/* Work弹窗 */
.work-modal .modal-content {
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-secondary);
    
    
    padding: var(--spacing-xl);
    position: relative;
}

.work-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.work-detail-header {
    margin-bottom: 30px;
}

.work-detail-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.work-detail-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.work-detail-category {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.work-detail-year {
    color: var(--color-gray-medium);
    font-size: 14px;
}

.work-detail-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-dark);
}

.work-detail-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.work-detail-body p {
    margin: 0;
    line-height: 1.8;
}

.work-detail-image {
    width: 100%;
    border-radius: var(--card-radius);  /* 响应式圆角 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 767px) {
    .work-modal .modal-content {
        max-width: 95%;
        padding: 20px;
    }
    
    .work-detail-title {
        font-size: 24px;
    }
    
    .work-detail-image {
        border-radius: 12px;
    }
}

/* 文章弹窗 */
.insight-modal .modal-content {
    max-width: 800px;
    width: 600px;
    height: 600px;
    overflow: visible;
    background: var(--color-secondary);
    
    
    padding: var(--spacing-xl);
    position: relative;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.insight-detail {
    text-align: center;
    padding: var(--spacing-md);
overflow-y: auto;
    max-height: 520px;
}

.insight-detail-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-light);
    -webkit-text-stroke: 1px var(--color-gray-medium);
    margin-bottom: var(--spacing-sm);
}

.insight-detail-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
}

.insight-detail-body {
    text-align: left;
    color: #666666;
    line-height: 1.8;
}

.insight-detail-body p {
    margin-bottom: var(--spacing-md);
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--spacing-sm) var(--spacing-md);
    background: #ffffff;
    color: #000000;
    
    
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.nav-btn:hover {
    background: var(--color-accent);
}

.prev-btn {
    left: var(--spacing-md);
}

.next-btn {
    right: var(--spacing-md);
}

/* 摄影弹窗导航按钮 */
.photo-modal .photo-prev-btn {
    left: var(--spacing-md);
    z-index: 2002;
}

.photo-modal .photo-next-btn {
    right: var(--spacing-md);
    z-index: 2002;
}

.photo-modal .nav-btn {
    font-size: var(--font-size-2xl);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-primary);
    backdrop-filter: blur(5px);
    border: 1px solid var(--color-gray-light);
}

.photo-modal .nav-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

/* ==================== 视频弹窗样式 ==================== */
.video-modal .video-container {
    width: 1200px;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    animation: zoomIn 0.3s ease;
}

.video-modal .video-iframe {
    width: 100%;
    height: 100%;
    
    
    background: #000;
}
/* ==================== 响应式设计 - PC端（95vh） ==================== */
@media (min-width: 1024px) {
    .hero {
        height: 95vh;
        min-height: 95vh;
        max-height: 95vh;
    }
}

/* ==================== 响应式设计 - 平板端（横竖屏共用） ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* ===== 平板端导航：汉堡菜单（与移动端一致） ===== */
    .hamburger {
        display: flex;
        border: none;
    }

    .navbar:has(.nav-menu.open) .lang-switch {
        display: none;
    }

    .navbar {
        flex-wrap: wrap;
        gap: 0;
        padding: 0 var(--spacing-lg);  /* 统一左右间距为 24px */
        align-items: center;
    }

    .navbar:has(.nav-menu.open) .logo {
        display: none;
    }

    .navbar:has(.nav-menu.open) .nav-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .navbar:has(.nav-menu.open) {
        border-bottom-color: transparent;
    }

    .navbar:has(.nav-menu.open) .nav-right {
        position: fixed;
        top: 10px;
        right: var(--spacing-lg);  /* 统一右侧间距为 24px */
        z-index: 1000001;
    }

    .nav-left {
        flex: 1;
        width: auto;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* 菜单默认折叠 */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding: var(--spacing-sm) 0;
        border-top: 1px solid var(--color-gray-light);
        margin-top: var(--spacing-sm);
    }

    /* 菜单展开：全屏 fixed overlay */
    .nav-menu.open {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 72px var(--spacing-lg) 48px;  /* 统一左右间距为 24px */
        box-sizing: border-box;
        gap: 100px;
        background: #ffffff;
        z-index: 1000000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: none;
    }

    .nav-menu.open li {
        width: 100%;
        text-align: center;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .nav-menu li a {
        display: block;
        padding: 10px 0;
        font-size: var(--font-size-sm);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-menu.open li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        padding: 0;
        line-height: 1.25;
        border-bottom: none;
    }

    .nav-menu.open li a::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-menu.open li a:hover::after {
        width: 100%;
    }

    .hero h1 {
        font-size: var(--font-size-2xl);
    }

    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 64px;  /* 平板端内容区上间距：64px（阶梯规范） */
        gap: var(--spacing-5);  /* 平板端 24px（设计规范） */
    }

    .ai-lab-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 48px;  /* 平板端副标题→内容间距：48px（阶梯规范） */
        gap: 24px;
    }

    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .insight-modal .modal-content {
        padding: var(--spacing-lg);
    }

    /* 平板端（768px–1023px）Section Padding：80px */
    section {
        padding: var(--section-padding-top, 80px) 0 var(--section-padding-bottom, 80px);
    }

    .section-subtitle {
        margin-bottom: var(--heading-margin-bottom, 48px);  /* 平板端副标题→内容间距：48px */
        font-size: 16px;
    }

    .section-cta {
        margin-top: var(--spacing-xl);
    }

    .photography .section-cta {
        padding-bottom: 0;
    }

    /* 平板端容器的 padding 优化 */
    .container {
        padding: 0 var(--spacing-lg);
    }

    /* 平板端 Hero 标题优化 */
    .hero h1 {
        font-size: var(--font-size-2xl);
    }

    .hero p {
        font-size: var(--font-size-md);
    }

    /* 平板端 Scroll Indicator 优化 */
    .scroll-indicator {
        font-size: var(--font-size-xs);
    }

    /* 平板端 Photography Gallery 优化 */
    .photo-gallery-container {
        padding: 48px var(--spacing-lg);  /* 平板端内容区边距：48px（阶梯规范） */
    }

    .photo-item {
        border-width: 8px;
    }

    .photo-item.size-s {
        width: 140px;
        height: 187px;
    }

    .photo-item.size-m {
        width: 196px;
        height: 261px;
    }

    .photo-item.size-l {
        width: 252px;
        height: 336px;
    }

    /* 平板端 Modal 优化 */
    .modal-content {
        padding: var(--spacing-xl);
    }

    .work-detail-title {
        font-size: var(--font-size-2xl);
    }

    .work-detail-description {
        font-size: var(--font-size-md);
    }

    /* 平板端 About 区域优化 */
    .about-content {
        padding: var(--spacing-xl);
        margin-top: 48px;  /* 平板端副标题→内容间距：48px（阶梯规范） */
    }

    .about-text h3 {
        font-size: var(--font-size-lg);
    }

    .about-text p {
        font-size: 1.5rem;
    }
}

/* ==================== 响应式设计 - 平板横屏（95vh） ==================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .hero {
        height: 95vh;
        min-height: 95vh;
        max-height: 95vh;
    }
}

/* ==================== 响应式设计 - 平板竖屏（70vh） ==================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .hero {
        height: 95vh;
        min-height: 95vh;
        max-height: 95vh;
    }
}

/* ==================== 响应式设计 - 移动端（≤767px）======================== */
/* 保底线：字号完全对齐 767px 的移动端标准，禁止进一步缩小字号，改为通过容器内边距适配 */
@media (max-width: 767px) {
    html {
        /* 禁止缩小字号：font-size 保持 16px，依赖容器内边距适配 */
        font-size: 16px;
    }

    :root {
        /* 移动端 L1 标题字号：24px */
        --font-size-xl: 1.5rem;  /* 24px */
        --font-size-2xl: 1.5rem; /* 24px */
        --font-size-l1: 1.5rem;  /* 24px */
        /* 移动端 L4 辅助文字：13px */
        --font-size-sm: 0.8125rem; /* 13px */
        --font-size-l4: 0.8125rem; /* Mobile 13px */
        /* 移动端圆角阶梯：12px（保底线） */
        --card-radius: 12px;
        /* 移动端 L2 标题字号：17px */
        --font-size-lg: 1.0625rem;
        --font-size-l2: 1.0625rem;
    }

    body.nav-open-mobile {
        overflow: hidden;
    }
    
    /* ===== 移动端导航：汉堡菜单 ===== */
    .hamburger {
        display: flex;
        border: none;
    }

    .navbar:has(.nav-menu.open) .lang-switch {
        display: none;
    }

    .lang-switch {
        /* 收起时正常显示 */
    }

    .navbar {
        flex-wrap: wrap;
        gap: 0;
        padding: 0 var(--spacing-md);
        align-items: center;
    }

    .navbar:has(.nav-menu.open) .logo {
        display: none;
    }

    .navbar:has(.nav-menu.open) .nav-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .navbar:has(.nav-menu.open) {
        border-bottom-color: transparent;
    }

    .navbar:has(.nav-menu.open) .nav-right {
        position: fixed;
        top: 10px;
        right: var(--spacing-md);
        z-index: 1000001;
    }

    .nav-left {
        flex: 1;
        width: auto;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* 菜单默认折叠 */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding: var(--spacing-sm) 0;
        border-top: 1px solid var(--color-gray-light);
        margin-top: var(--spacing-sm);
    }

    /* 菜单展开：全屏 fixed overlay，不占文档流，叠在最上层 */
    .nav-menu.open {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 72px var(--spacing-md) 48px;
        box-sizing: border-box;
        gap: 100px;
        background: #ffffff;
        z-index: 1000000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: none;
    }

    .nav-menu.open li {
        width: 100%;
        text-align: center;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .nav-menu li a {
        display: block;
        padding: 10px 0;
        font-size: var(--font-size-sm);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-menu.open li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        padding: 0;
        line-height: 1.25;
        border-bottom: none;
    }

    .nav-menu.open li a::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-menu.open li a:hover::after {
        width: 100%;
    }
    
    .hero h1 {
        font-size: clamp(1.5rem, 5vw, 1.75rem);  /* 24px - 28px 流体字号 */
        letter-spacing: -0.02em;
    }
    
    .hero p {
        font-size: var(--font-size-base);  /* 16px */
    }
    
    section {
        padding: var(--section-padding-top, 48px) 0 var(--section-padding-bottom, 48px);  /* 移动端 Section Padding：48px（设计阶梯规范） */
    }

    section h2 {
        font-size: var(--font-size-2xl);  /* 24px - 继承变量 */
        margin-bottom: var(--spacing-2);  /* 主副标题间距：8px（阶梯规范，所有设备固定不变） */
    }

    /* L1 一级标题 移动端 24px */
    section h2.story-l1,
    .story-l1 {
        font-size: var(--font-size-2xl);  /* 24px - 继承变量 */
        margin-bottom: 8px;
    }

    .section-subtitle {
        margin-bottom: 32px;  /* 移动端副标题→内容间距：32px（阶梯规范） */
        font-size: var(--font-size-base);  /* 16px */
    }

    .work-grid {
        grid-template-columns: 1fr;
        margin-top: 32px;  /* 移动端内容区上间距：32px（阶梯规范 Mobile 32px） */
        gap: var(--spacing-4); /* 移动端 16px */
    }
    
    .ai-lab-grid {
        grid-template-columns: 1fr;
        margin-top: 32px;  /* 移动端副标题→内容间距：32px（阶梯规范） */
        gap: var(--spacing-4); /* 移动端 16px */
    }
    
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4); /* 移动端 16px */
    }
    
    .photo-item img {
        height: 150px;
    }
    
    .insight-modal .modal-content {
        width: 95%;
        padding: var(--spacing-md);
    }
    
    .nav-btn {
        position: static;
        transform: none;
        margin: var(--spacing-xs) var(--spacing-sm);
    }
    
    .insight-detail {
        margin: var(--spacing-md) 0;
    }

    .video-modal .video-container {
        width: 95%;
    }    
    .about-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* 移动端 About 区域优化 */
    .about-content {
        margin-top: 32px;  /* 移动端 32px（阶梯规范 Mobile 32px） */
    }

    .about-text p {
        font-size: 1.25rem;
    }
}
/* Insight弹窗导航按钮位置调整 */
.insight-modal .modal-content .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.insight-modal .modal-content .prev-btn {
    left: 10px;
}

.insight-modal .modal-content .next-btn {
    right: 10px;
}
/* ==================== Photography 横向画廊样式 ==================== */
.photo-gallery-container {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--spacing-8) + 30px) 50px;
    margin: 0 -50px;
}

.photo-gallery-track {
    display: flex;
    gap: var(--spacing-lg);
    transition: transform 0.1s ease-out;
    width: max-content;
    overflow: visible;
    padding: 20px 0;
}

.photo-item {
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    border: 10px solid #ffffff;
    
    border-radius: 0;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: grayscale(60%);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1);
}

.photo-item.size-s {
    width: 150px;
    height: 200px;
}

.photo-item.size-m {
    width: 210px;
    height: 280px;
}

.photo-item.size-l {
    width: 270px;
    height: 360px;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

/* Hover 光影效果 */
.photo-item:hover {
    filter: grayscale(0%);
    transform: scale(1.03);
    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.photo-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}

.photo-item:hover::after {
    opacity: 1;
}

/* 响应式：平板端 Photography Gallery */
@media (min-width: 768px) and (max-width: 1023px) {
    .photo-gallery-container {
        overflow-x: scroll;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding: calc(48px + 30px) var(--spacing-lg);
        margin: 0 -30px;
    }

    .photo-gallery-track {
        overflow: visible;
        padding: 20px 0;
    }

    /* 规范：平板端 (768px-1023px) Photography 间距应为 24px */
    .photo-gallery-track {
        gap: 24px;
    }

    .photo-item {
        border-width: 8px;
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1);
    }

    .photo-item.size-s {
        width: 130px;
        height: 173px;
    }

    .photo-item.size-m {
        width: 180px;
        height: 240px;
    }

    .photo-item.size-l {
        width: 230px;
        height: 307px;
    }

    /* 平板端 Photo Modal 优化 */
    .photo-modal-content {
        max-width: 85vw;
        max-height: 88vh;
    }

    .photo-modal .modal-image {
        max-height: 75vh;
    }

    .photo-modal .nav-btn {
        padding: var(--spacing-sm);
        font-size: 16px;
    }

    .photo-modal .photo-prev-btn {
        left: 15px;
    }

    .photo-modal .photo-next-btn {
        right: 15px;
    }

    .photo-title {
        font-size: var(--font-size-xl);
    }

    .photo-info {
        margin-top: var(--spacing-lg);
    }
}

/* 响应式：移动端手势滑动 */
@media (max-width: 767px) {
    .photo-gallery-container {
        overflow-x: scroll;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding: calc(48px + 30px) 16px;
        margin: 0 -16px;
    }
    
    .photo-gallery-track {
        overflow: visible;
        padding: 20px 0;
    }
    
    .photo-item {
        transform: scale(1);
    }
    
    .photo-item.size-s {
        width: 120px;
        height: 160px;
    }
    
    .photo-item.size-m {
        width: 160px;
        height: 210px;
    }
    
    .photo-item.size-l {
        width: 200px;
        height: 270px;
    }
}/* ==================== Photo Modal 样式和动画 ==================== */
.photo-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.photo-modal .modal-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    
    
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.photo-info {
    margin-top: var(--spacing-lg);
    text-align: center;
    color: var(--color-text);
}

.photo-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.photo-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Modal 打开动画 */
.modal {
    transition: opacity 0.3s ease-out;
}

.modal.active .modal-content,
.modal.active .photo-modal-content {
    animation: modalOpen 0.3s ease-out;
}

@keyframes modalOpen {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal 关闭动画 */
.modal.closing {
    animation: modalClose 0.3s ease-out forwards;
}

@keyframes modalClose {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* 导航按钮定位 */
.photo-modal .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    padding: var(--spacing-md);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 100;
}

.photo-modal .nav-btn:hover {
    background: var(--color-accent);
    transform: translateY(-50%) scale(1.1);
}

.photo-modal .photo-prev-btn {
    left: 20px;
}

.photo-modal .photo-next-btn {
    right: 20px;
}/* ==================== AI Lab 视频卡片播放图标 ==================== */
.ai-lab-item {
    position: relative;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-lab-item::before {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
    z-index: 10;
}

.ai-lab-item:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.ai-lab-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

/* 视频Modal动画优化 */
.video-modal .modal-content {
    animation: modalOpen 0.3s ease-out;
}

.video-modal.closing .modal-content {
    animation: modalClose 0.3s ease-out forwards;
}/* ==================== 全局 Scroll Reveal 动画 ==================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 为所有section添加reveal类 */
.section {
    position: relative;
}

/* 卡片元素reveal */
.work-card.reveal,
.photo-item.reveal,
.ai-lab-item.reveal {
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* 延迟动画效果 */
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }/* ==================== 响应式布局优化 ==================== */

/* 移动端（≤767px 及以下） */
@media (max-width: 767px) {
    /* Work Cards: 2列 → 1列 */
    .work-grid {
        grid-template-columns: 1fr;
        margin-top: 32px;  /* 移动端 32px（阶梯规范 Mobile 32px） */
    }
    
    /* AI Lab Cards: 3列 → 2列 */
    .ai-lab-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 32px;  /* 移动端 32px（阶梯规范 Mobile 32px） */
        gap: var(--spacing-md);
    }
    
    /* Photography Gallery: 卡片尺寸缩小20% */
    .photo-item.size-s {
        width: 120px;
        height: 160px;
    }
    
    .photo-item.size-m {
        width: 168px;
        height: 224px;
    }
    
    .photo-item.size-l {
        width: 216px;
        height: 288px;
    }
    
    /* Modal内容调整 */
    .photo-modal-content {
        max-width: 95vw;
        max-height: 85vh;
    }
    
    .photo-modal .modal-image {
        max-height: 70vh;
    }
    
    /* 字体大小调整 */
    .photo-title {
        font-size: var(--font-size-lg);
    }
}

/* 手机尺寸 (480px及以下) - 超小屏保底线 */
/* 字号完全对齐 767px 的移动端标准，禁止进一步缩小字号，改为通过容器内边距适配 */
@media (max-width: 480px) {
    html {
        /* 禁止缩小字号：font-size 保持 16px，依赖容器内边距适配 */
        font-size: 16px;
    }
    
    :root {
        /* 重要：超小屏圆角保持 12px（保底线），不进一步缩小 */
        --card-radius: 12px;
        /* 超小屏字号保持移动端标准（保底线） */
        /* L1 标题：24px */
        --font-size-xl: 1.5rem;
        --font-size-2xl: 1.5rem;
        --font-size-l1: 1.5rem;
        /* L4 辅助文字：13px */
        --font-size-sm: 0.8125rem;
        --font-size-l4: 0.8125rem;
        /* 容器内边距适配 */
        --gutter-small: 16px;
    }
    
    /* Work Cards: 保持1列，增加间距 */
    .work-grid {
        gap: var(--spacing-3);  /* 超小屏 12px（设计规范） */
    }
    
    /* AI Lab Cards: 2列 → 1列 */
    .ai-lab-grid {
        grid-template-columns: 1fr;
    }
    
    /* Photography Gallery: 卡片尺寸再缩小10% */
    .photo-item.size-s {
        width: 108px;
        height: 144px;
    }
    
    .photo-item.size-m {
        width: 151px;
        height: 202px;
    }
    
    .photo-item.size-l {
        width: 194px;
        height: 259px;
    }
    
    /* Photography容器padding减小 */
    .photo-gallery-container {
        padding: 48px 16px;  /* 移动端 48px（阶梯规范 Mobile 48px） */
        margin: 0 -16px;
    }
    
    /* Modal标题字体进一步缩小 */
    .photo-title {
        font-size: var(--font-size-md);
    }
    
    /* Modal按钮调整 */
    .photo-modal .nav-btn {
        padding: var(--spacing-sm);
        font-size: 14px;
    }
    
    .photo-modal .photo-prev-btn {
        left: 10px;
    }
    
    .photo-modal .photo-next-btn {
        right: 10px;
    }
    
    /* 果冻般过渡动画 - 超小屏 */
    .work-item,
    .ai-lab-item,
    .project-card,
    .workflow-card,
    .strength-card,
    .btn-primary {
        transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }
}

/* 横屏平板 (高度较小) */
@media (max-height: 500px) and (orientation: landscape) {
    .photo-modal .modal-image {
        max-height: 60vh;
    }
    
    .photo-info {
        margin-top: var(--spacing-md);
    }
}/* ==================== 动画性能优化 ==================== */

/* 为动画元素添加will-change属性，提前通知浏览器优化 */
.reveal {
    will-change: opacity, transform;
}

.photo-item,
.ai-lab-item {
    will-change: transform, opacity;
}

.photo-item:hover,
.ai-lab-item:hover {
    will-change: transform, opacity, filter;
}

.modal-content,
.photo-modal-content {
    will-change: transform, opacity;
}

.photo-gallery-track {
    will-change: transform;
}

/* 优化动画元素，使用GPU加速 */
.modal.active .modal-content,
.modal.active .photo-modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.reveal.active {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 图片加载优化 */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* 优化滚动性能 */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

/* 减少重绘 */
.photo-item::after,
.ai-lab-item::before {
    will-change: opacity;
}/* ==================== 链接样式 ==================== */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease-out, text-decoration 0.2s ease-out;
    position: relative;
}

a:hover {
    color: #000000;  /* hover时更黑（设计规范：黑色系） */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:active {
    color: #0f3bb8;
}

/* 导航链接特殊样式 */
.nav-menu a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.nav-menu a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.nav-menu a.active {
    color: var(--color-accent);
}

/* 链接下划线渐入动画 */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.2s ease-out;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

/* ==================== 全局栅格系统 ==================== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* 12列栅格系统 */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter-desktop);
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* 响应式栅格 - Tablet */
@media (max-width: 767px) {
    .container {
        padding: 0 var(--gutter-tablet);
    }
    
    .grid {
        gap: var(--gutter-tablet);
    }
    
    .tablet-col-1 { grid-column: span 1; }
    .tablet-col-2 { grid-column: span 2; }
    .tablet-col-3 { grid-column: span 3; }
    .tablet-col-4 { grid-column: span 4; }
    .tablet-col-5 { grid-column: span 5; }
    .tablet-col-6 { grid-column: span 6; }
    .tablet-col-7 { grid-column: span 7; }
    .tablet-col-8 { grid-column: span 8; }
    .tablet-col-9 { grid-column: span 9; }
    .tablet-col-10 { grid-column: span 10; }
    .tablet-col-11 { grid-column: span 11; }
    .tablet-col-12 { grid-column: span 12; }
}

/* 响应式栅格 - Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--gutter-mobile);
    }
    
    .grid {
        gap: var(--gutter-mobile);
    }
    
    .mobile-col-1 { grid-column: span 1; }
    .mobile-col-2 { grid-column: span 2; }
    .mobile-col-3 { grid-column: span 3; }
    .mobile-col-4 { grid-column: span 4; }
    .mobile-col-5 { grid-column: span 5; }
    .mobile-col-6 { grid-column: span 6; }
    .mobile-col-7 { grid-column: span 7; }
    .mobile-col-8 { grid-column: span 8; }
    .mobile-col-9 { grid-column: span 9; }
    .mobile-col-10 { grid-column: span 10; }
    .mobile-col-11 { grid-column: span 11; }
    .mobile-col-12 { grid-column: span 12; }
}/* ==================== 卡片样式规范统一（设计规范 8.2） ==================== */
/* 统一卡片圆角 - 响应式圆角 */
/* 果冻般过渡动画 - cubic-bezier(0.2, 0.8, 0.2, 1) */
.ai-lab-item,
.work-item {
    border-radius: var(--card-radius);  /* 响应式圆角：PC 24px / Tablet 16px / Mobile 12px */
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 统一卡片Hover动画和阴影效果 */
/* 果冻般过渡动画 - cubic-bezier(0.2, 0.8, 0.2, 1) */
.work-item,
.photo-item,
.ai-lab-item {
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);  /* 默认微阴影（设计规范） */
}

.work-item:hover,
.photo-item:hover,
.ai-lab-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);  /* 阴影增强（设计规范） */
}

/* 卡片标题单行省略 */
.work-item h3,
.photo-item h3,
.photo-wall-item-title,
.ai-lab-item h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Photography卡片特殊样式（已有hover效果，保持不变） */
/* Work卡片hover效果（保持现有的translateY(-8px)） */
/* AI Lab卡片hover效果（保持现有的translateY(-4px) scale(1.02)） */
/* Insight卡片hover效果（保持现有的transform规则） */
/* ===== 导航栏样式优化 ===== */
.navbar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nav-menu a {
    color: var(--color-text-dark);
}

.nav-menu a:hover {
    color: var(--color-accent);
}

.nav-menu a.active {
    color: var(--color-accent);
}
/* 普通模块延迟: 50-100ms */
.reveal.delay-50 { transition-delay: 50ms; }
.reveal.delay-100 { transition-delay: 100ms; }

/* Photography/Insights模块特殊延迟: 150ms */
.reveal.delay-150 { transition-delay: 150ms; }

/* 为Photography和Insights模块添加更长的动画延迟 */
.photography .reveal {
    transition-delay: 150ms;
}

.insights .reveal {
    transition-delay: 150ms;
}/* ==================== Tooltip 样式 ==================== */
/* 基础Tooltip样式 */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

/* 卡片标题Tooltip */
.work-item h3,
.photo-item h3,
.ai-lab-item h3 {
    position: relative;
}

.work-item h3[title]:hover::after,
.photo-item h3[title]:hover::after,
.ai-lab-item h3[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    z-index: 1000;
}

}

/* ==================== 更新色彩系统为纯黑灰色调 ==================== */
:root {
    /* 移除Accent Color，改为黑灰色调 */
    --color-accent: #111111;  /* 改为与Primary Text相同 */
    --color-divider: #999;  /* 更新Divider颜色 */
}

/* 更新链接样式 - 使用黑色 */
a {
    color: #111111;  /* 黑色链接 */
}

a:hover {
    color: #000000;  /* hover时更黑 */
    text-decoration: underline;
}

/* 导航链接 */
.nav-menu a {
    color: #111111;
}

.nav-menu a:hover {
    color: #000000;
}

.nav-menu a.active {
    color: #000000;
}

/* 链接下划线 */
.nav-menu a::after {
    background-color: #000000;
}

/* Divider颜色更新 */
hr,
.border,
.border-bottom,
.border-top {
    border-color: #999 !important;
}/* Photography 磨玻璃信息层 */
.photo-item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%);
    padding: 20px;
    padding-bottom: 15px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-item:hover::before {
    opacity: 1;
    transform: translateY(0);
}
.photo-item-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    transform: translateY(6px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.photo-item:hover .photo-item-title {
    transform: translateY(0);
    opacity: 1;
}
.photo-item-location {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    margin-bottom: 2px;
    transform: translateY(6px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.photo-item:hover .photo-item-location {
    transform: translateY(0);
    opacity: 1;
}
.photo-item-info {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    transform: translateY(6px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.photo-item:hover .photo-item-info {
    transform: translateY(0);
    opacity: 1;
}

/* ==================== 响应式间距变量（基于设计规范第十七/十九/二十章节）
   阶梯规范：PC(120)-Tablet(80)-Mobile(48)
   禁止在移动端出现低于 48px 的结构间距（480px 以下特殊规则除外）
   =========================================================== */

/* 平板端（768px–1199px）—— 阶梯规范 Tablet 80px */
@media (max-width: 1199px) {
    :root {
        --section-padding: 80px;
        --section-padding-top: 80px;
        --section-padding-bottom: 80px;
        --section-gap: 64px;
        --hero-padding: 80px;
        --footer-padding: 80px;
        --heading-margin-bottom: 48px;  /* 平板端 H2 下方间距 */
        /* 平板端圆角阶梯：16px（768px-1199px）*/
        --card-radius: 16px;
        /* 平板端 L1 标题字号：28px */
        --font-size-xl: 1.75rem;
        --font-size-2xl: 1.75rem;
        --font-size-l1: 1.75rem;
        /* 平板端 L2 标题字号：18px */
        --font-size-lg: 1.125rem;
        --font-size-l2: 1.125rem;
    }

    /* 规范19：平板端 Section 上下 padding 80px */
    section {
        padding: var(--section-padding-top, 80px) 0 var(--section-padding-bottom, 80px);
    }

    section h2 {
        margin-bottom: var(--spacing-2);  /* 主副标题间距：8px（阶梯规范，所有设备固定不变） */
    }

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

    main {
        flex: 1;
    }
}

/* 移动端（≤767px）—— 阶梯规范 Mobile 48px */
/* 保底线：字号完全对齐 767px 的移动端标准，禁止进一步缩小 */
@media (max-width: 767px) {
    :root {
        --section-padding: 48px;
        --section-padding-top: 48px;
        --section-padding-bottom: 48px;
        --section-gap: 32px;  /* 移动端内容区间距：32px（阶梯规范 Mobile 32px） */
        --hero-padding: 60px;
        --footer-padding: 48px;
        --card-padding: 16px;
        --card-gap: 16px;
        --heading-margin-bottom: 32px;  /* 移动端 H2 下方间距：32px（阶梯规范） */
        /* 移动端圆角阶梯：12px（保底线） */
        --card-radius: 12px;
        /* 移动端字号：L1 24px */
        --font-size-xl: 1.5rem;  /* 24px */
        --font-size-2xl: 1.5rem; /* 24px */
        --font-size-l1: 1.5rem;  /* 24px */
        /* 移动端 L2 标题字号：17px */
        --font-size-lg: 1.0625rem;
        --font-size-l2: 1.0625rem;
        /* 移动端 L4 辅助文字：13px */
        --font-size-sm: 0.8125rem;
        /* 移动端 L3 正文：保持 16px 全端统一 */
        --font-size-base: 1rem;
    }

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

    main {
        flex: 1;
    }

    .photography .section-cta {
        padding-bottom: 0;
    }
}

/* 超小屏（≤480px）—— 继承移动端 48px，禁止低于此值 */
@media (max-width: 480px) {
    :root {
        /* 卡片内边距和间距微调为 12px（超小屏特殊规则） */
        --card-padding: 12px;
        --card-gap: 12px;
        /* 重要：section padding 保持 48px，不允许低于此值 */
        /* 所有结构间距（section/heading margin）禁止低于 48px */
    }

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

    main {
        flex: 1;
    }

    /* Video Modal 关闭按钮 - 小屏适配 */
    .video-modal > .modal-close {
        top: var(--spacing-xs);
        right: var(--spacing-xs);
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .photography .section-cta {
        padding-bottom: 0;
    }
}

/* ==================== 图片骨架屏加载状态 ==================== */

/* 基础骨架屏容器 */
.skeleton-container {
    position: relative;
    overflow: hidden;
    background: var(--color-gray-light);
    border-radius: var(--card-radius);
}

/* 骨架屏闪烁动画 */
.skeleton-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    animation: skeleton-shimmer 1.8s infinite;
    z-index: 1;
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 图片加载中状态 */
.skeleton-loading {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* 图片加载完成渐入动画 */
.image-loaded {
    animation: image-fade-in 0.5s ease-out forwards;
}

@keyframes image-fade-in {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 骨架屏渐变色变体 - Work卡片 */
.skeleton-gradient-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.skeleton-gradient-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.skeleton-gradient-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.skeleton-gradient-4 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* 骨架屏渐变色变体 - AI Lab卡片 */
.skeleton-gradient-ai-1 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.skeleton-gradient-ai-2 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.skeleton-gradient-ai-3 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

/* 骨架屏占位图标（SVG） */
.skeleton-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    opacity: 0.3;
    z-index: 2;
}

/* 骨架屏错误状态 */
.skeleton-error {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-light);
    color: var(--color-gray-dark);
    font-size: var(--font-size-sm);
}

/* Work卡片骨架屏 */
.work-placeholder {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.work-item:nth-child(2) .work-placeholder {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.work-item:nth-child(3) .work-placeholder {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.work-item:nth-child(4) .work-placeholder {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* AI Lab卡片骨架屏 */
.ai-lab-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ai-lab-item:nth-child(2) .ai-lab-placeholder {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.ai-lab-item:nth-child(3) .ai-lab-placeholder {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

/* Photography 画廊骨架屏 */
.photo-skeleton {
    background: var(--color-gallery);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== Tag 组件 — 液态玻璃效果 =====
   三种背景变体：深色 / 浅色 / 极光深色
   默认 80% 透明度 | 选中 100% 透明度
*/

/* === 基础结构（所有变体共用） === */
.tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);  /* 14px */
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 6px 16px;
    border-radius: 12px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* === 深色背景变体（#111111） === */
.tag[data-theme="dark"] {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
}
.tag[data-theme="dark"]:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
}
.tag[data-theme="dark"].active {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 2px 10px rgba(0, 0, 0, 0.2);
}

/* === 浅色背景变体（#ffffff） === */
.tag[data-theme="light"] {
    color: rgba(0, 0, 0, 0.65);
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.06);
}
.tag[data-theme="light"]:hover {
    color: rgba(0, 0, 0, 0.85);
    border-color: rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.1);
}
.tag[data-theme="light"].active {
    color: #111111;
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 10px rgba(0, 0, 0, 0.08);
}

/* === 极光深色背景变体 === */
.tag[data-theme="aurora"] {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}
.tag[data-theme="aurora"]:hover {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
}
.tag[data-theme="aurora"].active {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 12px rgba(0, 0, 0, 0.15);
}

/* === 标签组（可选） === */
.tag-group {
/* ============================================
   Dark Theme 全局底座（Phase 1）
   ============================================ */

body.dark-theme {
    background-color: #111111;
    color: #ffffff;
}

/* ============================================
   .navbar.dark 兜底样式（兼容旧 JS 机制）
   即使 JS 意外添加 .dark class，也保持一致外观
   ============================================ */
body.dark-theme .navbar.dark {
    background: rgba(17, 17, 17, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.dark-theme .navbar.dark .logo a,
body.dark-theme .navbar.dark .nav-menu a,
body.dark-theme .navbar.dark .lang-switch {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}
body.dark-theme .navbar.dark .hamburger span {
    background: #ffffff;
}
body.dark-theme .navbar.dark .nav-menu a::after {
    background-color: rgba(255, 255, 255, 0.7);
}
body.dark-theme .navbar.dark .nav-menu a:hover::after {
    width: 100%;
}

/* ==================== 导航栏智能主题切换 ==================== */

/* 导航栏平滑过渡 */
.navbar, .navbar a, .navbar .logo, .navbar .hamburger span, .navbar .lang-switch {
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 暗色磨砂玻璃模式 */
.navbar.glass-mode {
    background: rgba(17, 17, 17, 0.25) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

.navbar.glass-mode .logo,
.navbar.glass-mode .logo a,
.navbar.glass-mode .nav-menu a {
    color: #FFFFFF !important;
}

.navbar.glass-mode .nav-menu a::after {
    background-color: #FFFFFF !important;
}

.navbar.glass-mode .hamburger span {
    background: #FFFFFF !important;
}

.navbar.glass-mode .lang-switch {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar.glass-mode .lang-switch:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}