/* ============================================================================
 *  个人展示网页 · 样式表
 *  布局：杂志编辑风（非对称 / 描边大字 / 刊头刊条 / 大小交错项目网格）
 *  配色：Apple 层（白 + 浅灰分区 + 苹果蓝）；深色主题为默认
 * ========================================================================== */

/* ----------------------------- 自托管 Inter 可变字体 ----------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------- 设计变量 ----------------------------- */
:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.16);
  --ghost-stroke: rgba(0, 0, 0, 0.09);
  --text: #1d1d1f;
  --text-dim: #6e6e73;
  --text-faint: #86868b;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-link: #0066cc;
  --blue-soft: rgba(0, 113, 227, 0.09);
  --grad-text: linear-gradient(100deg, #0090ff 0%, #6e40c9 55%, #e8478b 100%);
  --radius-l: 28px;
  --radius-m: 18px;
  --pill: 980px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.10), 0 30px 64px rgba(0, 0, 0, 0.08);
  --maxw: 1180px;
  --nav-h: 60px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1.36, 0.36, 1);
  --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, Roboto, sans-serif;
}

/* ----------------------------- 基础 ----------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-stack);
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: -0.012em;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: rgba(0, 113, 227, 0.22); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #aeaeb2; }

/* ----------------------------- 背景氛围 ----------------------------- */
.bg-fx {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg);
}
.bg-fx .orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.4;
  animation: float 26s var(--ease) infinite; }
.orb.o1 { width: 480px; height: 480px; background: rgba(0, 113, 227, 0.10); top: -120px; left: -80px; }
.orb.o2 { width: 520px; height: 520px; background: rgba(191, 90, 242, 0.08); bottom: -140px; right: -120px; animation-delay: -9s; }
.orb.o3 { width: 380px; height: 380px; background: rgba(255, 149, 0, 0.07); top: 44%; left: 56%; animation-delay: -17s; }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(36px, -28px, 0) scale(1.06); }
  66% { transform: translate3d(-28px, 36px, 0) scale(0.96); }
}

/* ----------------------------- 容器与章节 ----------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 130px 0; position: relative; }
section[id], header#top { scroll-margin-top: calc(var(--nav-h) + 16px); }
#about, #contact { background: var(--bg-alt); }

/* 章节头：描边巨型字压底 */
.section-head { position: relative; text-align: center; margin-bottom: 64px; padding-top: 26px; }
.giant-word {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  font-size: clamp(72px, 14vw, 170px); font-weight: 800; letter-spacing: 0.04em;
  line-height: 1; white-space: nowrap; user-select: none; pointer-events: none; z-index: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--ghost-stroke);
}
.section-head > :not(.giant-word) { position: relative; z-index: 1; }
.eyebrow {
  display: inline-block; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--blue-link); margin-bottom: 12px;
}
.section-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.section-sub { color: var(--text-dim); margin-top: 14px; font-size: 1.125rem; }

/* ----------------------------- 导航（目录式） ----------------------------- */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100;
  display: flex; align-items: center;
  background: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
#navbar.scrolled { border-bottom-color: var(--hairline); }
.nav-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; }
#navLogo { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; }
/* 品牌区：Logo + 副标题「个人作品集 · Portfolio」 */
.nav-brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.nav-portfolio {
  font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--text-faint);
  font-weight: 500; white-space: nowrap;
}
@media (max-width: 640px) { .nav-portfolio { display: none; } }
.nav-links { display: flex; gap: 4px; }
.nav-link { padding: 8px 14px; font-size: 0.875rem; color: #424245; border-radius: var(--pill);
  transition: color .2s var(--ease), background .2s var(--ease); }
.nav-link i { font-style: normal; font-size: 0.6875rem; color: var(--text-faint);
  margin-right: 5px; font-variant-numeric: tabular-nums; }
.nav-link:hover { color: var(--text); }
.nav-link:active { background: rgba(0, 0, 0, 0.05); }
.nav-link.active { color: var(--text); font-weight: 600; }
.nav-link.active i { color: var(--blue); }
.nav-cta { padding: 8px 18px; border-radius: var(--pill); font-size: 0.875rem; font-weight: 500;
  color: #fff; background: var(--blue);
  transition: background .2s var(--ease), transform 120ms ease-out; }
