/* ============================================================
   Nightwatch 官网 v3 - 基础样式
   石墨实底 · 白交互 · 紫金语义光（logo 专属色系，营销页豁免）
   章节调色：html[data-chapter] 驱动 @property 色彩 token 过渡
   ============================================================ */

/* ---------- 品牌字体：与 repo client/app.css 完全一致（GB2312 子集 woff2 两文件）---------- */
@font-face {
  font-family: 'Blue Sky Text SC'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/blue-sky-sc/BlueSkyTextSC-Regular.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Blue Sky Text SC'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/blue-sky-sc/BlueSkyTextSC-Demibold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Blue Sky Text SC'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/blue-sky-sc/BlueSkyTextSC-Demibold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Blue Sky Text SC'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/blue-sky-sc/BlueSkyTextSC-Demibold.subset.woff2') format('woff2');
}

/* ---------- 色彩 token ---------- */
:root {
  --font-display: "Blue Sky Text SC", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-brand: "Blue Sky Text SC", "PingFang SC", system-ui, sans-serif;
  --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* 石墨四级分层，与 dashboard tokens.css 的 --surface-* 逐级对齐 */
  --bg:       #141416;   /* 章节可变，基准 = --surface-chart */
  --bg-soft:  #1a1a1d;   /* = --surface-solid */
  --bg-panel: #1a1a1d;
  --bg-elev:  #232327;   /* = --surface-panel */
  --ink:      #f4f8fb;
  --ink-soft: rgba(244,248,251,0.72);
  --muted:    rgba(244,248,251,0.5);
  --faint:    rgba(244,248,251,0.3);
  --line:     rgba(244,248,251,0.1);
  --line-soft:rgba(244,248,251,0.05);

  --accent:      #a89bff; /* 章节可变：当前章节的语义光 */
  --accent-soft: rgba(168,155,255,0.14);
  --glow:        rgba(100,80,255,0.35);

  /* 品牌恒定色 = repo 实际数据语义色（tokens.css）：金紫 Gamma + 红绿涨跌 */
  --purple:   #6450ff;  --purple-ink: #a89bff;  /* = --vex-neg */
  --gold:     #ffd200;  --gold-ink:   #ffe27a;  /* = --vex-pos */
  --up:       #00ffaa;  --up-ink:     #7dffd4;  /* = --call */
  --down:     #ff4d4d;  --down-ink:   #ff9b9b;  /* = --put */
  --mint:     #00ffaa;  /* 兼容旧引用，指向 --call */
  color-scheme: dark;
}

