/* ============================================================
   style.css — T2: CSS 变量系统 + 基础排版
   Design Guide §九 完整变量 + §三 排版规则
   ============================================================ */

/* =============================================================
   CSS Custom Properties — Light (default)
   ============================================================= */
:root {
  /* ── 配色 ── */
  --color-bg:           #F8F7F4;
  --color-bg-subtle:    #F1EFE9;
  --color-card:         #FFFFFF;
  --color-card-hover:   #FAFAF8;

  --color-text:         #1C1917;
  --color-text-secondary: #6B6560; /* 从 #78716C 加深，on bg-subtle (#F1EFE9) 从 4.26:1 → 5.10:1 */
  --color-text-muted:   #78716C;   /* 从 #A8A29E 加深，on bg (#F8F7F4) 从 2.33:1 → 4.55:1 */

  --color-accent:       #4F46E5;
  --color-accent-light: #EEF2FF;
  --color-accent-hover: #4338CA;

  --color-warm:         #D97706;
  --color-warm-hover:   #B45309;
  --color-warm-light:   #FFFBEB;

  --color-border:       #E7E5E4;
  --color-border-subtle:#F5F5F4;

  --color-success:      #059669;
  --color-tag-bg:       #F5F5F4;
  --color-tag-text:     #57534E;
  --color-tag-hover:    #E7E5E4;

  --color-nav-bg:       rgba(248, 247, 244, 0.85);
  --color-on-accent:    #FFFFFF;
  --color-on-warm:      #1C1917; /* 深字 on 琥珀 #D97706：5.45:1，替代白字 3.20:1 */
  --color-accent-border: rgba(79, 70, 229, 0.2);
}

/* =============================================================
   CSS Custom Properties — Dark
   ============================================================= */
[data-theme="dark"] {
  --color-bg:           #1C1917;
  --color-bg-subtle:    #292524;
  --color-card:         #292524;
  --color-card-hover:   #44403C;

  --color-text:         #F5F5F4;
  --color-text-secondary: #A8A29E;
  --color-text-muted:   #A8A29E; /* 从 #78716C 调亮，on bg (#1C1917) 从 3.59:1 → 7.00:1 */

  --color-accent:       #818CF8;
  --color-accent-light: #1E1B4B;
  --color-accent-hover: #A5B4FC;

  --color-warm:         #FBBF24;
  --color-warm-hover:   #F59E0B;
  --color-warm-light:   #451A03;

  --color-border:       #44403C;
  --color-border-subtle:#292524;

  --color-success:      #34D399;
  --color-tag-bg:       #44403C;
  --color-tag-text:     #D6D3D1;
  --color-tag-hover:    #57534E;

  --color-nav-bg:       rgba(28, 25, 23, 0.85);
  --color-on-accent:    #FFFFFF;
  --color-on-warm:      #1C1917; /* 深字 on 琥珀 #FBBF24：10.66:1，替代白字 1.63:1 */
  --color-accent-border: rgba(129, 140, 248, 0.25);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-xl:   0 8px 32px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(129, 140, 248, 0.20);
}

/* =============================================================
   Theme Transition — T13
   ============================================================= */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 300ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease !important;
}

:root {
  /* ── 字体 ── */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  --font-chinese: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

  /* ── 字号（流体排版）── */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm:    clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
  --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg:    clamp(1.0625rem, 0.975rem + 0.4vw, 1.125rem);
  --text-xl:    clamp(1.1875rem, 1.05rem + 0.7vw, 1.375rem);
  --text-2xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:   clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --text-4xl:   clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);

  --leading-tight:   1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── 间距（8px 基数）── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── 圆角 ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;

  /* ── 阴影（暖色系，非纯黑）── */
  --shadow-sm:   0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md:   0 2px 8px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-lg:   0 4px 16px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-xl:   0 8px 32px rgba(28, 25, 23, 0.10), 0 4px 8px rgba(28, 25, 23, 0.04);
  --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);

  /* ── 过渡 ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 布局 ── */
  --nav-height:     64px;
  --content-max:    1120px;
  --content-narrow: 720px;
}

