/* ============================================================
   base.css — 重置、排版、可访问性与降级动效
   ============================================================ */

/* --- 轻重置 --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.8;              /* 中文正文行高 ≥1.7 */
  letter-spacing: 0.02em;
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* 展示字通用 */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;        /* 中文展示字距略正 */
}
.latin, .num {
  font-family: var(--font-display-latin);
  font-variant-numeric: tabular-nums;
}

/* --- 容器 --- */
.container {
  width: min(var(--container), 100% - var(--space-5) * 2);
  margin-inline: auto;
}

/* --- 可访问性 --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -100%;
  z-index: 200;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary); color: var(--color-on-dark);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top var(--dur-fast) ease-out;
}
.skip-link:focus { top: 0; }

/* --- 氛围层：颗粒纹理（3-6%，不抢戏） --- */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 90;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 滚动入场（只动 transform/opacity） --- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in {
  opacity: 1; transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
/* 编排：同组子元素错峰 90ms */
.reveal-stagger > * { opacity: 0; transform: translateY(22px); }
.reveal-stagger.in > * {
  opacity: 1; transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal-stagger.in > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger.in > *:nth-child(n+8) { transition-delay: 630ms; }

/* --- 降级：用户偏好减少动效时全部关闭 --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- 语义 --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
::selection { background: var(--color-accent-soft); color: var(--color-primary-deep); }