/* =====================================================================
   2025~2026 个人电子作品集 · 设计系统 (Design Tokens & Base)
   —— 第二版视觉：近黑电影感底 · 香槟金单一强调色 · 几何无衬线(Space Grotesk/Inter)
      大标题字阶 · 细颗粒质感 · expo 曲线
   切换：<body class="theme-mono"> 可一键切到「纯单色极简」预设（见文件末尾）
   ===================================================================== */

/* ============ 自托管字体（仅拉丁字符，合计 69KB） ============
   国内直连 fonts.googleapis.com 经常超时/被限速，会导致首屏字体闪烁、甚至卡住渲染，
   故把两个展示字体的 latin 子集打进站内。中文不再加载 webfont —— 直接用系统字体，
   省掉 3~8MB 传输，Mac / Windows / 鸿蒙上的显示差异可以接受。 */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* —— 底色：近黑，微冷调 —— */
  --bg:          #0A0A0C;
  --bg-elev:     #121216;
  --surface:     rgba(255, 255, 255, 0.04);
  --surface-hi:  rgba(255, 255, 255, 0.08);

  /* —— 文字：暖白 + 灰阶层级 —— */
  --text:        #F4F2ED;
  --text-2:      #A8A39A;
  --text-3:      #6B675F;

  /* —— 单一强调色：香槟金（唯一彩色，克制使用） —— */
  --accent:      #C8A45C;
  --accent-hi:   #E8CE96;
  --accent-soft: rgba(200, 164, 92, 0.12);
  --ink:         #14110B;   /* 金底上的反色文字 */

  /* —— 线条 —— */
  --line:        rgba(244, 242, 237, 0.13);
  --line-soft:   rgba(244, 242, 237, 0.06);

  /* —— 字体：拉丁用自托管可变字体，中文回退系统字体（不再加载中文字体包） —— */
  --font-cjk:     "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Heiti SC", sans-serif;
  --font-display: "Space Grotesk", var(--font-cjk);
  --font-body:    "Inter", var(--font-cjk);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* —— 尺度 —— */
  --size-canvas: 1536;
  --spacing:     calc(100vw / var(--size-canvas));
  --maxw:   1536px;
  --wrap:   1280px;
  --gap:    clamp(16px, 2.2vw, 28px);
  --radius: 10px;
  --radius-lg: 18px;
  --pill:   999px;

  /* —— 动效 —— */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:      0.2s;
  --dur-slow: 0.4s;

  --nav-h: 68px;
}

/* ============================ Reset ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  display: flex; flex-direction: column;   /* 页脚始终贴底，内容少也不悬空 */
  font-kerning: normal;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 电影感光照：顶部微光 + 底部暗角（焦点在图/标题上） */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(110% 65% at 50% -8%, rgba(200, 164, 92, 0.07), transparent 60%),
    radial-gradient(100% 90% at 50% 118%, rgba(0, 0, 0, 0.62), transparent 62%);
}

/* 细颗粒噪点：胶片质感 */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

::selection { background: rgba(200, 164, 92, 0.28); color: #fff; }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ============================ Typography ============================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* 大标题：桌面戏剧感，移动端安全（overflow-wrap 防截断） */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 6.2vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-wrap: balance;   /* 均衡断行，避免「体验。」孤字成行 */
}

/* 标题重音：文案里的 [xxx] 渲染成 em，用于把个别字放大做视觉落点 */
.display em {
  font-style: normal;
  font-size: 1.4em;
  letter-spacing: -0.045em;
  line-height: 0.9;
}
/* 放大字会把行框撑高、吃掉行距，含重音时补回一点 */
.display:has(em) { line-height: 1.14; }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-3);
  display: inline-block;
}

/* 标题下的英文伴行（双语编辑感） */
.lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 58ch;
  overflow-wrap: anywhere;
}

.muted { color: var(--text-2); }
.dim   { color: var(--text-3); }

.bi { display: inline-flex; gap: 0.5em; align-items: baseline; flex-wrap: wrap; }
.bi .en { color: var(--text-3); font-size: 0.85em; letter-spacing: 0.02em; }

/* ============================ Layout helpers ============================ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 64px); }

.section { position: relative; z-index: 1; padding-block: clamp(72px, 11vw, 140px); }

.divider { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ============================ 按钮 ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.78em 1.4em;
  border-radius: var(--pill);
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  transition: background var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.btn:hover { background: var(--surface-hi); border-color: rgba(244, 242, 237, 0.34); }
.btn--accent { background: var(--accent); color: var(--ink); border-color: transparent; font-weight: 600; }
.btn--accent:hover { background: var(--accent-hi); color: var(--ink); }
.btn .arrow { transition: transform var(--dur-slow) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================ 进场动画 ============================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.fade-in-on-ready { animation: fadein 1s var(--ease) both; }

/* ============================ 可访问性 ============================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   预设切换：纯单色极简（参考 mathiasadolfsson.dev 的调性）
   用法：给 <body> 加 class="theme-mono" 即整站切换，无需改其它文件
   ===================================================================== */
body.theme-mono {
  --bg:          #080808;
  --bg-elev:     #0e0e0e;
  --text:        #f7f7f7;
  --text-2:      #9d9d9d;
  --text-3:      #5e5e5e;
  --accent:      #f7f7f7;
  --accent-hi:   #ffffff;
  --accent-soft: rgba(247, 247, 247, 0.08);
  --ink:         #080808;
  --line:        rgba(255, 255, 255, 0.10);
  --line-soft:   rgba(255, 255, 255, 0.055);
  --radius:      6px;
  --radius-lg:   10px;
  --font-display: "Inter", var(--font-cjk);
}
body.theme-mono::before {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.045), transparent 58%),
    radial-gradient(100% 90% at 50% 118%, rgba(0, 0, 0, 0.55), transparent 62%);
}
body.theme-mono .display { font-size: clamp(1.9rem, 4.4vw, 3.5rem); }