/* ═══════════════════════════════════════════
   VELA NOVA — base.css
   变量 · Reset · 字体 · 动画基础
   ═══════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

/* ── 设计Token ── */
:root {
  /* 颜色 */
  --night:        #0c1a11;
  --forest:       #142010;
  --moss:         #1e3020;
  --canopy:       #2a4232;
  --leaf:         #3d6b4f;
  --sage:         #5a9070;
  --mist:         #8fbfa0;
  --dew:          #c4e0ce;
  --gold:         #c4a35a;
  --gold-dim:     #8a6e35;
  --gold-pale:    rgba(196,163,90,0.12);
  --terra:        #c4613a;
  --white:        #f5f2ed;
  --white2:       #d8d4cc;
  --white3:       #a09a90;
  --white4:       #5a5650;

  /* Glass效果 */
  --glass:        rgba(255,255,255,0.04);
  --glass2:       rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.09);
  --glass-border2:rgba(255,255,255,0.15);
  --gold-border:  rgba(196,163,90,0.2);

  /* 字体 */
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Inter', system-ui, sans-serif;

  /* 布局 */
  --sidebar:  188px;
  --rp:       260px;
  --topbar-h: 52px;

  /* ── 间距系统（升级：呼吸感）── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  28px;
  --space-lg:  48px;
  --space-xl:  72px;
  --space-2xl: 96px;

  /* ── 圆角 ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill:999px;

  /* ── 过渡 ── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.15s;
  --dur-base:   0.22s;
  --dur-slow:   0.38s;
}

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

/* ── 全局基础 ── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* 必须与body同时设置才能真正禁止横向滚动 */
}

body {
  font-family: var(--fb);
  background: var(--night);
  color: var(--white);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden; /* 防止手机端横向溢出 */
}

/* ── 滚动条（全局细滚动条）── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--glass-border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--white4); }

/* ── 选中文本颜色 ── */
::selection {
  background: rgba(196,163,90,0.25);
  color: var(--white);
}

/* ── 链接基础 ── */
a { color: inherit; text-decoration: none; }

/* ── 图片 ── */
img { max-width: 100%; display: block; }

/* ── 输入框基础 ── */
button, input, select, textarea {
  font-family: var(--fb);
}

/* ══════════════════════════════════════════
   六级字体层级系统（专业感核心）
   ══════════════════════════════════════════ */

/* Level 1 — Display：Landing Hero专用，震撼感 */
.t-display {
  font-family: var(--fd);
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--white);
}
.t-display em {
  font-style: italic;
  color: var(--gold);
}

/* Level 2 — H1：页面主标题 */
.t-h1 {
  font-family: var(--fd);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--white);
}

/* Level 3 — H2：章节标题 */
.t-h2 {
  font-family: var(--fd);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--white);
}

/* Level 4 — Eyebrow：小标签，放标题上方 */
.t-eyebrow {
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}
.t-eyebrow.sage { color: var(--sage); }

/* Level 5 — Body：正文 */
.t-body {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--white3);
}

/* Level 6 — Caption：注释/元信息 */
.t-caption {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white4);
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════
   动画系统（微交互基础）
   ══════════════════════════════════════════ */

/* Panel切换淡入 */
@keyframes velaFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 数字/内容出现 */
@keyframes velaRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 星星闪烁 */
@keyframes twinkle {
  0%, 100% { opacity: var(--a1, 0.2); }
  50%       { opacity: var(--a2, 0.8); }
}

/* 星座脉冲光晕 */
@keyframes signPulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(196,163,90,0.5)) drop-shadow(0 0 40px rgba(196,163,90,0.25)); }
  50%       { filter: drop-shadow(0 0 32px rgba(196,163,90,0.8)) drop-shadow(0 0 64px rgba(196,163,90,0.4)); }
}

/* 旋转（加载中）*/
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 骨架屏shimmer */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 骨架屏组件 ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass) 25%,
    var(--glass2) 50%,
    var(--glass) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── 减少动效（无障碍）── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ 隐藏Microsoft Clarity注入的feedback按钮 ══ */
#clarity-widget,
[class*="clarity"],
[id*="clarity"],
iframe[src*="clarity"],
div[style*="position: fixed"][style*="right: 0"],
div[style*="position:fixed"][style*="right:0"] {
  display: none !important;
}