/* =============================================================
   Reset
   ============================================================= */

/* ----- Box-sizing reset ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ----- Spacing reset ----- */
html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, figcaption,
blockquote,
dl, dd {
  margin: 0;
  padding: 0;
}

/* ----- List reset ----- */
ul, ol {
  list-style: none;
}

/* ----- Link reset ----- */
a {
  color: inherit;
  text-decoration: none;
}

/* ----- Image reset ----- */
img, video {
  display: block;
  max-width: 100%;
}

/* =============================================================
   Base Typography
   ============================================================= */
html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ----- Headings ----- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

/* ----- Body text ----- */
p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* ----- Monospace ----- */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* =============================================================
   Layout Utilities
   ============================================================= */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-16);
}

/* =============================================================
   Navigation — T3
   ============================================================= */

/* ----- Header shell ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 100;
  background-color: var(--color-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  transition: box-shadow var(--transition-fast);
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

/* Dark mode: 导航背景已通过 --color-nav-bg 变量自动跟随主题 */

/* ----- Nav inner layout ----- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ----- Logo ----- */
.nav__logo {
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.nav__logo:hover {
  color: var(--color-accent);
}

/* ----- Links list ----- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__links a {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.nav__links a:hover {
  color: var(--color-text);
}

/* 下划线：从左到右展开 */
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-base);
}

.nav__links a:hover::after {
  width: 100%;
}

/* 墨点指示器：当前 section 的导航项 */
.nav__links a::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  translate: -50% 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 4px rgba(79, 70, 229, 0.4);
  opacity: 0;
  transition:
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
    translate 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .nav__links a::before {
  box-shadow: 0 0 4px rgba(129, 140, 248, 0.4);
}

.nav__links a.is-active {
  color: var(--color-text);
}

.nav__links a.is-active::before {
  opacity: 1;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  padding: var(--space-2) var(--space-5);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-on-accent);
  transform: scale(1.02);
}

.btn--primary:active {
  transform: scale(0.98);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-5);
}

.btn--ghost:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
}

.btn--ghost:active {
  transform: scale(0.98);
}

/* ----- CTA in nav ----- */
.nav__cta {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
}

/* ----- Theme toggle ----- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.theme-toggle:hover {
  color: var(--color-text);
  background-color: var(--color-bg-subtle);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  position: absolute;
  transition: transform 300ms ease, opacity 300ms ease;
}

.theme-toggle__sun {
  opacity: 1;
  transform: rotate(0deg);
}

.theme-toggle__moon {
  opacity: 0;
  transform: rotate(-90deg);
}

[data-theme="dark"] .theme-toggle__sun {
  opacity: 0;
  transform: rotate(90deg);
}

[data-theme="dark"] .theme-toggle__moon {
  opacity: 1;
  transform: rotate(0deg);
}

/* ----- Body offset: 补偿 fixed 导航栏高度 ----- */
body {
  padding-top: var(--nav-height);
}

/* =============================================================
   Hero — T4
   ============================================================= */

.section--hero {
  padding-block: var(--space-20);
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
}

.hero {
  max-width: var(--content-narrow);
}

.hero__greeting {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}

.hero__name {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: -0.03em;
}

.hero__name-cn {
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  font-size: 0.6em;
  letter-spacing: 0;
}

.hero__tagline {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.hero__tagline-cn {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  font-family: var(--font-chinese);
  margin-bottom: var(--space-8);
}

.hero__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 36.25rem;
  margin-bottom: var(--space-10);
}

.hero__desc strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ----- Hero typewriter: initial hidden states ----- */
/* Only hide when JS is available (html.js-ready added by main.js) */
.js-ready .hero__greeting,
.js-ready .hero__name {
  visibility: hidden;   /* JS will manage visibility */
}

.hero__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

