/* ============================================
   乡音记 · 设计系统 v4 · Airbnb-inspired
   视觉风格：干净留白 · 单一主色 · 柔和圆角 · 统一阴影
   灵感：Airbnb Design — 纯白画布、暖金主色、克制装饰
   ------------------------------------------
   设计原则
   1. 单一主色调 — 所有 CTA 只用一个 accent 色
   2. 干净的白色画布 — 纯白或微暖底色，不花哨
   3. 柔和圆角 — 卡片 14px、按钮 8px、搜索栏完全圆角
   4. 适度字重 — 标题 500-600，正文 400
   5. 统一阴影层级 — 只有一个 shadow tier，黑色系
   6. 1px 发丝边框 — #e0ddd9 级别的细线
   7. 大量留白 — section 间距 64px
   8. 保持适老化 — 大字号 17px、高对比度
   ============================================ */

/* ===== Google Fonts 已移至 index.html <link> 标签以优化加载 ===== */

:root {
  /* ========================================
     颜色系统：纯白画布 + 单一暖金主色
     ======================================== */

  /* --- 画布与表面 --- */
  --canvas:         #ffffff;          /* 纯白主背景 */
  --surface:        #faf9f7;          /* 极浅暖灰，次级面 */
  --surface-strong: #f4f3f1;          /* 稍深暖灰，hover 态 */
  --hairline:       #e0ddd9;          /* 1px 发丝边框 */
  --hairline-soft:  #ededeb;          /* 更浅的分隔线 */

  /* --- 唯一主色：暖金色 --- */
  --gold:           #b8860b;          /* 主色 — 所有 CTA */
  --gold-active:    #9a7209;          /* 按下态 */
  --gold-light:     #d4a933;          /* 辅助高亮 */
  --gold-bg:        #faf5e6;          /* 极浅金背景 */
  --gold-soft:      #f0e6c8;          /* 浅金背景 */
  --gold-glow:      rgba(184, 134, 11, 0.12); /* 金色光晕（仅用于焦点环） */

  /* --- 辅助色（仅用于状态，不做装饰） --- */
  --terra:          #c0563a;          /* 偶尔强调 */
  --terra-light:    #d9785a;          /* 赤陶浅色 */
  --terra-soft:     #f7e3dc;          /* 赤陶浅背景 */
  --sage:           #5b8c5a;         /* 成功状态 */
  --sage-soft:      #e8eee8;          /* 鼠尾草浅背景 */
  --ink-blue:       #4a6fa5;          /* 信息提示 */
  --ink-blue-soft:  #e8edf3;         /* 墨蓝浅背景 */

  /* --- 文字 --- */
  --ink:            #1a1a1a;          /* 主文字 — 近黑但非纯黑 */
  --ink-soft:       #4a4a4a;          /* 次级文字 */
  --muted:          #71706e;          /* 灰色辅助文字 */
  --muted-soft:     #9c9a96;          /* 最浅灰 */

  /* --- 语义色 --- */
  --success:        #5b8c5a;
  --warning:        #c0563a;
  --error:          #c0392b;
  --info:           #4a6fa5;

  /* ========================================
     字体系统
     ======================================== */
  --font-serif: 'Noto Serif SC', Georgia, serif;
  --font-sans:  'Noto Sans SC', -apple-system, system-ui, sans-serif;
  --font-mono:  'SF Mono', Menlo, monospace;

  /* ========================================
     圆角：柔和分层
     ======================================== */
  --r-xs:   4px;       /* 小元素 */
  --r-sm:   8px;       /* 按钮 */
  --r-md:   14px;      /* 卡片 */
  --r-lg:   20px;      /* 大容器 */
  --r-full: 9999px;    /* 完全圆角（搜索栏等） */

  /* ========================================
     间距：大量留白
     ======================================== */
  --sp-xxs:     4px;
  --sp-xs:      8px;
  --sp-sm:      12px;
  --sp-md:      16px;
  --sp-base:    20px;
  --sp-lg:      24px;
  --sp-xl:      32px;
  --sp-xxl:     48px;
  --sp-section: 64px;

  /* ========================================
     阴影：统一黑色系（Airbnb 单一 shadow tier）
     ======================================== */
  --shadow-sm:  rgba(0,0,0,0.04) 0 1px 4px;
  --shadow:     rgba(0,0,0,0.04) 0 2px 8px, rgba(0,0,0,0.06) 0 1px 2px;
  --shadow-lg:  rgba(0,0,0,0.08) 0 4px 16px, rgba(0,0,0,0.04) 0 1px 4px;
  --shadow-gold: rgba(184,134,11,0.12) 0 4px 16px;

  /* ========================================
     过渡与缓动：克制动效
     ======================================== */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:      150ms;
  --t:           250ms;
  --t-slow:      400ms;

  /* ========================================
     布局
     ======================================== */
  --maxw:    1140px;
  --header-h: 68px;

  /* ========================================
     向后兼容别名（v3 → v4）
     旧变量名映射到新值，确保其他 CSS 文件无缝过渡
     ======================================== */

  /* --- 背景 --- */
  --bg:          var(--canvas);
  --bg-warm:     var(--surface-strong);
  --bg-card:     var(--canvas);
  --bg-overlay:  rgba(255, 255, 255, 0.94);

  /* --- 边框/分隔线 --- */
  --rule:        var(--hairline);
  --rule-soft:   var(--hairline-soft);

  /* --- 金色变体 --- */
  --gold-deep:   var(--gold-active);

  /* --- 文字灰阶 --- */
  --muted-dim:   var(--muted-soft);

  /* --- 语义别名 --- */
  --accent:      var(--gold);
  --accent2:     var(--terra);
  --accent-glow: var(--gold-glow);
  --danger:      var(--error);

  /* --- 阴影别名 --- */
  --shadow-xs:    var(--shadow-sm);
  --shadow-terra: var(--shadow);

  /* --- 圆角别名 --- */
  --r:    var(--r-sm);     /* 旧按钮圆角 → 新 8px */
  --r-xl: var(--r-lg);     /* 旧大圆角 → 新 20px */

  /* --- 间距别名（保持 rem 值以精确兼容旧代码） --- */
  --sp-1:  0.25rem;        /*  4px */
  --sp-2:  0.5rem;         /*  8px */
  --sp-3:  0.75rem;        /* 12px */
  --sp-4:  1rem;           /* 16px */
  --sp-5:  1.5rem;         /* 24px */
  --sp-6:  2rem;           /* 32px */
  --sp-8:  3rem;           /* 48px */
  --sp-10: 4rem;           /* 64px */
  --sp-12: 6rem;           /* 96px */

  /* --- 缓动与时长别名 --- */
  --ease-soft: var(--ease);
  --dur-fast:  var(--t-fast);
  --dur:       var(--t);
  --dur-slow:  var(--t-slow);
}