/* 章节色 token 注册为可过渡属性：换章时背景/语义光一起丝滑变色 */
@property --bg          { syntax: '<color>'; inherits: true; initial-value: #141416; }
@property --bg-soft     { syntax: '<color>'; inherits: true; initial-value: #1a1a1d; }
@property --bg-panel    { syntax: '<color>'; inherits: true; initial-value: #1a1a1d; }
@property --accent      { syntax: '<color>'; inherits: true; initial-value: #a89bff; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: rgba(168,155,255,0.14); }
@property --glow        { syntax: '<color>'; inherits: true; initial-value: rgba(100,80,255,0.35); }
:root {
  transition: --bg 1s ease-in-out, --bg-soft 1s ease-in-out, --bg-panel 1s ease-in-out,
              --accent 1s ease-in-out, --accent-soft 1s ease-in-out, --glow 1s ease-in-out;
}
:root.chapter-cut { transition: none; } /* 锚点长跳时硬切，防频闪 */
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

/* ---------- 章节调色板 ----------
   只使用 repo 数据语义四色：紫 #6450ff / 金 #ffd200（Gamma）+ 绿 #00ffaa / 红 #ff4d4d（涨跌）
   底色统一从 dashboard 石墨 #141416 起步，各章只做同色系微染 */
:root[data-chapter="thesis"]    { --bg:#161322; --bg-soft:#1d1830; --bg-panel:#1d1830; --accent:#a89bff; --accent-soft:rgba(100,80,255,0.15); --glow:rgba(100,80,255,0.4); }
:root[data-chapter="chart"]     { --bg:#171429; --bg-soft:#1e1936; --bg-panel:#201a38; --accent:#a89bff; --accent-soft:rgba(100,80,255,0.16); --glow:rgba(100,80,255,0.45); }
:root[data-chapter="heatmap"]   { --bg:#1a1710; --bg-soft:#211d12; --bg-panel:#241f13; --accent:#ffd200; --accent-soft:rgba(255,210,0,0.12); --glow:rgba(255,210,0,0.28); }
:root[data-chapter="research"]  { --bg:#121a16; --bg-soft:#16211b; --bg-panel:#18241e; --accent:#00ffaa; --accent-soft:rgba(0,255,170,0.1); --glow:rgba(0,255,170,0.22); }
:root[data-chapter="versus"]    { --bg:#1b1414; --bg-soft:#221718; --bg-panel:#241a1b; --accent:#ff4d4d; --accent-soft:rgba(255,77,77,0.1); --glow:rgba(255,77,77,0.22); }
:root[data-chapter="community"] { --bg:#121a16; --bg-soft:#16211b; --bg-panel:#18241e; --accent:#00ffaa; --accent-soft:rgba(0,255,170,0.1); --glow:rgba(0,255,170,0.22); }
:root[data-chapter="tools"],
:root[data-chapter="foundation"],
:root[data-chapter="api"],
:root[data-chapter="pricing"],
:root[data-chapter="faq"]       { --bg:#141416; --bg-soft:#1a1a1d; --bg-panel:#1a1a1d; --accent:#f4f8fb; --accent-soft:rgba(244,248,251,0.1); --glow:rgba(244,248,251,0.16); }

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Desktop story mode: chapters settle into a deliberate full-screen frame
   after a scroll gesture, rather than leaving the next frame half exposed. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
}
body {
  /* 氛围渐变全部由 .page-atmosphere（不透明、fixed）承担；body 上的
     background-attachment:fixed 渐变永远被盖住看不见，却让每帧滚动都重绘背景 */
  margin: 0; background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  transition: background-color 1s ease-in-out;
}
main, footer { position: relative; z-index: 1; }
.page-atmosphere { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:
  radial-gradient(72rem 56rem at -14% 18%, rgba(255,210,0,.09), transparent 74%),
  radial-gradient(82rem 64rem at 108% 10%, rgba(112,92,255,.22), transparent 71%),
  radial-gradient(74rem 66rem at 48% 114%, rgba(78,61,166,.19), transparent 76%),
  radial-gradient(38rem 30rem at 54% 38%, rgba(244,248,251,.025), transparent 76%),
  linear-gradient(135deg, #1d1b23 0%, #17161e 46%, #1c1923 100%); }
.page-atmosphere::before { content:""; position:absolute; inset:-18%; opacity:.78; background:
  radial-gradient(ellipse 32% 28% at 16% 28%, rgba(255,210,0,.16) 0%, rgba(255,210,0,.055) 38%, transparent 72%),
  radial-gradient(ellipse 35% 33% at 82% 22%, rgba(121,99,255,.27) 0%, rgba(100,80,255,.09) 45%, transparent 74%),
  radial-gradient(ellipse 29% 34% at 52% 82%, rgba(137,109,255,.21) 0%, transparent 72%),
  radial-gradient(ellipse 23% 26% at 64% 52%, rgba(244,248,251,.075) 0%, transparent 74%),
  linear-gradient(118deg, transparent 36%, rgba(244,248,251,.06) 49%, transparent 61%),
  conic-gradient(from 216deg at 50% 45%, transparent 0 13%, rgba(187,177,255,.06) 16%, transparent 23% 49%, rgba(255,220,112,.04) 54%, transparent 60%);
  /* blur 固定不进 keyframes：动画只跑 transform（合成器搞定），
     动 filter 会让整个全屏图层每帧重新光栅化，是全页最大的卡顿源 */
  filter:blur(46px) saturate(1.16); will-change:transform;
  animation:liquid-drift 11.5s cubic-bezier(.42,0,.22,1) infinite alternate; }
.page-atmosphere::after { content:""; position:absolute; z-index:0; left:-22%; right:-22%; top:43%; height:94%; opacity:.34;
  background-image:
    linear-gradient(rgba(208,214,238,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(208,214,238,.16) 1px, transparent 1px);
  background-size:88px 88px;
  transform:perspective(900px) rotateX(57deg) scale(1.28);
  transform-origin:center bottom;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.48) 48%,transparent 82%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.48) 48%,transparent 82%); }
@keyframes liquid-drift {
  0% { transform:translate3d(-9%,-6%,0) scale(1.02) rotate(-9deg); }
  46% { transform:translate3d(10%,7%,0) scale(1.16) rotate(5deg); }
  100% { transform:translate3d(-4%,11%,0) scale(1.07) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) { .page-atmosphere::before { animation:none; } }
:root.chapter-cut body { transition: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin: 0; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.kicker {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.32em;
  color: var(--accent); text-transform: uppercase; display: flex; align-items: center; gap: 10px;
}
.kicker::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; margin-top: 18px; }
.lede { color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.14rem); margin-top: 16px; max-width: 46ch; }

/* ---------- 入场 reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .1s; } .reveal[data-d="2"] { transition-delay: .2s; } .reveal[data-d="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- 导航（玻璃浮动，营销页豁免件）---------- */
.nav {
  position: fixed; inset: 18px 0 auto; z-index: 50;
  width: min(1180px, calc(100% - 32px)); margin-inline: auto;
  display: flex; align-items: center; gap: 26px;
  padding: 10px 12px 10px 18px; border-radius: 18px;
  border: 1px solid var(--line-soft);
  background: rgba(15,15,18,0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  transition: background .4s ease, box-shadow .4s ease;
}
.nav[data-stuck="true"] { background: rgba(13,13,16,0.78); box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-brand); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.02em; }
.nav__brand img { width: 30px; height: 30px; }
.nav__brand small { font-weight: 500; color: var(--muted); font-size: 0.8rem; margin-left: 2px; }
.nav__links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav__links a.navlink { font-size: 0.92rem; color: var(--ink-soft); position: relative; padding: 4px 0; white-space: nowrap; transition: color .2s ease; }
.nav__links a.navlink:hover { color: var(--ink); }
.nav__links a.navlink::after { content:""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: var(--accent); transition: right .28s ease; }
.nav__links a.navlink:hover::after { right: 0; }
.nav__links a.nav__cta {
  padding: 9px 20px; border-radius: 12px; background: var(--ink); color: #0b0b0d;
  font-weight: 600; font-size: 0.92rem; transition: transform .15s ease, box-shadow .25s ease;
}
.nav__links a.nav__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(244,248,251,0.25); }
@media (max-width: 860px) { .nav { gap: 12px; } .nav__links { gap: 8px; } .nav__links a.navlink { display: none; } }
@media (max-width: 540px) { .nav { width: calc(100% - 20px); inset: 10px 0 auto; padding: 8px 9px 8px 12px; } .nav__brand { gap: 7px; font-size: .92rem; } .nav__brand img { width: 26px; height: 26px; } .nav__brand small { display:none; } .nav__links a.nav__cta { padding: 8px 10px; font-size: .78rem; } }

/* ---------- 流光按钮（复刻现站 .glow-btn，逐字段对齐）---------- */
.glow-btn {
  position: relative; display: inline-flex; padding: 2px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 20px 4px rgba(16,185,129,0.15), 0 0 40px 8px rgba(59,130,246,0.1), 0 0 60px 12px rgba(168,85,247,0.08);
}
.glow-btn::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 0;
  width: 200%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: conic-gradient(#10b981, #3b82f6, #a855f7, #ec4899, #f59e0b, #10b981);
  animation: glow-spin 3s linear infinite;
}
@keyframes glow-spin { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }
.glow-btn-inner {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px;
  padding: 15px 38px; border-radius: 12px; background: #f0fdf4; color: #0a0f0d;
  font-weight: 600; font-size: 1rem; transition: background .2s ease;
}
.glow-btn-inner:hover { background: #ffffff; }
.glow-btn--sm .glow-btn-inner { padding: 10px 24px; font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) { .glow-btn::before { animation: none; } }

/* ---------- Ghost 按钮（复刻现站 .ghost-btn：白 conic 转圈描边 + 白光扫过）----------
   来源 client/src/panels/site/home-page.css，Discord 类 CTA 专用；两款动画主按钮不叠聚光 */
.ghost-btn {
  position: relative; isolation: isolate; display: inline-flex;
  overflow: hidden; border-radius: 14px; padding: 1px;
}
.ghost-btn::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 0;
  width: 200%; aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0.5), transparent 25%,
    rgba(255,255,255,0.5) 50%, transparent 75%, rgba(255,255,255,0.5));
  animation: ghost-border-spin 4s linear infinite;
}
@keyframes ghost-border-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
.ghost-btn-inner {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 13px; overflow: hidden;
  background: rgba(5,10,14,0.92); color: rgba(244,248,251,0.8);
  font-weight: 500; font-size: 0.98rem; transition: background .2s ease, color .2s ease;
}
.ghost-btn-inner::after { /* 白光扫过 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: shimmer-sweep 5s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0% { transform: translateX(-100%); }
  20% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.ghost-btn-inner:hover { background: rgba(5,10,14,0.85); color: #f4f8fb; }
@media (prefers-reduced-motion: reduce) {
  .ghost-btn::before, .ghost-btn-inner::after { animation: none; }
}

/* ---------- 聚光特效（复刻现站 .nw-spot：光标跟随径向高光，显式 opt-in）----------
   来源 client/src/styles/interactions.css；JS 只写 --nw-spot-x/y，渲染全在 CSS */
.nw-spot { position: relative; overflow: hidden; }
.nw-spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; z-index: 0;
  opacity: var(--nw-spot-op, 0);
  background: radial-gradient(
    var(--nw-spot-r, 130px) circle at var(--nw-spot-x, 50%) var(--nw-spot-y, 50%),
    var(--nw-spot-color, rgba(255,255,255,0.2)), transparent 62%);
  transition: opacity 0.18s ease;
}
.nw-spot > * { position: relative; z-index: 1; }
.nw-spot:hover { --nw-spot-op: 1; }
.nw-spot:not(:disabled):active { --nw-spot-r: 74px; --nw-spot-op: 1; }
.nw-spot:disabled:hover,
.nw-spot[aria-disabled='true']:hover { --nw-spot-op: 0; }
.nw-spot.on-light { --nw-spot-color: rgba(6,14,22,0.16); }
@media (prefers-reduced-motion: reduce) { .nw-spot::before { transition: none; } }

/* ---------- 次级按钮 / 章节 CTA 行 ---------- */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 14px; border: 1px solid var(--line);
  color: var(--ink-soft); font-weight: 500; font-size: 0.98rem;
  transition: color .2s ease, border-color .2s ease, background .25s ease;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--faint); background: var(--line-soft); }
.btn-ghost--sm { padding: 10px 22px; font-size: 0.9rem; }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--accent); background: var(--accent-soft);
}
.chip::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---------- 截图 / 图片占位框（后续换真图）---------- */
.ph-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px dashed var(--faint); background:
    repeating-linear-gradient(-45deg, transparent 0 14px, var(--line-soft) 14px 15px), var(--bg-soft);
  display: grid; place-items: center; color: var(--muted);
}
.ph-frame::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 42%, rgba(244,248,251,0.05) 50%, transparent 58%);
  background-size: 240% 100%; animation: ph-shimmer 3.2s ease-in-out infinite;
}
@keyframes ph-shimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .ph-frame::after { animation: none; } }
.ph-frame .ph-label { display: grid; gap: 8px; justify-items: center; padding: 20px; text-align: center; }
.ph-frame .ph-label b { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--ink-soft); font-weight: 500; }
.ph-frame .ph-label span { font-size: 0.78rem; color: var(--faint); }
.ph-frame .ph-ico { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); }
/* 已替换真实截图的框：去掉虚线与扫光，图片铺满 */
.ph-frame--filled { border-style: solid; background: var(--bg-soft); }
.ph-frame--filled::after { content: none; }
.ph-frame--filled img { width: 100%; height: 100%; object-fit: cover; display: block; }