/* ============================================================
   base.css — 重置 / 排版 / 焦点 / 降级动效 / 氛围层
   ============================================================ */

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

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection { background: var(--color-accent); color: var(--color-text); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
strong { font-weight: 500; color: var(--color-text); }
em { font-style: normal; color: var(--color-accent-hi); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* 键盘可达：可见焦点圈 */
:focus-visible {
  outline: 2px solid var(--color-accent-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 氛围层：渐变网格 + 颗粒 ---------- */
.atmosphere,
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56rem 38rem at 88% -12%, rgba(195, 39, 43, 0.10), transparent 62%),
    radial-gradient(48rem 36rem at -10% 110%, rgba(195, 39, 43, 0.06), transparent 58%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.035;
  /* 不用 mix-blend-mode：全屏固定层开混合模式会让整页每帧重新合成，
     在 Windows 上滚动时表现为背景闪动 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, footer, header.nav { position: relative; z-index: 1; }

/* 诊断模式：?calm 关闭所有环境层，用于隔离排查抖动来源 */
html.calm .hero__canvas,
html.calm body::after { display: none !important; }

/* ---------- 通用区块头 ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  max-width: var(--content-max);
  margin: 0 auto var(--space-6);
  padding: 0 var(--space-4);
}
.section-head__num { color: var(--color-accent-hi); font-size: 0.9rem; }
.section-head__label { color: var(--color-muted); }
.section-head__rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  transform: translateY(-4px);
}

/* ---------- 滚动显现（IntersectionObserver 驱动） ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- 降级：减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none !important; }
  .hero__scroll-line { animation: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}