/* ========== 全局基础样式 ========== */

/* scroll-behavior: smooth：让所有锚点跳转（href="#xxx"）都平滑滚动，
   而不是瞬间跳过去。需要配合锚点链接使用。 */
html {
    scroll-behavior: smooth;
}

/* ========== 过渡开场区（Intro Scene）========== */
.intro-scene {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #0a0a0f;
    overflow: hidden;
}

/* 欢迎语：纯文字，无框无背景，位于雨幕后方 */
.intro-welcome {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    pointer-events: none;
}

.intro-welcome h2 {
    font-family: var(--font-pixel);
    color: rgba(229, 231, 235, 0.75);
    font-size: 1.1rem;
    margin: 0 0 14px 0;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(0, 229, 255, 0.5),
        0 0 20px rgba(0, 229, 255, 0.3),
        0 0 40px rgba(0, 229, 255, 0.15);
}

.intro-welcome p {
    font-family: var(--font-pixel);
    color: rgba(0, 229, 255, 0.5);
    font-size: 0.6rem;
    margin: 0;
    letter-spacing: 3px;
    text-shadow:
        0 0 6px rgba(0, 229, 255, 0.4),
        0 0 16px rgba(0, 229, 255, 0.2);
}

/* Canvas：位于最上层，让雨幕覆盖文字 */
#introCanvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

/* ========== 本地像素字体（零外部依赖）========== */

/* 英文/数字像素字体 Press Start 2P（本地文件，约 100KB）。
   font-display: swap —— 字体没下载完时，先用系统字体显示文字，
   下载完成后自动替换成像素字体，避免文字白屏等待。 */
@font-face {
    font-family: 'Press Start 2P';
    src: url('fonts/PressStart2P-Regular.woff2') format('woff2'),
         url('fonts/PressStart2P-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 中文像素字体 Zpix（本地文件，woff2 约 966KB；ttf 约 7MB）。
   src 按顺序尝试：浏览器先找 woff2（体积小），没有就用 ttf。
   size-adjust: 112% —— 让中文在视觉上比英文大一圈（16px 时约大 2px），
   因为像素中文字形天然显得比 Press Start 2P 小。 */
@font-face {
    font-family: 'Zpix';
    src: url('fonts/Zpix.woff2') format('woff2'),
         url('fonts/Zpix.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    size-adjust: 112%;
}

/* 像素字体栈（统一管理，方便复用）：
   英文/数字 → Press Start 2P；中文 → Zpix；都失败 → 系统无衬线 */
:root {
    --font-pixel: 'Press Start 2P', 'Zpix', sans-serif;
}

/* ========== 阅读进度条 ========== */

/* 固定在页面最顶部的极细发光线条 */
.scroll-progress {
    position: fixed;            /* 固定定位，不随滚动移动 */
    top: 0;
    left: 0;
    width: 0;                   /* 初始宽度为 0，由 JS 动态更新 */
    height: 3px;                /* 极细线条 */
    background-color: #00e5ff;  /* 霓虹青色 */
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);  /* 青色发光 */
    z-index: 9999;              /* 层级最高，压在导航栏之上 */
    pointer-events: none;       /* 不阻挡鼠标点击 */
    transition: width 0.1s linear;  /* 宽度变化平滑过渡 */
}

/* 深空灰背景；margin: 0 清除浏览器默认外边距，让内容能贴边显示 */
body {
    background-color: #0a0a0f;
    margin: 0;
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* h1：像素字体 + 霓虹青色 + 居中 + 同色发光 */
h1 {
    font-family: var(--font-pixel);
    color: #00e5ff;
    text-align: center;
    font-size: 24px;            /* 像素字体使用偶数字号 */
    line-height: 1.8;           /* 像素字体偏挤，加大行高 */
    letter-spacing: 1px;        /* 字间距，防止太挤 */
    text-shadow: 0 0 10px #00e5ff;
}

/* p：浅灰白 + 居中 */
p {
    color: #e5e7eb;
    text-align: center;
}

/* ========== 顶部导航栏 ========== */

/* 固定在页面最顶部：position: fixed 让元素脱离文档流，
   无论页面怎么滚动，它都钉在视口顶部不动；top: 0 贴顶，
   left/right: 0 让它横向占满整个宽度 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;            /* 层级最高，确保导航栏压在其他内容上方 */

    /* 玻璃拟态效果：半透明背景 + 毛玻璃模糊 */
    background-color: rgba(10, 10, 15, 0.6);   /* 与背景同色但半透明 */
    backdrop-filter: blur(12px);                /* 模糊导航栏背后的内容 */
    -webkit-backdrop-filter: blur(12px);        /* Safari 兼容写法 */

    border-bottom: 1px solid rgba(0, 229, 255, 0.15);  /* 底部一条淡淡的霓虹青分隔线 */

    display: flex;
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 导航链接组整体居中（Logo 绝对定位，不挤占中间位置） */
}

/* 网站 Logo：固定在导航栏左侧，像素字体 + 霓虹青发光 */
.nav-logo {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-pixel);
    font-size: 16px;            /* 偶数字号 */
    letter-spacing: 1px;
    color: #00e5ff;
    text-decoration: none;
    text-shadow: 0 0 10px #00e5ff;
}

/* 导航内部容器：display: flex 开启弹性布局，
   让子元素（三个链接）默认横向排列 */
.nav-inner {
    display: flex;
    justify-content: center;  /* 水平居中：让链接组在容器内左右居中 */
    gap: 40px;                /* 链接之间的间距 */
    padding: 16px 0;          /* 上下内边距，让导航栏有一定高度 */
}

/* 去掉链接默认下划线，并设置颜色和过渡动画 */
.nav-link {
    font-family: var(--font-pixel);  /* 像素字体：英文 PStart，中文 Zpix */
    color: #e5e7eb;                  /* 浅灰白 */
    text-decoration: none;           /* 去掉下划线 */
    font-size: 16px;                 /* 偶数字号 */
    letter-spacing: 1px;             /* 字间距，防止太挤 */
    transition: color 0.3s, text-shadow 0.3s;
}

/* 鼠标悬停时变为霓虹紫 + 微弱发光 */
.nav-link:hover {
    color: #a855f7;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.7);
}

/* ========== 主视觉区域 ========== */

/* hero 容器：position: relative 作为视频的定位参照，
   overflow: hidden 让视频超出部分被裁掉 */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;          /* 至少占满一屏高度 */
    display: flex;
    flex-direction: column;     /* 子元素纵向排列 */
    align-items: center;        /* 水平居中 */
    justify-content: center;    /* 垂直居中 */
    padding-top: 60px;          /* 给固定导航栏留出空间 */
}

