/* ============================================================
   个人作品集 · 样式表 · 暗夜湖畔主题
   纯 CSS，零第三方依赖
   ============================================================
   修改本文件即可调整全站视觉，无需改动 index.html 结构
   ============================================================ */


/* ============================================================
   第一部分：CSS 变量 · 主题色系统与设计令牌
   当前为「暗夜湖畔」主题：深墨绿 + 暖米色
   ============================================================ */
:root{
  /* —— 主题色（修改这 6 个变量即可一键换肤）—— */
  --color-primary:#f4eed8;     /* 主色：标题、正文（暖米色） */
  --color-secondary:#a8b8b2;   /* 辅助色：副文本（偏冷的鼠尾草绿） */
  --color-muted:#6a807a;       /* 弱色：注释、版权 */
  --color-bg:#071414;          /* 页面背景色（深墨绿近黑） */
  --color-card-bg:rgba(10,28,28,0.78); /* 卡片背景：半透明深墨绿 */
  --color-border:rgba(168,184,178,0.16); /* 边框色 */
  --color-accent:#e3d2a2;      /* 强调色：图中米色高光 */

  /* —— 间距规范（8px 基准）—— */
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-2xl:5rem;
  --space-3xl:8rem;

  /* —— 字体与排版 —— */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-serif:Georgia,"Times New Roman","Songti SC","SimSun",serif;
  --fs-hero:clamp(2.6rem,6.5vw,4.6rem);
  --fs-h1:clamp(1.7rem,3.4vw,2.4rem);
  --fs-h2:1.25rem;
  --fs-body:1.0625rem;
  --fs-small:0.875rem;
  --lh-tight:1.12;
  --lh-normal:1.7;
  --lh-relaxed:1.85;
  --max-width:1180px;          /* 内容最大宽度 */
  --read-width:640px;          /* 长文本阅读最佳行宽 */

  /* —— 圆角与过渡 —— */
  --radius-sm:6px;
  --radius-md:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:0.5s;

  /* —— 卡片投影/光晕（仅 card-shadow 模式生效）—— */
  --shadow-card:0 0 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-card-hover:0 0 46px rgba(227,210,162,.10),0 8px 32px rgba(0,0,0,.35);
}

/* ============================================================
   第二部分：基础重置与全局样式
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  color:var(--color-primary);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
  transition:background var(--dur) var(--ease);
}
img{max-width:100%;display:block;height:auto}
a{color:var(--color-accent);text-decoration:none;transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)}
a:hover{opacity:.75;color:#f0e6c8}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ============================================================
   第三部分：全屏背景图与暗化遮罩
   用 .bg-image 放置插画，用 .bg-overlay 压暗保证文字可读
   ============================================================ */
.bg-image,.bg-overlay{position:fixed;inset:0;z-index:-2;pointer-events:none}
.bg-image{
  /* ▼替换背景图▼ 将 url 改成你的图片路径 */
  background:url('images/lake-cat.jpg') center center / cover no-repeat fixed;
  filter:saturate(90%) contrast(105%);
}
.bg-overlay{
  z-index:-1;
  background:
    radial-gradient(ellipse at center,transparent 0%,rgba(7,20,20,.45) 60%,rgba(7,20,20,.82) 100%),
    linear-gradient(180deg,rgba(7,20,20,.75) 0%,rgba(7,20,20,.85) 45%,rgba(7,20,20,.92) 100%);
}

/* ============================================================
   第四部分：可选背景装饰（默认关闭，通过 body 类名开启）
   所有装饰均置于内容底层（z-index:-1），不干扰阅读
   ============================================================ */

/* 装饰层容器 */
.bg-decor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

/* —— 装饰一：极简几何细线 —— */
body.bg-lines .bg-decor::before,
body.bg-lines .bg-decor::after{
  content:"";position:absolute;background:var(--color-border);
}
body.bg-lines .bg-decor::before{top:0;left:18%;width:1px;height:100%;opacity:.6}
body.bg-lines .bg-decor::after{top:0;right:18%;width:1px;height:100%;opacity:.6}

