/* ============================================================
   base.css — 归云江湖 · 墨黑描金 设计系统
   全局变量、重置、排版、顶栏、页脚、通用动效
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 墨色背景 */
  --ink-900: #0d0b08;
  --ink-850: #12100b;
  --ink-800: #18140d;
  --ink-700: #221c12;

  /* 鎏金主色 */
  --gold-700: #8a6a30;
  --gold-600: #a07d3c;
  --gold-500: #c8a45c;
  --gold-400: #d8bd7a;
  --gold-300: #e9d29a;

  /* 文字 */
  --paper: #efe7d4;          /* 暖白 */
  --paper-soft: rgba(239, 231, 212, .72);
  --paper-faint: rgba(239, 231, 212, .42);

  /* 描金渐变 */
  --grad-gold: linear-gradient(135deg, #f3e0ab 0%, #c8a45c 42%, #9b7733 100%);

  /* 玻璃 */
  --glass-bg: rgba(18, 15, 10, .62);
  --glass-line: rgba(200, 164, 92, .34);

  /* 阴影与光 */
  --glow-gold: 0 0 28px rgba(200, 164, 92, .35);
  --shadow-lift: 0 18px 50px rgba(0, 0, 0, .55);

  /* 字体栈:标题用宋体古风,正文用黑体 */
  --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;

  --maxw: 1180px;
}

/* ---------- 重置 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;          /* 两屏轻吸附 */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--paper);
  background: var(--ink-900);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, p { margin: 0; }

/* 自定义滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
  background: var(--gold-700);
  border-radius: 10px;
  border: 2px solid var(--ink-900);
}

/* 文字选中色 */
::selection { background: rgba(200, 164, 92, .35); color: #fff; }

/* ---------- 通用工具 ---------- */
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 入场动画:配合 main.js 的 IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 顶部导航 ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 48px);
  transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease;
}
.topbar.is-scrolled {
  background: rgba(13, 11, 8, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-line);
  padding-top: 12px;
  padding-bottom: 12px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar__seal {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink-900);
  background: var(--grad-gold);
  border-radius: 9px;
  box-shadow: var(--glow-gold);
}
.topbar__name {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--paper);
}
.topbar__name i {
  display: block;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-400);
}

.topbar__nav {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
  font-size: 15px;
  letter-spacing: 1px;
}
.topbar__nav a {
  position: relative;
  padding: 4px 2px;
  color: var(--paper-soft);
  transition: color .3s;
}
.topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--grad-gold);
  transition: width .3s ease;
}
.topbar__nav a:hover { color: var(--gold-300); }
.topbar__nav a:hover::after { width: 100%; }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--ink-900);
  border-top: 1px solid rgba(200, 164, 92, .18);
  text-align: center;
  padding: 28px 20px 34px;
  font-size: 13px;
  color: var(--paper-faint);
  letter-spacing: .5px;
}
.site-footer__tip {
  margin-top: 8px;
  font-size: 12px;
  opacity: .8;
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
}