/* 背景视频：绝对定位铺满整个 hero 区域，
   放在文字下方（z-index: 0） */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 保持视频比例铺满，裁切多余部分 */
    z-index: 0;                 /* 视频在最底层 */
}

/* 鼠标跟随光斑：柔和的青色径向渐变光晕 */
.hero-glow {
    position: fixed;            /* 固定定位，坐标基于视口 */
    left: 0;
    top: 0;
    width: 400px;               /* 光斑大小 */
    height: 400px;
    /* 圆心位置由 JS 通过 CSS 变量 --mx / --my 控制 */
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 229, 255, 0.15) 0%,     /* 中心较亮 */
        rgba(0, 229, 255, 0.05) 40%,    /* 中间过渡 */
        transparent 70%);               /* 边缘透明 */
    border-radius: 50%;         /* 圆形 */
    pointer-events: none;       /* 不阻挡鼠标点击 */
    z-index: 1;                 /* 在视频之上、文字之下 */
    opacity: 0;                 /* 默认隐藏，鼠标进入时显示 */
    transition: opacity 0.4s;   /* 淡入淡出 */
    transform: translate(-50%, -50%);  /* 让光斑中心对准鼠标点 */
}

/* 文字内容容器：磨砂玻璃质感的半透明面板 */
.hero-content {
    position: relative;         /* 让 z-index 生效，浮在视频上方 */
    z-index: 1;
    width: min(860px, 92%);     /* 档案卡片：宽屏最宽 860px，窄屏占 92% */
    padding: 40px 50px;         /* 内边距，让玻璃面板有呼吸感 */
    border-radius: 16px;        /* 圆角 */

    /* 磨砂玻璃核心三件套 */
    background-color: rgba(10, 10, 15, 0.35);   /* 半透明深色背景，与整体暗色主题一致 */
    backdrop-filter: blur(16px);                 /* 模糊背后的视频，产生毛玻璃效果 */
    -webkit-backdrop-filter: blur(16px);         /* Safari 兼容写法 */

    /* 玻璃边框 + 青色发光，增强悬浮质感 */
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 0 24px rgba(0, 229, 255, 0.15);   /* 外圈霓虹青光晕 */
}

/* ===== 个人档案区域 ===== */

/* 上半部分：左（资料）右（简介）两栏 */
.profile-top {
    display: flex;
    align-items: center;        /* 两栏垂直居中对齐 */
    gap: 48px;                  /* 左右两栏间距 */
}

/* 左栏：头像 + 名字 + 头衔，纵向排列 */
.profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;        /* 内部内容居中 */
    flex-shrink: 0;             /* 防止被简介挤压变窄 */
}

/* 圆形头像 + 青色发光边框 */
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;          /* 圆形 */
    object-fit: cover;           /* 图片按比例裁切填满，不变形 */
    border: 2px solid #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.6),
                0 0 28px rgba(0, 229, 255, 0.25);   /* 双层发光 */
    background-color: rgba(0, 229, 255, 0.05);       /* 图片未加载时的占位底色 */
    margin-bottom: 16px;
}

/* 名字：复用全局 h1 的像素字体 + 霓虹青发光，只微调间距 */
.profile-name {
    margin: 0 0 10px 0;
}

/* 院校信息：无衬线浅色小字，不带发光，视觉上弱于名字和头衔 */
.profile-school {
    font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    color: #9ca3af;
    letter-spacing: 1px;       /* 字间距稍微拉开 */
    margin: 6px 0;
    text-shadow: none;         /* 显式去除发光 */
}

/* 头衔容器：包裹中文 + 英文两行（外层 <p>） */
.profile-title {
    margin: 0;
    line-height: 1.5;       /* 像素字体需要稍大的行高，避免两行贴在一起 */
}

/* 两个 <span> 都变成块级元素 → 垂直堆叠 */
.title-cn,
.title-en {
    display: block;
    font-family: var(--font-pixel);   /* 中文自动走 Zpix，英文走 Press Start 2P */
}

/* 中文头衔：稍大、纯白、微弱发光 */
.title-cn {
    font-size: 18px;                 /* 偶数字号 */
    color: #ffffff;                  /* 纯白色 */
    letter-spacing: 1px;
    margin: 8px 0;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.45);   /* 白色微弱发光 */
}

/* 英文头衔：更小、浅灰白、加宽字距保持极客感 */
.title-en {
    font-size: 12px;                 /* Press Start 2P 字形本身偏大，12px 已清晰 */
    color: #9ca3af;                  /* 浅灰 */
    letter-spacing: 2px;             /* 加宽字距 */
    margin: 8px 0;
}

/* 右栏：个人简介文字 */
.profile-bio p {
    font-family: var(--font-pixel);   /* 像素字体：中文走 Zpix，英文/数字走 Press Start 2P */
    text-align: justify;              /* 两端对齐，长段落右侧边缘整齐（中文阅读体验更好） */
    text-justify: inter-ideograph;    /* 按表意字（汉字）间距做两端对齐 */
    color: rgba(229, 231, 235, 0.9);  /* 比之前略亮，暗色背景上更清晰 */
    font-size: 14px;                  /* 像素字体偏大，14px 相当于普通字体约 16px */
    line-height: 2.2;                 /* 像素笔画密集，2.2 倍行距保证不串行 */
    letter-spacing: 0.4px;            /* 轻微字距，缓解中文方块字的密集感 */
    text-indent: 2em;                 /* 首行缩进两个汉字，符合中文段落习惯 */
    margin: 0;
}