/* —— 装饰二：柔和渐变光斑 —— */
body.bg-blobs .bg-decor::before,
body.bg-blobs .bg-decor::after{
  content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.22;
}
body.bg-blobs .bg-decor::before{
  width:480px;height:480px;top:-120px;right:-80px;
  background:radial-gradient(circle,rgba(168,184,178,.30),transparent 70%);
}
body.bg-blobs .bg-decor::after{
  width:420px;height:420px;bottom:-100px;left:-60px;
  background:radial-gradient(circle,rgba(227,210,162,.18),transparent 70%);
}

/* —— 装饰三：低透明度点阵纹理 —— */
body.bg-dots .bg-decor{
  background-image:radial-gradient(circle,rgba(244,238,216,.12) 1px,transparent 1px);
  background-size:22px 22px;opacity:.55;
}

/* ============================================================
   第五部分：通用容器与版式
   ============================================================ */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}
.section{
  position:relative;
  padding:var(--space-3xl) 0;
  background:rgba(7,20,20,.82); /* 区块罩一层半透明墨色，压住背景图便于阅读 */
}
.section-label{
  font-size:var(--fs-small);color:var(--color-muted);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--space-md);
}
.section-title{font-family:var(--font-serif);font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:400;font-style:italic;margin-bottom:var(--space-xl)}

/* ============================================================
   第六部分：顶部导航（滚动吸附顶部）
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),padding var(--dur) var(--ease);
  padding:var(--space-md) 0;
}
.nav.scrolled{
  background:rgba(7,20,20,.82);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  box-shadow:0 1px 0 var(--color-border);
  padding:var(--space-sm) 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.nav-brand{font-family:var(--font-serif);font-size:1.15rem;font-weight:400;font-style:italic;letter-spacing:.04em;color:var(--color-primary)}
.nav-menu{display:flex;gap:var(--space-lg);align-items:center}
.nav-menu a{
  font-size:var(--fs-small);color:var(--color-secondary);
  position:relative;padding:var(--space-xs) 0;
}
.nav-menu a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--color-accent);transition:width var(--dur) var(--ease);
}
.nav-menu a:hover{opacity:1}
.nav-menu a:hover::after{width:100%}
/* 移动端菜单按钮 */
.nav-toggle{display:none;font-size:1.4rem;line-height:1;padding:var(--space-xs);color:var(--color-primary)}

/* ============================================================
   第七部分：首屏 Hero
   ============================================================ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--space-3xl) + 40px) 0 var(--space-2xl);
  position:relative;
}
/* 首屏额外暗化，使中央水波纹理若隐若现 */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 65% 45%,rgba(7,20,20,.25) 0%,rgba(7,20,20,.68) 70%);
  pointer-events:none;
}
.hero-name{
  font-family:var(--font-serif);font-size:var(--fs-hero);line-height:var(--lh-tight);
  font-weight:400;font-style:italic;letter-spacing:.02em;
  margin-bottom:var(--space-md);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-tag{font-size:var(--fs-h2);color:var(--color-secondary);font-weight:400;margin-bottom:var(--space-lg);letter-spacing:.02em}
.hero-intro{max-width:var(--read-width);color:var(--color-secondary);line-height:var(--lh-relaxed)}
.hero-arrow{
  margin-top:var(--space-2xl);font-size:var(--fs-small);color:var(--color-muted);
  display:inline-flex;align-items:center;gap:var(--space-xs);
}
.hero-arrow svg{animation:bounce 2.2s var(--ease) infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============================================================
   第八部分：关于板块
   ============================================================ */
.about-grid{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}
.about-text{max-width:var(--read-width);color:var(--color-secondary);line-height:var(--lh-relaxed)}
.about-text p+p{margin-top:var(--space-md)}
.skills{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-xl)}
.skill-tag{
  font-size:var(--fs-small);color:var(--color-secondary);
  padding:var(--space-xs) var(--space-md);
  border:1px solid var(--color-border);border-radius:999px;
  background:rgba(255,255,255,.03);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.skill-tag:hover{border-color:var(--color-accent);color:var(--color-primary);background:rgba(227,210,162,.08)}

/* ============================================================
   第九部分：作品展示卡片网格
   ============================================================ */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-lg)}
