/* ============================================================
   琉星羽 · 基础层：重置、排版、焦点、降级动效、氛围层
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-3); color: var(--color-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(143, 131, 240, 0.4); color: var(--color-text); }

/* 焦点可见性 —— 可访问性底线 */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 数字一律等宽（行情气质） */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 拉丁展示字 */
.latin { font-family: var(--font-latin); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- 氛围层：星云渐变 + 颗粒 ---------- */
.atmosphere::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(143, 131, 240, 0.16), transparent 60%),
    radial-gradient(50rem 42rem at 100% 8%, rgba(217, 180, 92, 0.07), transparent 55%),
    radial-gradient(46rem 36rem at 40% 110%, rgba(143, 131, 240, 0.10), transparent 60%);
}
.grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1; 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");
}

/* ---------- 滚动揭示 ----------
   稳定性原则：.reveal 默认【可见】作为兜底；仅当 JS 激活（html.js）时才先隐藏、
   再由 IntersectionObserver 加 .in 揭示。这样即使脚本异常/被禁用，内容也绝不消失。 */
.reveal { opacity: 1; transform: none; }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }
.reveal:nth-child(6) { transition-delay: 400ms; }

/* ---------- 降级动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 通用布局 ---------- */
.container {
  width: min(1180px, 92vw);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.section { padding-block: var(--space-8); position: relative; }

.section-head { margin-bottom: var(--space-6); max-width: 720px; }
.section-head .kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-gold);
  font-size: var(--fs-small); letter-spacing: 0.32em;
  margin-bottom: var(--space-3);
}
.section-head .kicker::before {
  content: "✦"; font-size: 0.8em;
}
.section-head p { font-size: 1.0625rem; }