/* 底部：社交按钮行 */
.profile-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;             /* 手机上按钮多时自动换行 */
    gap: 14px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 229, 255, 0.15);   /* 与上方内容的分隔线 */
}

/* 单个社交按钮：深色半透明 + 青色边框 */
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;                    /* 图标与文字间距 */
    padding: 10px 20px;
    background-color: rgba(10, 10, 15, 0.6);   /* 深色半透明 */
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 8px;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
}

/* 内联 SVG 图标：尺寸统一 16px；
   fill 用的是 SVG 标签上的 fill="currentColor"（跟随按钮文字颜色），
   所以悬停时按钮文字变青色，图标自动跟着变色，无需额外规则 */
.social-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;    /* 防止图标被文字挤压变形 */
}

/* 悬停：青色发光 */
.social-btn:hover {
    background-color: rgba(0, 229, 255, 0.15);
    border-color: #00e5ff;
    color: #00e5ff;
    text-shadow: 0 0 8px #00e5ff;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
    transform: translateY(-2px);   /* 轻微上浮，反馈更明显 */
}

/* ========== 作品展示区域 ========== */

/* 作品区背景粒子 Canvas：铺满整个区块，位于内容下方 */
.works-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;              /* 在网格背景之上、内容之下 */
    pointer-events: none;    /* 不阻挡鼠标交互 */
    opacity: 0.55;           /* 整体克制一点，不抢内容 */
}

/* 大板块容器：占满一整屏，并与上下区域隔开 */
.works-section {
    /* min-height: 100vh 的意思：
       vh = viewport height（视口高度），100vh = 浏览器窗口的完整高度。
       这个板块无论内容多少，至少占满一整屏，让它视觉上成为一个独立的大区块。
       如果内容超过一屏，它会自动撑高，不会被裁切。 */
    min-height: 100vh;
    padding: 100px 20px;        /* 上下 100px 大间距，与 hero 和 about 拉开距离 */
    position: relative;         /* 作为 ::before 网格背景层的定位参照 */

    /* 微弱的径向渐变背景：中心稍亮、边缘渐暗，制造空间纵深感 */
    background:
        radial-gradient(ellipse at center, rgba(0, 229, 255, 0.04) 0%, rgba(10, 10, 15, 0) 70%),
        #0a0a0f;
}

/* 用伪元素画一个淡淡的网格背景（像游戏引擎的网格视图） */
.works-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* linear-gradient 画两条线（水平+垂直），background-size 控制格子大小 */
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;  /* 每个格子 40px × 40px */
    pointer-events: none;        /* 不阻挡鼠标点击 */
    z-index: 0;                  /* 在内容下方 */
}

/* 确保板块内所有内容位于网格背景之上（排除粒子 Canvas，它需保持 absolute + z-index:0） */
.works-section > *:not(.works-particles) {
    position: relative;
    z-index: 1;
}

/* 板块头部：标题 + 副标题 */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

/* 主标题：加大字号 + 青色发光 */
.section-title {
    color: #00e5ff;
    text-align: center;
    font-size: 40px;
    margin: 0 0 12px 0;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);  /* 青色光晕 */
}

/* 副标题：稍暗、居中 */
.section-subtitle {
    color: rgba(229, 231, 235, 0.6);
    text-align: center;
    font-size: 16px;
    margin: 0;
}

/* ========== 右侧悬浮分类导航（方案 B：斜切角 HUD）========== */

/* 悬浮容器：fixed 定位在屏幕右侧中部，紧贴滚动条。
   默认隐藏（透明 + 不可点击 + 向右偏移 30px），滚动到作品区时由 JS 加 .show 滑入。
   注意：transform 必须保留 translateY(-50%)，否则垂直居中会丢失！ */
.side-filters {
    position: fixed;
    right: 15px;                 /* 保留安全距离，防止贴边/被滚动条压住 */
    top: 50%;
    transform: translateY(-50%) translateX(30px);  /* 隐藏态：在居中基础上右移 30px */
    z-index: 90;                 /* 低于导航栏(100)和进度条(9999)，高于正文 */

    display: flex;
    flex-direction: column;      /* 按钮垂直排列 */
    gap: 8px;                    /* 按钮间距（6 个按钮时收紧，防止矮屏溢出底部） */

    opacity: 0;                  /* 默认全透明 */
    pointer-events: none;        /* 隐藏时不拦截鼠标点击 */
    transition: all 0.4s ease;   /* 滑入滑出过渡动画 */
}

/* JS 在作品区进入视口时加上 .show → 滑入显示 */
.side-filters.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

/* ===== 斜切角按钮：双层结构 ===== */

/* 外层 <a>：青色背景充当"边框"。
   clip-path 会把 border 一起裁掉，所以不用 border，
   而是让外层铺青色背景，内层四周留 1px 缝隙露出它 → 模拟出描边效果 */
.filter-tag {
    position: relative;
    display: block;
    width: 120px;                /* 按钮统一宽度 */
    height: 32px;                /* 6 按钮时收紧高度，保证笔记本竖屏完整显示 */
    background-color: rgba(0, 229, 255, 0.4);   /* "边框"颜色（半透明青） */
    /* 斜切角：右上角和左下角各切掉 12px（顶点写法见下方解释） */
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-pixel);   /* 像素字体，会继承给内层文字 */
    transition: background-color 0.3s;
}

/* 内层 <span>：深色主体。
   inset: 1px 让内层四周各缩进 1px，露出的外层青色就是 1px "边框" */
