/* =========================================================================
   NOVAYARD — 00 / SYSTEM
   设计令牌 · 重置 · 排版 · 工具类 · 可访问性基线
   ========================================================================= */

/* ---------- 字体（本地内嵌，无运行时外链） ---------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../../vendor/fonts/SpaceGrotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../../vendor/fonts/JetBrainsMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- 层级：背景 / 结构 / 内容 / 强调 / 能量 / 警示 ---------- */
  --void-0: #03050a;      /* 最深处，宇宙背景 */
  --void-1: #060a11;
  --void-2: #0a1018;
  --void-3: #0e151f;

  --panel: rgba(13, 20, 30, 0.56);
  --panel-solid: #0a111a;
  --glass-hi: rgba(255, 255, 255, 0.055);

  --line: rgba(158, 190, 220, 0.11);
  --line-mid: rgba(158, 190, 220, 0.2);
  --line-hi: rgba(158, 190, 220, 0.34);

  /* ---------- 文本 ---------- */
  --txt-1: #dfe8f2;
  --txt-2: #8e9db1;
  --txt-3: #5c6b7e;
  --txt-4: #3e4b5c;
  --white: #f4f8fc;
  --titanium: #c4d0dd;

  /* ---------- 能量色（克制使用） ---------- */
  --blue: #3d7bff;
  --blue-dim: #2a4f9e;
  --cyan: #2ee6c8;
  --cyan-dim: #1a7d70;
  --violet: #8a6bff;
  --amber: #ffb05c;
  --red: #ff5e6c;

  --glow-cyan: 0 0 36px rgba(46, 230, 200, 0.28);
  --glow-blue: 0 0 48px rgba(61, 123, 255, 0.24);

  /* ---------- 排版 ---------- */
  --font-display: "Space Grotesk", "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-hero: clamp(2.55rem, 6.9vw, 6.6rem);
  --t-h2: clamp(1.95rem, 3.9vw, 3.7rem);
  --t-h3: clamp(1.18rem, 1.7vw, 1.55rem);
  --t-lede: clamp(0.95rem, 1.15vw, 1.1rem);
  --t-body: clamp(0.9rem, 0.94vw, 1rem);
  --t-mono: 0.688rem;
  --t-mono-lg: 0.78rem;

  /* ---------- 布局 ---------- */
  --wrap: 1560px;
  --gutter: clamp(1.15rem, 4.4vw, 5.2rem);
  --sec-y: clamp(5.5rem, 11vw, 11rem);
  --nav-h: 74px;

  /* ---------- 动效 ---------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 0.22s;
  --d-mid: 0.5s;
  --d-slow: 0.9s;

  --z-cursor: 90;
  --z-nav: 60;
  --z-boot: 100;
}

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: #24303f var(--void-0);
}

body {
  background: var(--void-0);
  color: var(--txt-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.72;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked,
body.is-booting { overflow: hidden; }

/* 锚点定位避开固定导航 */
[id] { scroll-margin-top: 84px; }

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
li { list-style: none; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.08; letter-spacing: -0.018em; }

::selection { background: rgba(46, 230, 200, 0.24); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--void-0); }
::-webkit-scrollbar-thumb {
  background: #1e2937;
  border-radius: 99px;
  border: 2px solid var(--void-0);
}
::-webkit-scrollbar-thumb:hover { background: #2c3a4c; }

/* ---------- 排版工具 ---------- */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-mono);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1.5;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.14;
}

.lede {
  color: var(--txt-2);
  font-size: var(--t-lede);
  line-height: 1.85;
  max-width: 46ch;
}

.is-energy {
  background: linear-gradient(96deg, var(--cyan) 0%, #7fd4ff 42%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dim { color: var(--txt-3); }

/* ---------- 布局工具 ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 章节头（贯穿全站的“技术图纸”标尺） ---------- */
.sec-head {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: 0 var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto clamp(2.2rem, 4.4vw, 4rem);
  color: var(--txt-3);
}
.sec-head__idx { color: var(--txt-2); white-space: nowrap; }
.sec-head__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-mid), transparent 78%);
  position: relative;
}
.sec-head__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(46, 230, 200, 0.8);
}
.sec-head__meta { white-space: nowrap; }

/* ---------- 章节导语 ---------- */
.sec-intro {
  padding: 0 var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto clamp(2.8rem, 5vw, 4.6rem);
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}
.sec-intro--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
}
.sec-intro--split .lede { justify-self: end; }

/* ---------- 可访问性 ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--cyan);
  color: #02110e;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 0.3s var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); outline: 2px solid #fff; outline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- 滚动揭示 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.95s var(--e-out),
    transform 1.05s var(--e-out);
  transition-delay: calc(var(--rd, 0ms));
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 颗粒 / 环境噪点（全局顶层，极低透明度） ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  body::after { display: none; }
}