/* =========================================
   1. 全局设置与 CSS 变量
   ========================================= */
:root {
    /* 颜色系统控制在4个核心色以内 */
    --bg-color: #131722;          /* 深蓝灰背景，不使用纯黑 */
    --text-main: #f8fafc;         /* 主文字颜色，接近纯白 */
    --text-muted: #94a3b8;        /* 次级信息，灰蓝色 */
    --accent-blue: #3b82f6;       /* 亮蓝色强调色 */
    --accent-hover: #60a5fa;      /* 按钮和链接 hover 时的浅蓝色 */
    
    /* 布局与动画 */
    --max-width: 1200px;          /* 版心最大宽度 */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑顺畅的过渡动画 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* 让字体在暗色背景下显得更平滑纤细 */
}

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

ul {
    list-style: none;
}

/* =========================================
   2. 导航栏 (顶部固定，左右布局)
   ========================================= */
.navbar {
    /* —— 吸顶三件套 —— */
    position: sticky;                 /* 滚到顶就吸住，不滚时待在原位 */
    top: 0;                           /* 吸在视口最顶端 */
    z-index: 1000;                    /* 层级拉高，保证它永远压在所有内容上面 */

    /* —— 版心居中（沿用你原来的，没变）—— */
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 22px 40px;               /* 吸顶后稍微收一点上下边距，从30→22，悬顶时更利落不臃肿 */

    /* —— 用伪元素铺一层"全宽毛玻璃底"，解决透明透字的问题，且不动 HTML —— */
    position: sticky;                 /* （重复声明无妨，留作提醒：吸顶靠它）*/
}

/* 这一层是"垫在导航下面的全宽背景条"，跟着导航一起吸顶 */
.navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);      /* 配合下面的 width:100vw，让背景条相对视口水平铺满 */
    width: 100vw;                     /* 关键：背景条要铺满整个屏幕宽，而不是只铺版心那么宽 */
    height: 100%;
    z-index: -1;                      /* 垫在导航文字的下面 */

    /* 毛玻璃 + 半透明深蓝灰，和你 body 的 --bg-color 同色系，滚下去时内容在它下面"虚化"掠过 */
    background: rgba(19, 23, 34, 0.72);          /* 19,23,34 就是你 --bg-color 的 RGB，加 0.72 透明度 */
    backdrop-filter: blur(12px);                 /* 毛玻璃：下面的内容透过它变模糊，高级感来源 */
    -webkit-backdrop-filter: blur(12px);         /* 兼容 Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);  /* 底边一道极淡的线，分清导航和内容 */

    /* 进场过渡：让吸顶"出现"得有质感，而不是硬切 */
    transition: var(--transition-base);
}

.nav-logo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted); /* Logo弱化，保持克制 */
    letter-spacing: 1px;
}

.nav-menu ul {
    display: flex;
    gap: 32px; /* 菜单项之间的自然间距 */
}

.nav-menu a {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* 导航 hover 与当前选中状态 */
.nav-menu a:hover,
.nav-menu a.active {
    color: var(--accent-blue);
}

/* =========================================
   3. 首屏布局 (Hero Section)
   ========================================= */
.hero-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 80px 40px 120px; /* 上下留白充足 */
    min-height: calc(100vh - 100px); /* 让首屏占满视口高度剩余部分 */
}

/* 左侧内容区宽度略大，重心偏左 */
.hero-content {
    flex: 1.1;
    padding-right: 60px;
}

/* 右侧头像区 */
.hero-image {
    flex: 0.9;
    display: flex;
    justify-content: flex-end;
}

/* =========================================
   4. 主标题与副标题 (排版层级)
   ========================================= */
.main-title {
    font-size: 64px; /* 明确偏大的字号，第一视觉焦点 */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px; /* 紧凑字距显得更现代 */
}

.main-title .text-normal {
    color: var(--text-main);
}

.main-title .text-blue {
    color: var(--accent-blue);
}

.sub-title {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 400;
    margin-bottom: 32px;
    letter-spacing: 1px;
}

/* 笔刷装饰占位：你可以后续在这里通过 background-image 加上那张笔刷图 */
.brush-pattern {
    width: 100%;
    height: 80px;
    margin-bottom: 40px;
    opacity: 0.8;
}

/* =========================================
   5. 按钮样式 (Button Group)
   ========================================= */
.button-group {
    display: flex;
    gap: 20px;
}

button {
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 32px;
    border-radius: 8px; /* 适中的现代圆角 */
    transition: var(--transition-base);
}

/* 主按钮：实心强调色 */
.btn-primary {
    background-color: var(--accent-blue);
    color: #ffffff;
    border: 2px solid var(--accent-blue);
}

/* 次按钮：透明背景 + 描边 */
.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    border: 2px solid rgba(255, 255, 255, 0.2); /* 柔和的边框 */
}

/* =========================================
   6. hover 与过渡效果
   ========================================= */
.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px); /* 轻微上浮 */
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25); /* 增加细腻阴影 */
}