.tag-skin {
    position: absolute;
    inset: 1px;                  /* 上右下左各 1px（暴露外层背景形成描边） */
    display: flex;
    align-items: center;         /* 文字垂直居中 */
    justify-content: center;     /* 文字水平居中 */
    background-color: #0a0a0f;   /* 主体深空灰 */
    /* 与外层完全相同的 clip-path，切出同样的斜角 */
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    color: #e5e7eb;              /* 默认浅灰白文字 */
    font-size: 12px;             /* 偶数字号 */
    letter-spacing: 1px;
    text-align: center;
    padding-left: 10px;          /* 补偿左侧指示条造成的视觉偏移 */
    transition: background-color 0.3s, color 0.3s, text-shadow 0.3s;
}

/* 左侧青色发光竖线指示器：默认隐藏，悬停/激活时亮起 */
.tag-skin::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background-color: #00e5ff;
    box-shadow: 0 0 8px #00e5ff;   /* 青色发光 */
    opacity: 0;
    transition: opacity 0.3s;
}

/* 悬停 / Scroll Spy 激活态 */
/* 外层"边框"提亮 */
.filter-tag:hover,
.filter-tag.active {
    background-color: rgba(0, 229, 255, 0.9);
}

/* 内层主体：半透明青色背景 + 文字变霓虹青发光 */
.filter-tag:hover .tag-skin,
.filter-tag.active .tag-skin {
    background-color: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
    text-shadow: 0 0 8px #00e5ff;
}

/* 指示条亮起 */
.filter-tag:hover .tag-skin::before,
.filter-tag.active .tag-skin::before {
    opacity: 1;
}

/* ---- 防遮挡：给正文区域右侧让出空间（悬浮栏约 80px 宽 + 15px 边距） ---- */
.works-section {
    padding-right: 110px;        /* 原 20px + 90px 悬浮栏占位 */
}

.footer {
    padding-right: 110px;
}

/* 作品大区块：每个作品占据整行的纵向区块 */
.project-block {
    scroll-margin-top: 80px;     /* 锚点滚动时避开固定导航栏 */
    margin-bottom: 150px;        /* 区块之间足够的上下间距，页面有呼吸感 */
    text-align: center;          /* 内容居中 */
}

/* 最后一个区块不需要底部间距 */
.project-block:last-child {
    margin-bottom: 0;
}

/* 作品大图：居中、宽度适中、发光 + 圆角 */
.project-image {
    max-width: 800px;            /* 不撑满屏幕，限制最大宽度 */
    margin: 0 auto;              /* 水平居中 */
    aspect-ratio: 16 / 9;        /* 16:9 比例 */
    background-color: rgba(0, 229, 255, 0.06);
    background-image: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.02));
    border-radius: 12px;         /* 轻微圆角 */
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.15);  /* 微弱青色发光 */
    border: 1px solid rgba(0, 229, 255, 0.2);
}

/* 作品标题：醒目大号 + 青色发光 */
.project-title {
    color: #00e5ff;
    font-size: 32px;
    margin: 40px 0 24px 0;       /* 与图片拉开距离，与段落留出间距 */
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);  /* 青色光晕 */
    text-align: center;
}

/* 详细介绍文字容器：限制最大宽度，居中，阅读舒适 */
.project-desc {
    max-width: 700px;            /* 限制文字最大宽度，避免一行太长 */
    margin: 0 auto;              /* 水平居中 */
}

/* 详细介绍段落：左对齐、行高加大、段间距 */
.project-desc p {
    color: #e5e7eb;
    text-align: left;            /* 长段落左对齐更易读 */
    line-height: 1.8;            /* 行高加大，阅读更舒适 */
    font-size: 16px;
    margin: 0 0 16px 0;          /* 段与段之间的间距 */
}

/* 最后一个段落去掉底部间距 */
.project-desc p:last-child {
    margin-bottom: 0;
}

/* 技术标签容器 */
.project-tags {
    display: flex;
    flex-wrap: wrap;             /* 标签多时自动换行 */
    justify-content: center;     /* 居中排列 */
    gap: 10px;
    margin-top: 32px;            /* 与文字区域拉开距离 */
}

/* 作品卡片网格容器 */
.works-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) 的意思：
       - repeat(次数, 列宽)：重复创建列
       - auto-fill：自动计算能放多少列（根据容器宽度），有几列放几列
       - minmax(400px, 1fr)：每列最小 400px，最大等分剩余空间（1fr = 一份）
       组合起来：每行尽量多放卡片，每张卡片至少 400px 宽，
       屏幕变窄时自动换行，无需手写媒体查询。 */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 40px;                  /* 卡片之间的间距（加大，更透气） */
    max-width: 1400px;          /* 限制最大宽度（加宽，容纳更多列） */
    margin: 0 auto;             /* 水平居中 */
}

/* 单个作品卡片：玻璃拟态质感 */
.work-card {
    display: flex;
    flex-direction: column;     /* 图片在上，信息在下 */
    background-color: rgba(10, 10, 15, 0.5);   /* 半透明深色 */
    backdrop-filter: blur(10px);                 /* 毛玻璃模糊 */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 229, 255, 0.2);   /* 微弱青色边框 */
    border-radius: 12px;
    overflow: hidden;           /* 圆角裁切图片 */
    transition: transform 0.3s, box-shadow 0.3s;  /* 悬停动画 */
}

/* 卡片悬停：上浮 + 青色光晕 */
.work-card:hover {
    transform: translateY(-8px);  /* 向上浮动 8px */
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.4);  /* 青色发光 */
    border-color: rgba(0, 229, 255, 0.6);          /* 边框变亮 */
}

/* 隐藏类：筛选时不匹配的卡片会被加上这个类，从而隐藏 */
.work-card.hidden {
    display: none;
}

/* 卡片上方：图片占位区 */
.work-image {
    aspect-ratio: 16 / 9;       /* 16:9 截图比例 */
    background-color: rgba(0, 229, 255, 0.06);
    background-image: linear-gradient(135deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02));
}