/* ============================================
   全局重置
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 17px;          /* 适老化基础字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--canvas);   /* 纯白背景，不再用暖色底 */
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  text-wrap: pretty;
  /* 无渐变背景 — Airbnb 风格保持纯色 */
}

/* ============================================
   噪点纹理已移除
   Airbnb 设计不需要 noise overlay
   ============================================ */

/* ============================================
   标题系统：适度字重 + balance 换行
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h2 {
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.015em;
}

h3 {
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

h4, h5, h6 {
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover {
  color: var(--gold-active);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--ink);
}

ul, ol { list-style: none; }

::selection {
  background: var(--gold-soft);
  color: var(--ink);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb {
  background: var(--muted-soft);
  border-radius: var(--r-full);
  border: 2px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }

/* ============================================
   :focus-visible 金色焦点环（适老化高对比）
   ============================================ */
:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 6px var(--gold-glow);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--gold-glow);
}

/* ============================================
   工具类
   ============================================ */
.text-gold { color: var(--gold); }
.text-terra { color: var(--terra); }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-serif { font-family: var(--font-serif); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

mark.key {
  background: var(--gold-soft);
  color: var(--ink);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}

/* ============================================
   动画关键帧（克制的入场效果）
   ============================================ */

/* --- 基础入场 --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- 交错入场（Staggered Entry） --- */
@keyframes staggerInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes staggerInRight {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- 弹簧弹跳（Spring Bounce） — 克制版 --- */
@keyframes springBounce {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes springPop {
  0% { transform: scale(0.95); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* --- 磁吸悬停提示（Magnetic Hover Hint） --- */
@keyframes magneticNudge {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-2px) translateX(1px); }
  50% { transform: translateY(-1px) translateX(-1px); }
  75% { transform: translateY(-1px) translateX(1px); }
}
@keyframes magneticPull {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--mx, 2px), var(--my, -2px)) scale(1.01); }
}

/* --- 脉冲与呼吸 --- */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.75; }
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--gold-glow);
  }
  50% {
    transform: scale(1.01);
    box-shadow: 0 0 0 6px transparent;
  }
}

/* --- 闪光与加载 --- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wave {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* --- 浮动与发光 --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 16px rgba(184, 134, 11, 0.15); }
  50% { box-shadow: 0 0 32px rgba(184, 134, 11, 0.25); }
}

/* --- 绘制与计数 --- */
@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 温暖入场（克制的信件展开感） --- */
@keyframes letterOpen {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 柔和倾斜入场 --- */
@keyframes tiltIn {
  from {
    opacity: 0;
    transform: translateY(16px) rotate(-0.8deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

/* ============================================
   滚动入场动画
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-spring);
}
.reveal-stagger.active {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }
.delay-6 { transition-delay: 0.48s; }

/* ============================================
   动效工具类
   ============================================ */
.anim-fadeInUp { animation: fadeInUp 0.6s var(--ease) both; }
.anim-scaleIn { animation: scaleIn 0.4s var(--ease) both; }
.anim-springBounce { animation: springBounce 0.5s var(--ease-spring) both; }
.anim-letterOpen { animation: letterOpen 0.6s var(--ease) both; }
.anim-tiltIn { animation: tiltIn 0.5s var(--ease) both; }
.anim-float { animation: float 3s var(--ease) ease-in-out infinite; }

/* ============================================
   prefers-reduced-motion 无障碍支持
   老年用户或偏好减少动效时禁用所有动画
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

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

  .anim-fadeInUp,
  .anim-scaleIn,
  .anim-springBounce,
  .anim-letterOpen,
  .anim-tiltIn,
  .anim-float {
    animation: none;
  }

  /* 保留焦点环可见 */
  :focus-visible {
    transition: none;
  }
}

/* ============================================
   高对比度适配（适老化增强）
   ============================================ */
@media (prefers-contrast: more) {
  :root {
    --ink:        #000000;
    --ink-soft:   #1a1a1a;
    --muted:      #4a4a4a;
    --muted-soft: #6a6a6a;
    --gold:       #8a6508;
    --hairline:   #c0bdb9;
  }
}