.hero__char.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .hero__tagline,
.js-ready .hero__tagline-cn,
.js-ready .hero__desc {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.hero__tagline.is-visible,
.hero__tagline-cn.is-visible,
.hero__desc.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .hero__cta {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.hero__cta.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* When JS hasn't loaded or is skipped, show everything */
.hero--no-anim .hero__greeting,
.hero--no-anim .hero__name {
  visibility: visible;
}

.hero--no-anim .hero__tagline,
.hero--no-anim .hero__tagline-cn,
.hero--no-anim .hero__desc,
.hero--no-anim .hero__cta {
  opacity: 1;
  transform: none;
}

/* ----- Large button variant ----- */
.btn--lg {
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-base);
}

/* =============================================================
   About — T5
   ============================================================= */

.section--about {
  background-color: var(--color-bg-subtle);
}

.about__inner {
  max-width: var(--content-narrow);
}

/* ----- Section heading with accent rule ----- */
.about__heading {
  position: relative;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  padding-left: var(--space-5);
  margin-bottom: var(--space-8);
}

.about__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 3px;
  height: 0.85em;
  background-color: var(--color-accent);
  border-radius: 2px;
}

/* ----- Body copy ----- */
.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.about__text strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* =============================================================
   Skills — T6
   ============================================================= */

/* ----- Section heading with accent rule (reuses About pattern) ----- */
.skills__heading {
  position: relative;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  padding-left: var(--space-5);
  margin-bottom: var(--space-8);
}

.skills__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 3px;
  height: 0.85em;
  background-color: var(--color-accent);
  border-radius: 2px;
}

/* ----- Categories grid ----- */
.skills__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: var(--content-narrow);
}

/* ----- Category title ----- */
.skills__category-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* ----- Tag wall ----- */
.skills__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ----- Individual tag ----- */
.skills__tag {
  display: inline-block;
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  user-select: none;
}

.skills__tag:hover {
  background-color: var(--color-tag-hover);
}

/* =============================================================
   Projects — T7
   ============================================================= */

/* ----- Section heading：复用靛蓝竖线 pattern ----- */
.projects__heading {
  position: relative;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  padding-left: var(--space-5);
  margin-bottom: var(--space-10);
}

.projects__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 3px;
  height: 0.85em;
  background-color: var(--color-accent);
  border-radius: 2px;
}

/* ----- Cards grid ----- */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

/* ----- Card shell ----- */
.project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
  overflow: hidden;
}

/* ----- Hover: 上浮 + 靛蓝光晕（匠光签名）----- */
.project-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  border-color: var(--color-accent-border);
}

/* ----- Active: 轻微下沉 ----- */
.project-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ----- Card body: 内容区，弹性撑开 ----- */
.project-card__body {
  flex: 1;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ----- Project name ----- */
.project-card__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

/* ----- One-liner description ----- */
.project-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
}

/* ----- Tech tags: 复用 .skills__tag，无需额外样式 ----- */
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-1);
}

/* ----- Card footer: 链接区，与 body 用细线分隔 ----- */
.project-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

/* ----- Link ----- */
.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  transition: color var(--transition-fast);
  position: relative;
}

.project-card__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card__link:hover {
  color: var(--color-accent-hover);
}

.project-card__link:hover::after {
  width: 100%;
}

.project-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----- Arrow icon ----- */
.project-card__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.project-card__link:hover .project-card__arrow {
  transform: translateX(2px);
}

/* =============================================================
   Button — warm variant (琥珀 CTA，全站仅用 1-2 处)
   ============================================================= */

.btn--warm {
  background-color: var(--color-warm);
  color: var(--color-on-warm);
  padding: var(--space-2) var(--space-5);
}

.btn--warm:hover {
  background-color: var(--color-warm-hover);
  color: var(--color-on-warm);
  transform: scale(1.02);
}

.btn--warm:active {
  transform: scale(0.98);
}

/* =============================================================
   Contact — T9
   ============================================================= */

.section--contact {
  background-color: var(--color-bg-subtle);
}