/* 卡片下方：信息区域 */
.work-info {
    padding: 20px;              /* 足够的内边距 */
    display: flex;
    flex-direction: column;
    gap: 12px;                  /* 标题、描述、标签之间的间距 */
}

/* 作品标题 */
.work-title {
    color: #e5e7eb;
    font-size: 18px;
    margin: 0;
}

/* 作品描述 */
.work-desc {
    color: rgba(229, 231, 235, 0.65);
    font-size: 14px;
    text-align: left;           /* 描述文字左对齐，阅读更自然 */
    margin: 0;
    line-height: 1.6;
}

/* 技术栈标签容器 */
.work-tags {
    display: flex;
    flex-wrap: wrap;            /* 标签多时自动换行 */
    gap: 8px;
}

/* 单个技术栈标签 */
.tech-tag {
    padding: 4px 12px;
    background-color: rgba(0, 229, 255, 0.1);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 12px;
    font-size: 12px;
}

/* ========== 关于我区域 ========== */

.about {
    padding: 60px 20px;         /* 与作品区一致的上下内边距 */
    max-width: 1000px;          /* 放宽容器，容纳三张并排爱好卡片 */
    margin: 0 auto;             /* 水平居中 */
    display: flex;              /* 让内部子元素可以居中排列 */
    flex-direction: column;     /* 纵向排列：标题 → 段落 → 卡片 → 链接 */
    align-items: center;        /* 水平居中所有子元素 */
    gap: 24px;                  /* 子元素之间的间距 */
}

/* 生活爱好段落：限宽保证阅读舒适，浅灰白 + 大行距 + 居中 */
.about-life-text {
    max-width: 720px;
    color: rgba(229, 231, 235, 0.85);
    font-size: 16px;
    line-height: 2;
    text-align: center;
    margin: 0;
}

/* 三个爱好卡片：Grid 等宽三列 */
.hobby-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    margin-top: 16px;
}

/* 单个爱好卡片：深空灰玻璃拟态 + 青色细边框 */
.hobby-card {
    background-color: rgba(10, 10, 15, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 悬停：轻微上浮 + 青色发光 */
.hobby-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 8px 28px rgba(0, 229, 255, 0.18);
}

/* Emoji 图标 */
.hobby-icon {
    display: block;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 16px;
}

/* 爱好名称：青色小标题 */
.hobby-name {
    color: #00e5ff;
    font-size: 18px;
    margin: 0 0 12px;
}

/* 爱好描述：浅灰白小字（覆盖全局 p 的字号/颜色微调） */
.hobby-desc {
    color: rgba(229, 231, 235, 0.7);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* 简历按钮与卡片拉开距离 */
.about .resume-link {
    margin-top: 20px;
}

/* 简历下载链接：做成霓虹青按钮样式 */
.resume-link {
    display: inline-block;      /* 让链接可以设置 padding 和 border-radius */
    padding: 12px 32px;         /* 按钮内边距 */
    color: #00e5ff;             /* 霓虹青文字 */
    text-decoration: none;      /* 去掉下划线 */
    border: 1px solid #00e5ff;  /* 霓虹青边框 */
    border-radius: 8px;         /* 圆角 */
    transition: all 0.3s;       /* 所有属性变化都有 0.3 秒过渡 */
    font-size: 16px;
}

/* 鼠标悬停时：背景填充霓虹青 + 文字变黑 + 发光阴影 */
.resume-link:hover {
    background-color: #00e5ff;
    color: #0a0a0f;             /* 文字变为深空灰，在亮色背景上清晰可读 */
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.6);  /* 霓虹发光效果 */
}

/* ========== 页脚 ========== */

.footer {
    text-align: center;         /* 文字水平居中 */
    padding: 40px 20px;         /* 上下左右内边距，与上方内容拉开距离 */
    border-top: 1px solid rgba(0, 229, 255, 0.15);  /* 顶部分隔线 */
    margin-top: 60px;           /* 与作品区之间的额外间距 */
}

.footer p {
    margin: 0;                  /* 清除段落默认外边距 */
    font-size: 14px;
    color: rgba(229, 231, 235, 0.6);  /* 稍暗的浅灰白，弱化版权文字 */
}

/* ========== AI 作品案例区块 ========== */

/* 容器：多个项目纵向排列 */
.ai-case {
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- 首页个人简历卡片：入场动画（与 .project-item 同套逻辑） ---------- */
.hero-content {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================================
   作品项目卡：极简全息光影风
   朴素圆角矩形 + 1px 暗霓虹青细边 + 多层阴影全息呼吸感
   悬停：上浮 + 边框亮 + 外发光 + 全息扫描线
   ===================================================================== */
.project-item {
    position: relative;
    margin-bottom: 100px;
    padding: 40px;
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 12px;
    background-color: rgba(10, 10, 15, 0.8);
    background-image: linear-gradient(135deg, rgba(0, 229, 255, 0.05) 0%, transparent 50%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.05);
    overflow: hidden;
    /* 入场动画初始状态：向下偏移并隐藏 */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.3s ease, box-shadow 0.3s ease;
}
.project-item:last-child {
    margin-bottom: 0;
}

/* 内层容器：透明，仅承载内容 */
.armor-inner {
    position: relative;
    z-index: 1;
}

/* 悬停：上浮 + 边框亮 + 外发光增强 */
.project-item:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 229, 255, 0.2), inset 0 0 20px rgba(0, 229, 255, 0.08);
}

/* 全息扫描线：悬停时一条极淡青色竖线从左到右滑过 */
.project-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 229, 255, 0.06) 50%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    background-position: -40% 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
.project-item:hover::after {
    opacity: 1;
    animation: holo-scan 1.8s ease-in-out infinite;
}

