/* ============================================================
   景山庭院 JINGSHAN COURTYARD — 品牌设计令牌
   Brand Design Tokens v2.0 — 独立设计师风格升级
   设计理念: 不对称 · 留白 · 肌理对比 · 时间的痕迹
   ============================================================ */

/* ------------------------------------------------------------
   英文标题字体 Playfair Display — 自托管 latin 子集（约 134KB / 4 字重）
   不再依赖 Google Fonts，中国大陆可直连加载，零外部请求
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/playfair-norm-400.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/playfair-norm-500.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/playfair-norm-600.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/playfair-ital-400.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;
}

:root {
  /* 主色 Primary */
  --ink:          #1a1a1a;   /* 炭黑 — 主文字/标题 (更深更有张力) */
  --rice-paper:   #f5f0e1;   /* 宣纸白 — 页面背景 */

  /* 点缀色 Accent */
  --amber:        #d4a056;   /* 暖琥珀 — 灯笼/CTA按钮/高亮 (克制使用) */
  --gold:         #c89a3f;   /* 金茶色 — 装饰线/次要按钮 */
  --seal-red:     #bf3636;   /* 印章红 — 装饰印/品牌印记 */
  --patina:       #7d9b76;   /* 铜绿 — 苔藓氧化感，山间自然，新增 */
  --patina-dark:  #5a7a54;   /* 深铜绿 — hover 态 */

  /* 中性色 Neutral */
  --deep-ink:     #0d1117;   /* 深墨 — 极致黑色标题 */
  --dark-ink:     #1e242c;   /* 浓墨 — 正文 */
  --mid-ink:      #5a6674;   /* 淡墨 — 辅助文字 (WCAG AA ≥4.5:1) */
  --smoke:        #7d8895;   /* 烟灰 — 占位文字 */
  --cloud:        #ece8db;   /* 云白 — 卡片背景 */
  --snow:         #faf9f5;   /* 雪白 — 浅底 */
  --warm-stone:   #e8e0cf;   /* 暖石 — 新中间色，增加层次 */

  /* 别名 (兼容既有代码 — 映射到规范色) */
  --color-ink:           var(--ink);
  --color-paper:         var(--rice-paper);
  --color-amber:         var(--amber);
  --color-gold:          var(--gold);
  --color-bronze:        var(--gold);
  --color-seal:          var(--seal-red);
  --color-patina:        var(--patina);
  --color-ink-deep:      var(--deep-ink);
  --color-ink-dark:      var(--dark-ink);
  --color-ink-light:     var(--mid-ink);
  --color-ink-mist:      var(--smoke);
  --color-paper-cloud:   var(--cloud);
  --color-paper-snow:    var(--snow);
  --color-text:          var(--ink);
  --color-text-secondary: var(--mid-ink);
  --color-text-inverse:  var(--snow);
  --color-border:        rgba(26,26,26,0.08);
  --color-shadow:        rgba(13,17,23,0.05);
  --color-surface-alt:   var(--cloud);

  /* 字体系统 Typography
     中文走系统字体栈：零字体下载、无闪烁、中国大陆直连无障碍
     macOS → 宋体-简 / 苹方；Windows → 宋体 / 微软雅黑；Linux → 思源 */
  --font-serif:     'Songti SC', 'STSong', 'Source Han Serif SC', 'Noto Serif CJK SC', 'SimSun', 'NSimSun', serif;
  --font-sans:      'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
  --font-en-serif:  'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-en-sans:   'Georgia', 'Times New Roman', serif;
  --font-body:      var(--font-sans);
  --font-calligraphy: 'STKaiti', 'KaiTi', 'Kaiti SC', 'Songti SC', serif;  /* 手写感字体 */

  /* 间距系统 Spacing — 设计师版增加更大留白 */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;   /* 极大留白 — 设计师叙事专用 */
  --space-6xl: 160px;

  /* 圆角 — 设计师版：更锐利 */
  --radius-sm:  1px;
  --radius-md:  2px;
  --radius-lg:  2px;
  --radius-xl:  2px;
  --radius-full: 9999px;  /* 圆形元素 */

  /* 设计感装饰 */
  --border-rough: 1px dashed var(--mid-ink);         /* 粗糙虚线边框 */
  --border-ink: 1px solid rgba(26,26,26,0.12);       /* 墨水感细线 */
  --texture-noise: 0.03;                               /* 噪点纹理强度 */

  /* 过渡动效 Transitions — 呼吸感曲线体系 */
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);      /* 平滑自然减速 */
  --ease-out-quint:   cubic-bezier(0.22, 1, 0.36, 1);     /* 略果断 */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);      /* 自信利落 */
  --ease-in-quart:    cubic-bezier(0.5, 0, 0.75, 0);      /* 离开加速 */
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);    /* 往返对称 */

  --transition-fast:   200ms var(--ease-out-quart);
  --transition-smooth: 350ms var(--ease-out-quart);
  --transition-breath: 400ms var(--ease-out-quart);        /* 呼吸感专属 */
  --transition-slow:   600ms var(--ease-out-quart);        /* 慢入慢出 */
  --transition-base:   var(--transition-fast);

  /* 呼吸动画参数 */
  --breath-duration:   3.6s;
  --breath-float:      6px;

  /* 布局 Layout */
  --max-width: 1280px;
}