.nav-cta:hover { background: var(--blue-hover); }
.nav-cta:active { transform: scale(0.96); }

/* ----------------------------- Hero：非对称编辑排版 ----------------------------- */
.hero { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0 72px; }
.hero-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.hero-text { position: relative; }
.hero-en {
  position: absolute; left: -10px; top: -58px; z-index: 0;
  font-size: clamp(76px, 13vw, 160px); font-weight: 800; line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em; white-space: nowrap; user-select: none; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px var(--ghost-stroke);
}
.hero-issue {
  display: inline-block; position: relative; z-index: 1;
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue-link); font-weight: 600; margin-bottom: 18px;
}
.hero h1 {
  position: relative; z-index: 1;
  font-size: clamp(3rem, 8vw, 6.25rem);
  line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 20px;
  text-wrap: balance;
}
.hero-side-note {
  position: absolute; right: -34px; top: 34%; z-index: 1;
  writing-mode: vertical-rl; font-size: 0.6563rem; letter-spacing: 0.34em;
  color: var(--text-faint); text-transform: uppercase;
}
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.hero-title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.hero-typing { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--blue-link); min-height: 1.7em; font-weight: 500; }
.hero-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em;
  background: var(--blue-link); vertical-align: -0.18em; margin-left: 2px;
  animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-desc { color: var(--text-dim); margin: 22px 0 34px; max-width: 30em; font-size: 1.1875rem; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 30px; border-radius: var(--pill); font-weight: 500; font-size: 1.0625rem;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 120ms ease-out, background .2s var(--ease),
    border-color .2s var(--ease), color .2s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { color: #fff; background: var(--blue); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-ghost { color: var(--blue-link); background: var(--surface); border-color: var(--hairline-strong); }
.btn-ghost:hover { border-color: var(--blue); }
.btn-ghost:active { background: var(--blue-soft); }

.hero-social { display: flex; gap: 12px; margin-top: 36px; }
.social-btn { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--surface-2); color: #424245;
  transition: transform 120ms ease-out, background .2s var(--ease), color .2s var(--ease); }
.social-btn svg { width: 20px; height: 20px; }
.social-btn:hover { background: #e8e8ed; color: var(--text); }
.social-btn:active { transform: scale(0.94); }
.social-btn.lg { width: 52px; height: 52px; }
.social-btn.lg svg { width: 24px; height: 24px; }

/* Hero 视觉区（粒子画布容器） */
.hero-visual { position: relative; }

/* 统计：刊表式（细线分栏，非卡片） */
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--hairline-strong); }
.stat { padding: 24px 20px 8px; border-left: 1px solid var(--hairline); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-num { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.8125rem; color: var(--text-faint); margin-top: 2px; }

/* ----------------------------- 刊条 Ticker ----------------------------- */
.ticker { overflow: hidden; background: var(--text); padding: 13px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 26s linear infinite; will-change: transform; }
.ticker-group {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bg-alt); white-space: nowrap;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------- 关于：双栏编辑排版 ----------------------------- */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.about-lead { padding-right: 48px; border-right: 1px solid var(--hairline-strong); }
.about-bio { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.6; letter-spacing: -0.015em; font-weight: 500; }
.about-bio::first-letter {
  float: left; font-size: 3em; line-height: 0.85; padding: 6px 12px 0 0;
  font-weight: 700; color: var(--blue);
}
.lead-caption { margin-top: 34px; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.skill-tag { padding: 8px 16px; border-radius: var(--pill); font-size: 0.8438rem;
  background: var(--surface); border: 1px solid var(--hairline);
  transition: transform 120ms ease-out, border-color .2s var(--ease); }
.skill-tag:hover { border-color: var(--hairline-strong); transform: translateY(-1px); }
.skill-tag:active { transform: scale(0.96); }

.about-card { padding: 8px 0; }
.about-card h3 { font-size: 1.125rem; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline-strong); }
.skill-bars { display: flex; flex-direction: column; gap: 22px; }
.bar-head { display: flex; justify-content: space-between; font-size: 0.9375rem; margin-bottom: 8px; font-weight: 500; }
.bar-val { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; border-radius: 8px; background: #e8e8ed; overflow: hidden; }
.bar-fill { width: 0; height: 100%; border-radius: 8px; background: var(--blue);
  transition: width 1s var(--ease-out); will-change: width; }

/* ----------------------------- 项目：大小交错网格 ----------------------------- */
.filter-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.filter-tab {
  padding: 9px 20px; border-radius: var(--pill); font-size: 0.875rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--text);
  transition: transform 120ms ease-out, background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  font-family: inherit;
}
.filter-tab:hover { border-color: var(--hairline-strong); }
.filter-tab:active { transform: scale(0.96); }
.filter-tab.active { background: var(--text); color: #fff; border-color: transparent; font-weight: 500; }

.project-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.project-card {
  position: relative; grid-column: span 2; padding: 28px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--hairline); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), opacity .6s var(--ease-out);
  opacity: 0; transform: translateY(24px);
  will-change: transform;
}
.project-card.featured { grid-column: span 4; }
.project-card.in-view { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i) * 60ms); }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.project-card:active { transform: translateY(-2px) scale(0.99); }
.card-glow {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.07), transparent 70%);
  left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; z-index: 0;
}
.card-top, .card-summary, .card-desc, .tech-list,
.feat-list, .card-actions { position: relative; z-index: 1; }