.work-card{
  background:var(--color-card-bg);border-radius:var(--radius-md);
  overflow:hidden;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  border:1px solid transparent;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
/* —— 卡片样式开关 —— */
body.card-border .work-card{border-color:var(--color-border)}
body.card-border .work-card:hover{border-color:var(--color-accent)}
body.card-shadow .work-card{box-shadow:var(--shadow-card)}
body.card-shadow .work-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-6px)}
/* 默认无边框模式 hover */
.work-card:hover{transform:translateY(-6px)}

.work-cover{width:100%;aspect-ratio:4/3;object-fit:cover;background:rgba(168,184,178,.15);transition:transform var(--dur) var(--ease)}
.work-card:hover .work-cover{transform:scale(1.04)}
.work-body{padding:var(--space-md)}
.work-title{font-size:1.05rem;font-weight:600;margin-bottom:var(--space-xs);color:var(--color-primary)}
.work-desc{font-size:var(--fs-small);color:var(--color-muted);line-height:var(--lh-normal)}

/* ============================================================
   第十部分：页脚
   ============================================================ */
.footer{
  border-top:1px solid var(--color-border);
  padding:var(--space-2xl) 0 var(--space-xl);
  background:rgba(7,20,20,.9);
}
.footer-inner{display:flex;flex-direction:column;gap:var(--space-lg)}
.footer-contact{display:flex;flex-wrap:wrap;gap:var(--space-lg);align-items:center}
.footer-contact a{font-size:var(--fs-body);display:inline-flex;align-items:center;gap:var(--space-xs)}
.footer-contact svg{width:18px;height:18px;flex-shrink:0}
.footer-copy{font-size:var(--fs-small);color:var(--color-muted)}

/* ============================================================
   第十一部分：滚动揭示动效（IntersectionObserver 控制）
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}
.reveal:nth-child(5){transition-delay:.32s}
.reveal:nth-child(6){transition-delay:.40s}

/* —— 动效总开关：body.no-anim 一键关闭所有动效 —— */
body.no-anim *{transition:none !important;animation:none !important}
body.no-anim .reveal{opacity:1;transform:none}
body.no-anim .work-card:hover,body.no-anim .work-card:hover .work-cover{transform:none}
body.no-anim html{scroll-behavior:auto}

/* ============================================================
   第十二部分：响应式适配
   ============================================================ */
@media(max-width:768px){
  :root{--space-3xl:5rem;--space-2xl:3.5rem}
  .bg-image{background-attachment:scroll} /* 移动端禁用 fixed 背景，避免性能问题 */
  .nav-menu{
    position:fixed;top:0;right:0;height:100vh;width:75%;max-width:320px;
    background:rgba(7,20,20,.96);flex-direction:column;justify-content:center;
    padding:var(--space-xl);gap:var(--space-lg);
    transform:translateX(100%);transition:transform var(--dur) var(--ease);
    box-shadow:-4px 0 32px rgba(0,0,0,.35);
  }
  .nav-menu.open{transform:translateX(0)}
  .nav-menu a{font-size:1.1rem}
  .nav-toggle{display:block;z-index:101}
  .work-grid{grid-template-columns:1fr;gap:var(--space-md)}
  .hero{min-height:auto;padding-top:calc(var(--space-3xl) + 80px)}
  .section{background:rgba(7,20,20,.9)}
}
@media(max-width:480px){
  .container{padding:0 var(--space-md)}
  .work-body{padding:var(--space-sm)}
  .hero-name{letter-spacing:0}
}

/* 尊重用户的减少动效偏好 */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}