/* 全局重置 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  line-height: 1.8;
  color-scheme: light;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--rice-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* 宣纸水墨纹理背景 — 双层质感：纤维 + 水墨晕染 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 层1: 纤维噪点 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.34 0 0 0 0 0.30 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
}
/* 层2: 大尺度水墨晕染 (after) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(125,155,118,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(212,160,86,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(55,71,79,0.02) 0%, transparent 50%);
}

/* 容器 */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section { padding: var(--space-4xl) 0; }

/* 标题规范 (字重600) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--deep-ink);
  line-height: 1.3;
}

/* 通用工具类 */
.text-amber { color: var(--amber); }
.text-seal  { color: var(--seal-red); }
.text-patina { color: var(--patina); }
.text-mist  { color: var(--mid-ink); }
.text-ink   { color: var(--ink); }

/* 设计师装饰类 */
.ink-line {
  display: block;
  width: 40px; height: 1px;
  background: var(--amber);
  margin: var(--space-lg) 0;
}
.ink-line-center {
  display: block;
  width: 40px; height: 1px;
  background: var(--amber);
  margin: var(--space-lg) auto;
}
.rough-border {
  border: var(--border-rough);
}
.ink-border {
  border: var(--border-ink);
}

/* 设计注记 — 像展览标签 */
.design-note {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--smoke);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant: small-caps;
}

/* old-style 数字 (不等高) */
.oldstyle-nums {
  font-family: var(--font-en-serif);
  font-variant-numeric: oldstyle-nums;
}

/* 大留白区域 */
.spacer-5xl { height: var(--space-5xl); }
.spacer-6xl { height: var(--space-6xl); }

/* 印章样式 (规范要求) */
.seal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border: 1.5px solid var(--seal-red);
  color: var(--seal-red);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.6rem;
  background: transparent;
  letter-spacing: 0;
  line-height: 1;
  flex-shrink: 0;
}
.seal-mark-sm { width: 36px; height: 36px; font-size: 1.05rem; }
.seal-mark-lg { width: 80px; height: 80px; font-size: 2.2rem; }

/* 按钮 */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-2xl);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  text-align: center;
}
.btn-primary {
  background: var(--amber);
  color: var(--snow);
}
.btn-primary:hover { background: var(--gold); }
.btn-outline {
  background: transparent;
  color: var(--amber);
  border: 1.5px solid var(--amber);
}
.btn-outline:hover { background: var(--amber); color: var(--snow); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { color: var(--amber); }

/* 链接文字 */
.link-amber { color: var(--amber); transition: color var(--transition-fast); }
.link-amber:hover { color: var(--gold); }

/* 响应式断点参考
   - mobile: ≤640px
   - tablet: 641-1024px
   - desktop: ≥1025px
   - wide: ≥1280px
*/

/* 可访问性 */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ========== 呼吸感动画关键帧 ========== */
/* 柔和呼吸 — 轻微缩放 */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* 浮动呼吸 — 上下悬浮 */
@keyframes breathe-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--breath-float, 6px)); }
}

/* 光晕呼吸 — 透明度脉冲 */
@keyframes breathe-glow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* 渐进显现 — 从下方升起 */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 轻柔显现 — 原地淡入 */
@keyframes gentle-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* 呼吸虚线 — 用于装饰边框 */
@keyframes breathe-dash {
  0%, 100% { stroke-dashoffset: 0; }
  50%      { stroke-dashoffset: 24; }
}

/* 设计师级动画 */

/* 水墨晕开 — 从模糊到清晰 */
@keyframes ink-reveal {
  from { filter: blur(8px); opacity: 0; transform: scale(1.03); }
  to   { filter: blur(0); opacity: 1; transform: scale(1); }
}

/* 水平揭示 — 从左到右展开 (clip-path) */
@keyframes reveal-horizontal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 垂直揭示 — 从下到上 */
@keyframes reveal-vertical {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 字间距呼吸 — 缓慢扩展收缩 */
@keyframes letter-breathe {
  0%, 100% { letter-spacing: 0.2em; }
  50%      { letter-spacing: 0.28em; }
}

/* 笔触划线 — 从左到右画出下划线 */
@keyframes brush-stroke {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* 去饱和到彩色 — 记忆到当下的隐喻 */
@keyframes desaturate-to-color {
  from { filter: grayscale(0.6) brightness(0.9); }
  to   { filter: grayscale(0) brightness(1); }
}

/* 浮动不对称 — 轻微左右摇晃 */
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(3px, -2px); }
  75%      { transform: translate(-3px, 2px); }
}

/* 全局呼吸类 — 应用于任意元素 */
.breath {
  animation: breathe var(--breath-duration, 3.6s) var(--ease-in-out-quart) infinite;
}
.breath-float {
  animation: breathe-float var(--breath-duration, 3.6s) var(--ease-in-out-quart) infinite;
}
.breath-glow {
  animation: breathe-glow var(--breath-duration, 3.6s) var(--ease-in-out-quart) infinite;
}

/* 入场动画延迟变量 — 配合 style="--i: N" 使用 */
.rise-in {
  opacity: 0;
  animation: rise-in 0.7s var(--ease-out-quart) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.gentle-in {
  opacity: 0;
  animation: gentle-in 0.6s var(--ease-out-quart) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* 滚动驱动 — 由 IntersectionObserver 触发 */
.rise-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart);
}
.rise-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .breath, .breath-float, .breath-glow { animation: none; }
  .rise-in, .gentle-in, .rise-on-scroll { animation: none; opacity: 1; transform: none; }
}