/* 巨型序号（幽灵数字压角） */
.card-index {
  position: absolute; right: 14px; bottom: -14px; z-index: 0;
  font-size: clamp(64px, 7vw, 104px); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px var(--ghost-stroke);
  pointer-events: none; user-select: none;
}
.project-card.featured .card-index { font-size: clamp(88px, 9vw, 150px); right: 20px; }

.badge { position: absolute; top: 18px; right: 18px; z-index: 2; font-size: 0.6875rem; font-weight: 600;
  padding: 4px 11px; border-radius: var(--pill); color: #b25000; background: rgba(255, 149, 0, 0.12); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card-title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.project-card.featured .card-title { font-size: 1.75rem; letter-spacing: -0.02em; max-width: 14em; }
.project-card.featured .card-top { padding-right: 68px; }
.card-cat { flex-shrink: 0; font-size: 0.75rem; font-weight: 500; color: var(--blue-link); padding: 5px 11px;
  border-radius: var(--pill); background: var(--blue-soft); white-space: nowrap; }
.project-card.featured .card-cat { align-self: flex-start; }
.card-summary { color: var(--text-dim); font-size: 0.9375rem; font-weight: 600; margin-bottom: 8px; }
.project-card.featured .card-summary { font-size: 1.0625rem; }
.card-desc { color: var(--text-dim); font-size: 0.875rem; margin-bottom: 16px; max-width: 38em; }
.tech-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.tech-tag { font-size: 0.75rem; padding: 4px 10px; border-radius: 8px; color: #424245; background: var(--surface-2); }
.feat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.feat-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.875rem; color: var(--text-dim); }
.project-card.featured .feat-list { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
.feat-list .dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; margin-top: 8px; background: var(--blue); }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.card-link { padding: 10px 20px; border-radius: var(--pill); font-size: 0.875rem; font-weight: 500;
  transition: transform 120ms ease-out, background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  cursor: pointer; }
.card-link.primary { color: #fff; background: var(--blue); }
.card-link.primary:hover { background: var(--blue-hover); }
.card-link:active { transform: scale(0.96); }
.card-link.ghost { color: var(--blue-link); background: var(--surface); border: 1px solid var(--hairline-strong); }
.card-link.ghost:hover { border-color: var(--blue); }
.card-link.ghost:active { background: var(--blue-soft); }

/* ----------------------------- 联系：编辑部式两栏 ----------------------------- */
.contact-wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px;
  border-top: 1px solid var(--hairline-strong); padding-top: 48px; }
.contact-card h3, .contact-side h3 { font-size: 1.375rem; letter-spacing: -0.015em; margin-bottom: 20px; }
.contact-list { display: flex; flex-direction: column; }
.contact-item { display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.contact-item .c-key { flex-shrink: 0; }
.contact-item .c-val { text-align: right; overflow-wrap: anywhere; }
.contact-item:first-child { padding-top: 0; }
.c-key { font-size: 0.75rem; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.c-val { font-size: 1.0625rem; }
a.c-val { transition: color .2s var(--ease); }
a.c-val:hover { color: var(--blue-link); text-decoration: underline; }
.contact-item.qr-item { align-items: center; }
.qr-img { width: 96px; height: 96px; border-radius: 14px; border: 1px solid var(--hairline);
  background: #fff; padding: 6px; }
.contact-side p { color: var(--text-dim); margin-bottom: 28px; max-width: 24em; }
.contact-social { display: flex; gap: 14px; }

/* ----------------------------- 页脚 Colophon ----------------------------- */
footer { padding: 30px 0; border-top: 1px solid var(--hairline-strong); background: var(--bg-alt); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 0.8125rem; color: var(--text-faint); }
.foot-mid { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.6875rem; }
.foot-top { font-weight: 500; transition: color .2s var(--ease); }
.foot-top:hover { color: var(--blue-link); }

/* ----------------------------- 滚动浮现 ----------------------------- */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  will-change: transform, opacity; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ----------------------------- 响应式 ----------------------------- */
@media (max-width: 980px) {
  section { padding: 104px 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-visual { max-width: 480px; }
  .hero-side-note { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-lead { padding-right: 0; border-right: none; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card, .project-card.featured { grid-column: span 1; }
  .project-card.featured { grid-column: span 2; }
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  section { padding: 84px 0; }
  .container { padding: 0 20px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card, .project-card.featured { grid-column: span 1; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); border-top: none; }
  .stat { border-left: none; border-top: 1px solid var(--hairline); padding: 18px 8px 4px; }
  .stat:nth-child(even) { border-left: 1px solid var(--hairline); padding-left: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-en { top: -46px; }
  .section-head { margin-bottom: 44px; }
  .foot-row { flex-direction: column; gap: 8px; }
  .nav-cta { display: none; }
}

/* ----------------------------- 项目详情弹层 ----------------------------- */
.project-card { cursor: pointer; }
.card-more {
  appearance: none; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  color: var(--blue); padding: 6px 2px; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
}
.card-more span { transition: transform 0.25s var(--ease-out); }
.project-card:hover .card-more span { transform: translateX(4px); }

.modal { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.modal.open { pointer-events: auto; }
.modal-mask {
  position: absolute; inset: 0;
  background: rgba(29, 29, 31, 0.45);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.modal.open .modal-mask { opacity: 1; }
.modal-panel {
  position: absolute; left: 50%; top: 50%;
  width: min(760px, calc(100% - 40px));
  max-height: min(84vh, 880px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-hover);
  padding: 52px 56px 46px;
  transform: translate(-50%, -47%) scale(0.97);
  opacity: 0;
  transition: transform 0.42s var(--ease-out), opacity 0.28s var(--ease);
}
.modal.open .modal-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.modal-close {
  position: sticky; top: 0; float: right; margin: -14px -14px 0 0;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.modal-close:hover { background: var(--text); color: #fff; border-color: var(--text); }
.modal-body { position: relative; clear: both; }
.modal-index {
  position: absolute; right: -6px; top: -28px;
  font-size: clamp(84px, 11vw, 132px); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; user-select: none; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px var(--ghost-stroke);
}
.modal-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.modal-title {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance;
  max-width: 16em; margin-bottom: 10px;
}
.modal-summary { color: var(--text-dim); font-size: 1.0625rem; font-weight: 600; margin-bottom: 20px; }
.modal-paras p {
  color: var(--text-dim); font-size: 0.96875rem; line-height: 1.85;
  margin-bottom: 13px; max-width: 62ch;
}
.modal-sub {
  margin: 26px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--hairline-strong);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--text-faint);
}
.md-feats li { font-size: 0.90625rem; }
.md-tech { margin-top: 2px; margin-bottom: 0; }
.modal .card-actions { margin-top: 24px; }

@media (max-width: 640px) {
  .modal-panel { width: calc(100% - 24px); max-height: 88vh; padding: 42px 24px 34px; border-radius: 22px; }
  .modal-index { top: -20px; right: 0; }
}

/* ----------------------------- 联系区扩充 ----------------------------- */
.intent-block { margin-top: 26px; }
.intent-kicker {
  margin: 0 0 14px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--text-faint);
}
.intent-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.intent-tag {
  padding: 9px 18px; border: 1px solid var(--hairline-strong); border-radius: var(--pill);
  font-size: 0.90625rem; font-weight: 600; color: var(--text-dim);
  background: var(--surface);
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease), background 0.22s var(--ease);
}
.intent-tag:hover {
  border-color: var(--blue); color: var(--blue); background: var(--blue-soft);
}
.contact-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding: 15px 30px; border-radius: var(--pill);
  background: var(--blue); color: #fff;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.28);
  transition: background 0.2s var(--ease), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease);
}
.contact-cta span { transition: transform 0.25s var(--ease-out); }
.contact-cta:hover {
  background: var(--blue-hover); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 113, 227, 0.34);
}
.contact-cta:hover span { transform: translateX(4px); }

/* ----------------------------- 深色主题（默认，可手动切换） ----------------------------- */
html[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #0a0a0c;
  --surface: #161618;
  --surface-2: #101012;
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.24);
  --ghost-stroke: rgba(255, 255, 255, 0.16);
  --text: #f5f5f7;
  --text-dim: #a1a1a6;
  --text-faint: #86868b;
  --blue: #0a84ff;
  --blue-hover: #409cff;
  --blue-link: #64b5ff;
  --blue-soft: rgba(10, 132, 255, 0.16);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45), 0 30px 64px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] ::selection { background: rgba(10, 132, 255, 0.35); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #48484a; border-color: var(--bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #636366; }

html[data-theme="dark"] #navbar { background: rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .nav-link { color: #a1a1a6; }
html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { color: var(--text); }
html[data-theme="dark"] .nav-link:active { background: rgba(255, 255, 255, 0.08); }

html[data-theme="dark"] .bg-fx .orb { opacity: 0.3; }
html[data-theme="dark"] .bar-track { background: #2c2c2e; }
html[data-theme="dark"] .social-btn { color: #a1a1a6; }
html[data-theme="dark"] .social-btn:hover { background: #2c2c2e; color: var(--text); }
html[data-theme="dark"] .tech-tag { color: #d1d1d6; }
html[data-theme="dark"] .filter-tab.active { background: var(--text); color: #1d1d1f; }
html[data-theme="dark"] .badge { color: #ffb340; background: rgba(255, 159, 10, 0.15); }
html[data-theme="dark"] .ticker { background: #0a0a0c; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
html[data-theme="dark"] .qr-img { background: #fff; } /* 二维码图片保持白底，保证可扫 */
html[data-theme="dark"] .modal-close:hover { background: var(--text); color: #1d1d1f; border-color: var(--text); }
html[data-theme="dark"] .contact-cta, html[data-theme="dark"] .card-link.primary { color: #fff; }
html[data-theme="dark"] .btn-ghost { background: transparent; }
html[data-theme="dark"] .card-link.ghost { background: transparent; }
html[data-theme="dark"] .filter-tab { background: transparent; }
html[data-theme="dark"] .skill-tag { background: transparent; }
html[data-theme="dark"] .intent-tag { background: transparent; }

/* ----------------------------- 信条 Manifesto：豪华滚动点亮区 ----------------------------- */
#craft {
  position: relative; overflow: hidden;
  padding: 22vh 0;
  background: var(--text); /* 浅/深色下互为反色，形成章节对比 */
  text-align: center;
}
html[data-theme="dark"] #craft { background: #050507; }

/* 极光背景 */
.craft-aurora { position: absolute; inset: 0; overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55;
  animation: auroraDrift 18s ease-in-out infinite alternate; }
.aurora.a1 { width: 560px; height: 560px; top: -18%; left: -8%;
  background: radial-gradient(circle, rgba(0,113,227,0.5), transparent 70%); }
.aurora.a2 { width: 640px; height: 640px; bottom: -26%; right: -10%;
  background: radial-gradient(circle, rgba(110,64,201,0.45), transparent 70%);
  animation-delay: -6s; }
.aurora.a3 { width: 420px; height: 420px; top: 34%; left: 58%;
  background: radial-gradient(circle, rgba(232,71,139,0.32), transparent 70%);
  animation-delay: -12s; }
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, -40px, 0) scale(1.15); }
}

/* 旋转锥形光环 */
.craft-ring {
  position: absolute; left: 50%; top: 50%;
  width: min(72vmin, 680px); height: min(72vmin, 680px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(0,144,255,0.35) 60deg, transparent 130deg,
    transparent 180deg, rgba(232,71,139,0.28) 250deg, transparent 320deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 62%, #000 68%, transparent 72%);
  mask: radial-gradient(circle, transparent 58%, #000 62%, #000 68%, transparent 72%);
  animation: ringSpin 26s linear infinite;
  opacity: 0.9; pointer-events: none;
}
@keyframes ringSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.craft-inner { position: relative; z-index: 1; }
.craft-eyebrow { display: inline-block; margin-bottom: 8vh; color: rgba(255,255,255,0.55);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }

/* 滚动点亮的大字 */
.craft-line {
  font-size: clamp(2.4rem, 7.5vw, 5.5rem);
  line-height: 1.18; letter-spacing: -0.02em; font-weight: 800;
  margin: 5vh 0; text-wrap: balance;
  --p: 0; /* JS 写入 0~1 点亮进度 */
}
.craft-line > span {
  background:
    linear-gradient(100deg, #ffffff 0%, #cfe6ff 45%, #9db9ff 100%)
    0 0 / 100% 100% no-repeat,
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.16));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: rgba(255,255,255,0.16);
  opacity: calc(0.25 + var(--p) * 0.75);
  filter: blur(calc((1 - var(--p)) * 6px));
  transform: translateY(calc((1 - var(--p)) * 26px));
  display: inline-block;
  transition: opacity .1s linear;
  will-change: filter, transform, opacity;
}
.craft-line em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.craft-foot { margin-top: 9vh; color: rgba(255,255,255,0.4); font-size: 0.9375rem;
  letter-spacing: 0.12em; }

@media (max-width: 640px) {
  #craft { padding: 16vh 0; }
  .craft-ring { width: 92vmin; height: 92vmin; }
}

/* ----------------------------- 科技感升级：粒子画布 / 玻璃卡 / 弹簧手感 ----------------------------- */

/* Hero 粒子球画布 */
.hero-visual { min-height: 520px; position: relative; }
#heroParticles {
  position: absolute; inset: -60px -40px; width: calc(100% + 80px); height: calc(100% + 120px);
  pointer-events: none;
}
/* 导航右侧：主题切换 + CTA */
.nav-right { display: flex; align-items: center; gap: 10px; }
#themeToggle {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--hairline); background: transparent; color: var(--text-dim);
  cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease),
    transform .35s var(--spring);
}
#themeToggle:hover { color: var(--text); border-color: var(--hairline-strong); transform: rotate(24deg); }
#themeToggle:active { transform: scale(0.88); }
#themeToggle svg { width: 17px; height: 17px; }
html[data-theme="dark"] #themeToggle .ico-moon { display: none; }
html[data-theme="light"] #themeToggle .ico-sun { display: none; }

/* 弹簧手感：可按压元素统一带过冲回弹 */
.btn, .nav-cta, .social-btn, .filter-tab, .skill-tag,
.card-link, .contact-cta, .themeToggle {
  transition-timing-function: var(--spring-soft);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(0, 113, 227, 0.3); }
.social-btn:hover { transform: translateY(-3px); }
.filter-tab:hover { transform: translateY(-1px); }
.project-card {
  transition: transform .5s var(--spring-soft), box-shadow .5s var(--ease-out), opacity .6s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.card-more { transition: color .2s var(--ease); }
.card-more:hover { color: var(--blue-hover); }

/* 滚动视差元素 */
.giant-word, .hero-en { will-change: transform; }

@media (max-width: 980px) {
  .hero-visual { min-height: 0; padding-top: 300px; }
  #heroParticles { inset: -40px -20px auto -20px; width: calc(100% + 40px); height: 380px; }
}

/* ----------------------------- 无障碍三档适配 ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal, .project-card { opacity: 1; transform: none; }
  .bar-fill { transition: none; }
  .ticker-track { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #navbar { background: #fbfbfd; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bg-fx .orb { display: none; }
}
@media (prefers-contrast: more) {
  :root { --hairline: rgba(0, 0, 0, 0.4); --hairline-strong: rgba(0, 0, 0, 0.6);
    --ghost-stroke: rgba(0, 0, 0, 0.35); --text-dim: #3a3a3c; --text-faint: #48484a; }
  #navbar.scrolled { background: #fff; }
  .card-cat, .badge { border: 1px solid currentColor; }
}