@keyframes holo-scan {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* ---- 入场组装动画：初始隐藏 → .is-visible 触发后归位 ---- */

/* 触发可见状态：卡片归位 + 短路闪烁 */
.project-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: short-circuit-flicker 0.4s ease-out 0.8s 1;
}
/* 确保 is-visible 后 :hover 仍能上浮（同权重，源顺序靠后生效） */
.project-item.is-visible:hover {
    transform: translateY(-5px);
}

/* 左侧文字模块：从左滑入（延迟 0.15s） */
.project-item .ai-card-with-shots .ai-card {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s,
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
}
.project-item.is-visible .ai-card-with-shots .ai-card {
    opacity: 1;
    transform: translateX(0);
}

/* 右侧图片模块：从右滑入（延迟 0.25s） */
.project-item .ai-card-with-shots .ai-shot-col {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s,
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s;
}
.project-item.is-visible .ai-card-with-shots .ai-shot-col {
    opacity: 1;
    transform: translateX(0);
}

/* AI 区块网格卡片：简单上浮（延迟 0.2s） */
.project-item .ai-grid .ai-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}
.project-item.is-visible .ai-grid .ai-card {
    opacity: 1;
    transform: translateY(0);
}

@keyframes short-circuit-flicker {
    0%   { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.05); }
    15%  { border-color: rgba(0, 229, 255, 0.9); box-shadow: 0 0 25px rgba(0, 229, 255, 0.4), inset 0 0 30px rgba(0, 229, 255, 0.15); }
    30%  { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.05); }
    50%  { border-color: rgba(0, 229, 255, 0.85); box-shadow: 0 0 20px rgba(0, 229, 255, 0.35), inset 0 0 25px rgba(0, 229, 255, 0.12); }
    70%  { border-color: rgba(0, 229, 255, 0.25); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.05); }
    85%  { border-color: rgba(0, 229, 255, 0.7); box-shadow: 0 0 15px rgba(0, 229, 255, 0.2), inset 0 0 20px rgba(0, 229, 255, 0.1); }
    100% { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.05); }
}

/* ---- 像素迸溅火花粒子 ---- */
.spark-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00e5ff;
    pointer-events: none;
    z-index: 100;
    animation: spark-fly 0.5s var(--spark-delay, 0s) ease-out forwards;
}

@keyframes spark-fly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.2);
        opacity: 0;
    }
}

/* ---- 移动端性能降级：关闭闪烁 + 禁用火花 ---- */
@media (max-width: 768px) {
    .project-item.is-visible {
        animation: none;
    }
    .spark-particle {
        display: none;
    }
}


/* 项目头部：时间标签紧挨标题上方，整体居中 */
.project-item-head {
    text-align: center;
    margin-bottom: 40px;
}

/* 时间标签：浅灰白小字 */
.project-date {
    display: inline-block;
    color: #9ca3af;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

/* 大标题：像素风 + 霓虹青发光 + 居中 */
.ai-main-title {
    font-family: var(--font-pixel);       /* 中文走 Zpix，英文走 Press Start 2P */
    color: #00e5ff;
    text-align: center;
    font-size: 24px;                      /* 像素字体本身偏大 */
    line-height: 1.8;
    letter-spacing: 1px;
    text-shadow: 0 0 10px #00e5ff, 0 0 24px rgba(0, 229, 255, 0.4);
    margin: 0;
}

/* 四卡片网格：桌面两列 */
.ai-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* 单个卡片：深色半透明 + 青色细边框 + 微玻璃感 */
.ai-card {
    background-color: rgba(10, 10, 15, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 12px;
    padding: 28px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
}

/* 卡片小标题：青色无衬线（与像素大标题区分层次） */
.ai-card-title {
    color: #00e5ff;
    font-size: 18px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);  /* 标题下分隔线 */
}

/* 卡片正文：浅灰白、左对齐（覆盖全局 p 的居中）、舒适行距 */
.ai-card p {
    color: rgba(229, 231, 235, 0.85);
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
    margin: 0 0 14px;
}
.ai-card p:last-child {
    margin-bottom: 0;
}
.ai-card strong {
    color: #00e5ff;                        /* 重点词用青色强调 */
    font-weight: 600;
}

/* 三位一体分工列表 */
.ai-role-list {
    list-style: none;                     /* 去掉默认圆点 */
    padding: 0;
    margin: 0 0 14px;
}
.ai-role-list li {
    position: relative;
    color: rgba(229, 231, 235, 0.85);
    font-size: 15px;
    line-height: 1.9;
    padding-left: 18px;
    margin-bottom: 8px;
}
/* 自定义青色小方块列表符（比圆点更有科技感） */
.ai-role-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 6px;
    height: 6px;
    background-color: #00e5ff;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.8);
}

/* 技术攻坚整行容器：卡片 + 右侧截图横向排列 */
.ai-card-with-shots {
    grid-column: 1 / -1;                  /* 横跨网格全部列 */
    display: flex;
    gap: 24px;
    align-items: stretch;                 /* 卡片与截图列等高 */
}
.ai-card-with-shots .ai-card {
    flex: 1.3;                            /* 文字占更宽比例 */
}

/* 右侧两张截图：纵向排列 */
.ai-shot-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 通用截图样式：青色发光边框 + 悬停放大 */
.ai-shot {
    width: 100%;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.18);
    object-fit: cover;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: zoom-in;
}
.ai-shot:hover {
    transform: scale(1.03);               /* 悬停轻微放大 */
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.45);
}

/* 项目概述卡片内的大图：与卡片文字拉开距离 */
.ai-shot-wide {
    margin-top: 20px;
}

/* 底部大按钮区域 */
.ai-cta {
    text-align: center;
    margin-top: 48px;
}

