/* =========================================================================
   N8-CAR 基础层：重置、排版、氛围背景、焦点与动效降级
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--statusbar-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- 氛围层：网格 + 双色辉光 + 噪点 ---------- */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.atmos__glow {
  position: absolute; inset: -20% -10% auto -10%; height: 130vh;
  background:
    radial-gradient(48rem 34rem at 14% 6%,  rgba(53, 167, 255, 0.18), transparent 62%),
    radial-gradient(52rem 38rem at 92% 12%, rgba(85, 230, 255, 0.14), transparent 60%),
    radial-gradient(40rem 40rem at 60% 96%, rgba(107, 140, 255, 0.14), transparent 62%);
  filter: blur(6px);
}
.atmos__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(150, 175, 205, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 175, 205, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
}
.atmos__sweep {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 167, 255, 0.6), transparent);
  box-shadow: 0 0 24px 2px rgba(53, 167, 255, 0.28);
  animation: sweep 9s linear infinite;
  opacity: .7;
}
@keyframes sweep {
  0%   { transform: translateY(-8vh); opacity: 0; }
  8%   { opacity: .75; }
  92%  { opacity: .55; }
  100% { transform: translateY(104vh); opacity: 0; }
}
/* SVG feTurbulence 噪点，透明度 4% */
.atmos__grain {
  position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .atmos__sweep { animation: none; opacity: .25; top: 22vh; }
}

/* ---------- 排版 ---------- */
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tr-display); line-height: var(--lh-snug); }
h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0; }
p + p { margin-top: var(--s-4); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 等宽标签：模块编号、字段名、数据 */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.lede { font-size: var(--fs-md); color: var(--c-text-soft); max-width: 62ch; }
.muted { color: var(--c-muted); }
.accent { color: var(--c-accent); }

/* ---------- 焦点可见 ---------- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--c-accent); color: var(--c-on-accent);
  padding: 10px 18px; font-weight: 700; border-radius: var(--r-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---------- 入场序列（错峰） ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal[data-d="1"] { transition-delay: 80ms; }
.reveal[data-d="2"] { transition-delay: 160ms; }
.reveal[data-d="3"] { transition-delay: 240ms; }
.reveal[data-d="4"] { transition-delay: 320ms; }
.reveal[data-d="5"] { transition-delay: 400ms; }

/* 首屏编排：页面加载即播放 */
.enter { opacity: 0; transform: translateY(28px); animation: enterUp var(--dur-scene) var(--ease-out) forwards; }
.enter[data-d="1"] { animation-delay: 60ms; }
.enter[data-d="2"] { animation-delay: 140ms; }
.enter[data-d="3"] { animation-delay: 220ms; }
.enter[data-d="4"] { animation-delay: 300ms; }
.enter[data-d="5"] { animation-delay: 380ms; }
.enter[data-d="6"] { animation-delay: 460ms; }
@keyframes enterUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .enter  { opacity: 1 !important; transform: none !important; animation: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

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

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-void); }
::-webkit-scrollbar-thumb { background: #1b2c44; border: 2px solid var(--c-void); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #2b4468; }