.btn-secondary:hover {
    border-color: var(--text-main);
    transform: translateY(-2px);
}

/* =========================================
   7. 头像区域 (Avatar)
   ========================================= */
.avatar-circle-box {
    width: 420px; /* 大尺寸头像，第二视觉中心 */
    height: 420px;
    border-radius: 50%;
    overflow: hidden;
    /* 增加非常克制的柔和暗角阴影，避免图片过于生硬 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.05); 
}

.avatar-circle-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片充满圆框且不变形 */
    transition: var(--transition-base);
}

/* 头像轻微的交互反馈，鼠标放上去图片微微放大 */
.avatar-circle-box:hover img {
    transform: scale(1.03);
}/* =========================================
   8. 平滑跳转 + 锚点偏移（让点导航"滑"过去，且不被挡住）
   说明：你的 .navbar 没有 position:fixed，是随页面滚走的，
   所以滚到某一层时导航栏早已离开顶部，这里 scroll-margin
   只留一点呼吸即可，不用留很大。
   （若你以后想让导航栏一直悬在顶部，给 .navbar 加
     position: sticky; top: 0; 再把下面的 scroll-margin-top 调成 100px 左右）
   ========================================= */
html {
    scroll-behavior: smooth;        /* 锚点跳转变成匀速滑动，不再硬跳 */
}
section {
    scroll-margin-top: 24px;        /* 滑到位后顶部留一点缝，不顶死 */
}

/* =========================================
   9. 内容区块（六层楼）—— 让 .page-block 从"一摞纸"变"一层层楼"
   全部沿用你的变量，圆角/过渡/配色与首屏统一
   ========================================= */
.page-block {
    min-height: 100vh;                          /* 关键①：每格至少占满一整屏 → 点导航像翻到新页 */
    max-width: var(--max-width);                /* 跟你首屏/导航用同一条版心线，左右对齐 */
    margin: 0 auto;                             /* 版心居中 */
    padding: 90px 40px 80px;                    /* 关键②：上下留白 + 左右40px（和你导航/首屏的40px一致，不贴墙）*/
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;                    /* 内容在这一屏里垂直居中，更有"整页"的仪式感 */
}

/* 隔一层换一点点底色，滚动时肉眼能"感觉"到换了楼层 */
.page-block:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.015);
}

/* 大标题：和你首屏 64px 拉开层级，但同样 800 字重、同样紧字距 */
.page-block h2 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--text-main);
    margin-bottom: 18px;
}
/* 标题下那道蓝短杠 —— 呼应你首屏的 --accent-blue，做视觉记号 */
.page-block h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin-top: 16px;
    border-radius: 4px;
    background: var(--accent-blue);
    transition: var(--transition-base);
}
.page-block:hover h2::after { width: 84px; }    /* 小彩蛋：鼠标进这一格，蓝杠悄悄变长 */

/* 标题下那行说明文字 */
.page-block > p {
    font-size: 17px;
    color: var(--text-muted);                   /* 用你的次级灰蓝，层级清晰 */
    line-height: 1.8;
    max-width: 720px;                           /* 一行别太长，好读 */
    margin-bottom: 8px;
}

/* 一段经历 / 一个作品 = 一张卡片 */
.work-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;                        /* 跟你按钮的 8px 同体系，略大一点区分卡片 */
    padding: 22px 26px;
    margin-top: 18px;
    max-width: 820px;
    transition: var(--transition-base);         /* 用你定义的同一条过渡曲线 */
}
.work-item:hover {                              /* 悬停：上浮 + 蓝边 + 微亮，和你按钮 hover 一个味道 */
    transform: translateY(-3px);
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.work-item h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}
.work-item .work-time {
    font-size: 14px;
    color: var(--accent-blue);                  /* 时间用强调蓝，一眼扫到 */
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
.work-item p {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 4px 0;
}

/* 图片 / 视频画廊：自动排网格，塞几张排几列，窄屏自动变少 */
.block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 32px;
    max-width: 1000px;
}
.block-gallery img,
.block-gallery video {
    width: 100%;
    height: 200px;
    object-fit: cover;                          /* 裁成统一尺寸，不变形 */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: var(--transition-base);
}
.block-gallery img:hover {
    transform: scale(1.03);                     /* 和你头像 hover 同样的微放大 */
    border-color: var(--accent-blue);
}

/* =========================================
   10. 把 <a> 伪装成按钮（因为你那两个按钮要换成 <a> 才能点）
   让 <a class="btn-primary"> 长得和你原来 <button> 一模一样
   ========================================= */
a.btn-primary,
a.btn-secondary {
    display: inline-flex;                       /* 变成"块"，好和原按钮对齐、好垂直居中文字 */
    align-items: center;
    justify-content: center;
    text-decoration: none;                      /* 去掉链接默认下划线 */
    color: inherit;                             /* 颜色交给 .btn-* 规则管 */
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 32px;                         /* 和你 button{} 里的 padding 一字不差，高度才一致 */
    border-radius: 8px;                         /* 和你 button{} 里的圆角一致 */
    transition: var(--transition-base);
}