/* ============================================================
   李茜私塾官网 · 主样式
   Phase 1 范围：全局基础 + 导航条 + 首屏 Hero
   动效原则（Design-Brief §6.3）：慢而柔、禁弹跳/粒子/光效
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-serif);
  background: var(--paper);
  color: var(--ink-text);
  line-height: 1.9;
  letter-spacing: .05em;
  overflow-x: hidden;
}

/* 宣纸纤维质感：极淡噪点渐变叠加（v1 沿用，透明度 ≤5%） */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(143,132,113,.06), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 90%, rgba(167,85,62,.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(23,63,54,.016) 0 1px, transparent 1px 3px);
}

main { position: relative; z-index: 1; }

/* ============ 导航条 CMP-001 ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 6vw;
  transition: background var(--dur-micro) ease, box-shadow var(--dur-micro) ease;
}
/* 滚动后：透明 → 宣纸底 + 细分割线（JS 加 .nav--scrolled） */
.nav--scrolled {
  background: rgba(232, 225, 211, .95);
  box-shadow: 0 1px 0 var(--border);
  backdrop-filter: blur(8px);
}
.nav__logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
/* 小方印 logo CMP-008 */
.seal-mini {
  width: 32px; height: 32px;
  background: var(--cinnabar);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; line-height: 1.15;
  border-radius: var(--radius-sm);
}
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  color: var(--ink-soft); text-decoration: none;
  font-size: 15px;
  transition: color var(--dur-micro);
}
.nav__links a:hover { color: var(--cinnabar); }
/* 咨询按钮：朱砂描边变体（CMP-003 Secondary 特化） */
.nav__cta {
  border: 1px solid var(--cinnabar);
  color: var(--cinnabar) !important;
  padding: 7px 22px;
  border-radius: var(--radius-sm);
  letter-spacing: .2em;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.nav__cta:hover { background: var(--cinnabar); color: var(--paper) !important; }
/* 移动端：锚点收起，只留咨询按钮 */
@media (max-width: 680px) {
  .nav__links a:not(.nav__cta) { display: none; }
}

/* ============ 首屏 Hero ============ */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh; /* svh：手机地址栏收起时不跳动 */
  display: flex; align-items: center;
  overflow: hidden;
}

/* 背景层：Phase 4 换 <video>，现在是水墨静帧 + 极缓 Ken Burns */
.hero__bg {
  position: absolute; inset: 0;
  z-index: -1;
  background: url("../assets/hero-poster.svg") center / cover no-repeat;
  animation: kenburns 36s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.hero__inner {
  padding: 0 8vw;
  max-width: 900px;
}

.hero__eyebrow {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: .5em;
  margin-bottom: var(--space-md);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.15;
  display: flex; /* 子元素为逐字 span，供 GSAP 逐字升起 */
}
/* 逐字容器：溢出裁切实现"从底部升起"效果 */
.hero__title .char-mask { overflow: hidden; display: inline-block; }
.hero__title .char { display: inline-block; }
.hero__title .dot { color: var(--cinnabar); }

.hero__sub {
  margin-top: var(--space-md);
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 30em;
}

/* 朱砂大印 CMP-008：2×2 四字方印 */
.hero__seal {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  margin-top: var(--space-lg);
  width: 96px; height: 96px;
  padding: 10px;
  border: 3px solid var(--cinnabar);
  color: var(--cinnabar);
  font-size: 26px; font-weight: 700; line-height: 1;
  border-radius: var(--radius-md);
  transform: rotate(-3deg);
  /* 写右上→左下的传统印章字序由 HTML 排列实现 */
}

/* 向下滚动暗示：细金线 + 小字，缓慢呼吸 */
.hero__hint {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--gold);
  font-size: var(--text-caption);
  letter-spacing: .4em;
  writing-mode: vertical-rl;
}
.hero__hint::after {
  content: "";
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

/* ============ 入场初始态（仅 JS 可用时生效，避免无 JS 白屏） ============ */
/* html.js 由内联脚本第一时间打上；无 JS 时以下规则全部不命中，内容直接可见 */
html.js .hero__bg     { opacity: 0; }
html.js .hero__eyebrow,
html.js .hero__sub,
html.js .hero__hint,
html.js .nav          { opacity: 0; }
html.js .hero__title .char { transform: translateY(110%); }
html.js .hero__seal   { opacity: 0; }

/* ============ 无障碍：减少动态效果（§6.3 禁则的降级出口） ============ */
@media (prefers-reduced-motion: reduce) {
  html.js .hero__bg, html.js .hero__eyebrow, html.js .hero__sub,
  html.js .hero__hint, html.js .nav, html.js .hero__seal { opacity: 1; }
  html.js .hero__title .char { transform: none; }
  .hero__bg { animation: none; }
  html { scroll-behavior: auto; }
}