/* ----- Section heading：复用靛蓝竖线 pattern ----- */
.contact__heading {
  position: relative;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  padding-left: var(--space-5);
  margin-bottom: var(--space-8);
}

.contact__heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 3px;
  height: 0.85em;
  background-color: var(--color-accent);
  border-radius: 2px;
}

/* ----- Inner layout ----- */
.contact__inner {
  max-width: var(--content-narrow);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ----- Intro paragraph ----- */
.contact__intro {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 36rem;
}

/* ----- Primary CTA: 琥珀按钮 ----- */
.contact__cta {
  align-self: flex-start;
}

/* ----- Contact links: email / GitHub / LinkedIn ----- */
.contact__links {
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  position: relative;
}

.contact__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact__link:hover {
  color: var(--color-accent);
}

.contact__link:hover::after {
  width: 100%;
}

.contact__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.contact__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* =============================================================
   Footer — T9
   ============================================================= */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__copy {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.footer__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
  position: relative;
}

.footer__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__link:hover {
  color: var(--color-text-secondary);
}

.footer__link:hover::after {
  width: 100%;
}

.footer__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =============================================================
   Scroll Reveal — T10
   ============================================================= */

/* ----- Base: hidden state ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
  will-change: opacity, transform;
}

/* ----- Revealed: visible state ----- */
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* ----- Staggered children ----- */
.reveal .reveal-child {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.reveal.revealed .reveal-child:nth-child(1) {
  transition-delay: 0ms;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed .reveal-child:nth-child(2) {
  transition-delay: 100ms;
  opacity: 1;
  transform: translateY(0);
}

.reveal.revealed .reveal-child:nth-child(3) {
  transition-delay: 200ms;
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   汉堡按钮 — 全局定义，移动端才显示
   ============================================================= */

/* 默认隐藏汉堡按钮（桌面/平板不需要）*/
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.nav__hamburger:hover {
  background-color: var(--color-bg-subtle);
}

.nav__hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--transition-base),
    opacity var(--transition-fast);
}

/* X 状态：展开时汉堡变 X */
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* =============================================================
   平板断点 (640px – 1023px)
   ============================================================= */
@media (min-width: 640px) and (max-width: 1023px) {
  /* 卡片保持双列，适当缩小间距 */
  .projects__grid {
    gap: var(--space-6);
  }

  /* 容器横向 padding 收窄一档 */
  .container {
    padding-inline: var(--space-5);
  }

  /* Section 垂直间距适当压缩 */
  .section {
    padding-block: var(--space-12);
  }

  /* Hero 竖向留白减少 */
  .section--hero {
    padding-block: var(--space-16);
  }
}

/* =============================================================
   移动端 (< 640px) — T12 完整实现
   ============================================================= */
@media (max-width: 639px) {
  /* ----- 汉堡按钮：显示 ----- */
  .nav__hamburger {
    display: flex;
  }

  /* ----- Theme toggle: 移动端位置 ----- */
  .theme-toggle {
    order: -1;
    margin-right: auto;
    margin-left: var(--space-4);
  }

  /* ----- 桌面导航 CTA：在移动端隐藏，菜单里有锚点可替代 ----- */
  .nav__cta {
    display: none;
  }

  /* ----- 导航链接列表：全屏覆盖菜单 ----- */
  .nav__links {
    /* 脱离流，全屏覆盖 */
    position: fixed;
    inset: 0;
    z-index: 99; /* 低于 site-header (z-index:100)，高于页面内容 */

    /* 毛玻璃背景 */
    background-color: var(--color-nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 垂直居中菜单项 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);

    /* 关闭状态：不可见 + 不可交互 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base);
  }

  /* 展开状态 */
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* 菜单项：大字号，方便触控 */
  .nav__links a {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 下划线动画在全屏菜单中也保留 */
  .nav__links a::after {
    bottom: -2px;
  }

  /* 移动端隐藏墨点指示器 */
  .nav__links a::before {
    display: none;
  }

  /* ----- 容器 padding ----- */
  .container {
    padding-inline: var(--space-4);
  }

  /* ----- Hero: 标题缩至 --text-3xl ----- */
  .hero__name {
    font-size: var(--text-3xl);
  }

  .hero__tagline {
    font-size: var(--text-xl);
  }

  .hero__tagline-cn {
    font-size: var(--text-lg);
  }

  .hero__desc {
    max-width: 100%;
    font-size: var(--text-base); /* 确保正文 >= 16px */
  }

  /* Hero 打字机：移动端跳过，直接显示 */
  .hero__greeting,
  .hero__name {
    visibility: visible;
  }

  .hero__char {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__tagline,
  .hero__tagline-cn,
  .hero__desc {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Hero 留白减少 */
  .section--hero {
    padding-block: var(--space-12);
  }

  /* ----- Skills: 标签区横向滚动 ----- */
  .skills__tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: var(--space-2); /* 防止滚动条遮住内容 */
  }

  .skills__tags::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* 标签不缩小 */
  .skills__tag {
    flex-shrink: 0;
    /* 触控目标：确保足够高度 */
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ----- Projects: 单列全宽 ----- */
  .projects__grid {
    grid-template-columns: 1fr;
  }

  /* 移动端禁用 hover 浮起 */
  .project-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
  }

  /* ----- 触控目标：按钮和链接最小 44px ----- */
  .btn--lg {
    min-height: 44px;
  }

  .contact__link {
    min-height: 44px;
  }

  .project-card__link {
    min-height: 44px;
  }

  .footer__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ----- Contact: 链接竖排 ----- */
  .contact__links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* ----- Footer: 竖排 ----- */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

/* =============================================================
   Accessibility — T11
   ============================================================= */

/* ----- Skip to content link ----- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ----- Focus-visible ring ----- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

.btn--warm:focus-visible {
  outline-color: var(--color-warm);
  box-shadow: 0 0 0 4px var(--color-warm-light);
}

/* ----- prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body {
    transition: none;
  }

  /* Reveal: 直接显示，无动画 */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .reveal .reveal-child {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal.revealed .reveal-child:nth-child(n) {
    transition-delay: 0ms;
  }

  /* Hero 打字机：减少动效时直接显示 */
  .hero__greeting,
  .hero__name {
    visibility: visible;
  }

  .hero__char {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__tagline,
  .hero__tagline-cn,
  .hero__desc {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* 导航 */
  .site-header {
    transition: none;
  }

  .nav__logo {
    transition: none;
  }

  .nav__links a {
    transition: none;
  }

  .nav__links a::after {
    transition: none;
  }

  .nav__links a::before {
    transition: none;
  }

  /* 汉堡菜单：无动画，直接切换可见性 */
  .nav__hamburger {
    transition: none;
  }

  .nav__hamburger-bar {
    transition: none;
  }

  .nav__links {
    transition: none;
  }

  /* 按钮：保留颜色变化，移除 transform */
  .btn {
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .btn--primary:hover,
  .btn--warm:hover {
    transform: none;
  }

  .btn--warm:active {
    transform: none;
  }

  /* 卡片：保留颜色/边框变化，移除 transform */
  .project-card {
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  }

  .project-card:hover {
    transform: none;
  }

  .project-card:active {
    transform: none;
  }

  /* 箭头：移除位移动画 */
  .project-card__arrow {
    transition: none;
  }

  .project-card__link:hover .project-card__arrow {
    transform: none;
  }

  /* 标签/链接 */
  .skills__tag {
    transition: none;
  }

  .project-card__link {
    transition: none;
  }

  .project-card__link::after {
    transition: none;
    width: 100%;
  }

  .contact__link {
    transition: none;
  }

  .contact__link::after {
    transition: none;
    width: 100%;
  }

  .footer__link {
    transition: none;
  }

  .footer__link::after {
    transition: none;
    width: 100%;
  }

  /* 按钮：取消 active 的 scale */
  .btn--primary:active,
  .btn--ghost:active {
    transform: none;
  }

  .theme-toggle svg {
    transition: none;
  }
}