/* 底部"访问线上项目"文字链接 */
.ai-project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00e5ff;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.4);  /* 下划线替代按钮边框 */
    transition: color 0.3s, text-shadow 0.3s, border-color 0.3s;
}
.ai-project-link:hover {
    color: #5df0ff;                                       /* 悬停青色变亮 */
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.9);         /* 青色发光 */
    border-bottom-color: #5df0ff;
}
/* 箭头：悬停时向右滑动，暗示跳转 */
.ai-project-link .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}
.ai-project-link:hover .arrow {
    transform: translateX(6px);
}

/* ========== 建模项目：底部浅灰白小字提示（替代按钮链接） ========== */
/* 居中、柔和灰白、小字号，作为“后续待补充”的低调说明，不与正文争视觉 */
.modeling-note {
    text-align: center;
    margin-top: 48px;               /* 与 .ai-cta 顶部留白一致，保持区块节奏统一 */
    color: rgba(229, 231, 235, 0.6);/* 浅灰白，介于 figcaption 与正文之间 */
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* ========== Shader 进阶作品：风格化玻璃与魔法水晶 ========== */

/* 中文大标题下方的英文小字 */
.project-title-en {
    font-family: var(--font-pixel);       /* 纯英文，Press Start 2P */
    color: #9ca3af;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;
    margin: 10px 0 0;
}

/* 同一子卡片内三个小标题之间的分隔（第一个标题紧贴卡片顶部，无需额外间距） */
.shader-text-card .ai-card-title:not(:first-child) {
    margin-top: 26px;
}

/* 文字卡片底部的技术标签：左对齐排列（覆盖 .project-tags 默认的居中） */
.shader-tags {
    justify-content: flex-start;
    margin-top: 22px;
}

/* 右侧截图列内部：2x2 网格与下方大图的间距 */
.ai-shot-col .shot-grid-2x2 {
    margin-bottom: 0;
}

/* 2x2 图片网格 */
.shot-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* figure 去掉浏览器默认外边距 */
.shot-figure {
    margin: 0;
}

/* 图片说明文字（节点 / 效果标注） */
.shot-figure figcaption {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 8px;
}

/* 底部性能统计的说明小字 */
.shot-caption {
    color: rgba(229, 231, 235, 0.75);
    font-size: 13px;
}

/* ========== 工具管线项目：全宽文字卡 + V1/V2 逻辑对比 + 成果展示网格 ========== */

/* 全宽文字卡片：卡片铺满整个 project-item，
   但正文内容限宽居中（卡片本身是 flex column，用 align-items 实现水平居中），
   避免 1200px 宽卡片里一行文字拉太长难以阅读 */
.tool-text-card {
    align-items: center;
    margin-bottom: 30px;    /* 与下方图片区拉开 30px，避免贴在一起 */
}
.tool-text-card > * {
    width: 100%;
    max-width: 820px;
}

/* 三个小标题之间拉开间距（第一个标题紧贴卡片顶部，无需额外间距） */
.tool-text-card .ai-card-title:not(:first-child) {
    margin-top: 26px;
}

/* 图片区：限宽 1000px 并水平居中——在 1920px 宽屏上不铺满整屏，
   保持在舒适阅读范围内；内部两组网格上下留 24px */
.tool-shots-full {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 发光升级小标签：居中悬浮在两张对比图上方，
   霓虹青描边 + 半透明底 + 内外双层发光，像素感 HUD 风格 */
.tool-upgrade-label {
    display: block;
    width: fit-content;
    margin: 0 auto 14px;        /* 水平居中，与下方网格留 14px */
    padding: 6px 16px;
    font-size: 13px;
    letter-spacing: 1px;
    color: #00e5ff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    border: 1px solid rgba(0, 229, 255, 0.5);
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.45),
                inset 0 0 8px rgba(0, 229, 255, 0.15);
}

/* V1 / V2 蓝图逻辑图：固定 2 列并排，容器限宽 1000px 后
   每张约 480px 宽，蓝图节点默认状态下即可看清 */
.tool-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* 成果展示：UI / 运行窗口 / 输出结果。
   auto-fit + minmax(280px, 1fr)：宽屏三张并排（各约 320px），
   屏幕不够宽时自动降为 2 列 / 1 列，不会挤在一行 */
.tool-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* 工具管线图片：始终保持原始长宽比，不拉伸不裁切变形 */
.tool-shots-full .ai-shot {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ========== 各分类领域章节标题 ========== */

/* 标题容器：上方留白 60px，与下方项目内容拉开 40px */
.section-head {
    text-align: center;
    padding-top: 60px;
    margin-bottom: 40px;
}

/* 领域大标题：像素风 + 霓虹青发光 */
.section-heading {
    font-family: var(--font-pixel);       /* 中文走 Zpix，英文走 Press Start 2P */
    color: #00e5ff;
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1.6;
    text-shadow: 0 0 12px #00e5ff;
    margin: 0 0 16px;
}

/* 副标题：无衬线浅灰白小字 */
.section-head .section-subtitle {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* 项目内所有截图：提示可点击放大（.ai-shot 已设置，这里覆盖项目内其他图片） */
.project-item img {
    cursor: zoom-in;
}

/* ========== 图片灯箱（Lightbox） ========== */

/* 全屏遮罩：默认隐藏（透明 + 不接收点击） */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;                        /* Flexbox 让图片完美居中 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

/* 显示状态 */
.lightbox.show {
    opacity: 1;
    pointer-events: auto;
}

/* 放大图：青色发光边框 */
.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border: 1px solid #00e5ff;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
    border-radius: 8px;
    object-fit: contain;
    cursor: default;                      /* 放大后恢复默认指针 */
}

/* 关闭按钮：右上角霓虹青 × */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 32px;
    font-size: 40px;
    line-height: 1;
    color: #00e5ff;
    cursor: pointer;
    user-select: none;                    /* 防止连点时选中 × 文字 */
    transition: color 0.3s, text-shadow 0.3s;
}
.lightbox-close:hover {
    color: #5df0ff;
    text-shadow: 0 0 10px #00e5ff, 0 0 20px rgba(0, 229, 255, 0.6);
}

/* ========== 汉堡菜单按钮（默认隐藏，仅移动端显示） ========== */

.hamburger {
    display: none;              /* 桌面端隐藏 */
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* 汉堡按钮的三条线 */
.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #00e5ff;  /* 霓虹青色 */
    border-radius: 2px;
    transition: all 0.3s;       /* 点击变形动画 */
}

/* 激活态：三条线变成 X */
.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;                 /* 中间线消失 */
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ========== 移动端响应式（屏幕宽度 < 768px） ========== */

@media (max-width: 768px) {

    /* --- 导航栏：隐藏链接，显示汉堡菜单 --- */
    .hamburger {
        display: flex;          /* 显示汉堡按钮 */
        margin-right: 20px;
        align-self: center;
    }

    .navbar {
        display: flex;
        justify-content: flex-end;  /* 汉堡按钮靠右 */
    }

    .nav-inner {
        display: none;          /* 隐藏导航链接 */
        position: absolute;
        top: 100%;              /* 贴在导航栏下方 */
        left: 0;
        right: 0;
        flex-direction: column; /* 链接纵向排列 */
        background-color: rgba(10, 10, 15, 0.95);  /* 深色背景 */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 20px 0;
        border-bottom: 1px solid rgba(0, 229, 255, 0.2);
    }

    /* 菜单展开时显示 */
    .nav-inner.open {
        display: flex;
    }

    .nav-inner .nav-link {
        padding: 12px 20px;
        font-size: 16px;        /* 像素字体偏大，下拉菜单里用 16px */
    }

    /* --- Logo 缩小 --- */
    .nav-logo {
        font-size: 12px;
        left: 16px;
    }

    /* --- 主视觉区：缩小标题字号（Press Start 2P 本身偏大，手机端要更小） --- */
    h1 {
        font-size: 18px;
        line-height: 2;
    }

    /* 头衔两行同步缩小：英文较长，手机端降到 10px 防止溢出卡片 */
    .title-cn {
        font-size: 16px;
    }

    .title-en {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .hero-content {
        padding: 28px 20px;     /* 缩小内边距 */
    }

    /* --- 个人档案卡片：手机上改为垂直排列、全部居中 --- */
    .profile-top {
        flex-direction: column; /* 资料/简介从左右变上下 */
        gap: 24px;
        text-align: center;
    }

    .profile-bio p {
        text-align: justify;     /* 手机上保持两端对齐，避免居中长文参差不齐 */
        text-indent: 2em;        /* 保留首行缩进 */
    }

    .profile-social {
        gap: 10px;
    }

    .social-btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* --- 作品区标题缩小 --- */
    .section-title {
        font-size: 28px;        /* 从 40px 缩小 */
    }

    /* --- 作品区块：图片和文字单列 --- */
    .project-image {
        max-width: 100%;        /* 图片占满容器宽度 */
        border-radius: 8px;     /* 圆角稍小 */
    }

    .project-title {
        font-size: 24px;        /* 从 32px 缩小 */
    }

    .project-desc {
        max-width: 100%;        /* 文字占满宽度 */
        padding: 0 16px;        /* 左右留一点边距 */
    }

    .project-desc p {
        font-size: 15px;        /* 段落字号稍小 */
    }

    /* --- 右侧悬浮分类栏：手机屏幕窄，隐藏防止挡视线 --- */
    .side-filters {
        display: none;
    }

    /* 悬浮栏隐藏后，正文恢复原有内边距 */
    .works-section,
    .footer {
        padding-right: 20px;
    }

    /* --- 关于我区域 --- */
    .about {
        padding: 40px 16px;
    }

    /* --- 作品区块间距缩小 --- */
    .project-block {
        margin-bottom: 80px;    /* 从 150px 缩小 */
    }

    /* --- AI 案例区块：网格单列、图文堆叠 --- */
    .ai-main-title {
        font-size: 18px;        /* 像素大标题手机端缩小 */
    }

    /* --- 分类领域章节标题缩小，副标题自然换行 --- */
    .section-head {
        padding-top: 40px;
        margin-bottom: 28px;
        padding-left: 8px;
        padding-right: 8px;     /* 左右留边，换行后文字不贴屏幕边缘 */
    }

    .section-heading {
        font-size: 20px;
    }

    .section-head .section-subtitle {
        font-size: 14px;
        line-height: 1.8;       /* 多行换行时行距拉开 */
    }

    /* 灯箱关闭按钮在手机上稍小并贴近边缘 */
    .lightbox-close {
        top: 14px;
        right: 18px;
        font-size: 32px;
    }

    /* 2x2 节点图网格在手机上改单列，保证节点文字可辨认（点击可放大） */
    .shot-grid-2x2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 工具管线：V1/V2 对比图桌面端固定 2 列，
       手机上容器太窄，改单列保证蓝图节点可辨认（可点击放大） */
    .tool-compare-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-title-en {
        font-size: 10px;
        letter-spacing: 1px;
    }

    /* --- 关于我：三张爱好卡片手机端单列纵向排列 --- */
    .hobby-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-life-text {
        font-size: 15px;
        line-height: 1.9;
    }

    .project-item-head {
        margin-bottom: 28px;
    }

    .project-item {
        padding: 22px 16px;     /* 玻璃大卡片手机端收紧内边距 */
        margin-bottom: 60px;    /* 项目间距相应缩小 */
    }

    .ai-grid {
        grid-template-columns: 1fr;   /* 两列变单列 */
        gap: 20px;
    }

    .ai-card {
        padding: 22px 18px;
    }

    /* 技术攻坚的图文并排改为上下堆叠 */
    .ai-card-with-shots {
        flex-direction: column;
    }

    /* 截图从卡片旁边移到卡片下方 */
    .ai-shot-col {
        flex-direction: column;
        gap: 20px;
    }

    .ai-project-link {
        font-size: 14px;
    }
}