/* ============================================================
   Hero 滚动叙事（复刻 docs/hero_demo/index.html）
   ------------------------------------------------------------
   跑道 = 入口段 + 4 条问题轨道段，共 5 个区段。
   分支切换完全由滚动位置驱动，无需任何点击。
   设计原则：明暗即叙事；位移只走 translate/scale/opacity；Canvas 只画星图。
   注意：所有随滚动插值的变量（--ink/--surface 等）由 js/hero_narrative.js
   写到 #hero 元素上，不写 :root，避免污染全站主题变量。
   ============================================================ */

/* 防 sticky 失效：不要用 overflow-x:hidden（会让 body 变成滚动容器）；
   overflow-x:clip 同样裁掉横向溢出，但不创建滚动容器。 */
body{ overflow-x:hidden; }
@supports (overflow:clip){ body{ overflow-x:clip; } }

/* ---------- 跑道 + sticky hero ----------
   600vh = 入口段 60vh + 4 段 × 110vh 的滚动量 + 100vh 视口 */
#runway{ position:relative; height:600vh; }

#hero{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden; z-index:1;
  display:flex; align-items:center; justify-content:center;
  /* 覆盖全站 section 通用样式（index.css section{padding:128px 32px}） */
  padding:0; max-width:none;
  background:#FFFFFF;

  --accent:        #2563EB;
  --accent-deep:   #1D4ED8;
  --accent-light:  #60A5FA;
  --accent-pale:   #93C5FD;
  --ease: cubic-bezier(.22,.61,.36,1);
  /* 以下 5 个由 JS 随滚动插值 */
  --surface:   #FFFFFF;
  --surface-2: #F8FAFC;
  --ink:       #0F172A;
  --ink-soft:  #475569;
  --ink-faint: #94A3B8;
  --line:      #E2E8F0;
}

/* ---------- 图层栈 ---------- */
#hero .lyr{ position:absolute; inset:0; pointer-events:none; }

#hero .bg-base{
  z-index:0;
  background:
    radial-gradient(1100px 620px at 78% 8%,  rgba(37,99,235,.10), transparent 62%),
    radial-gradient(900px 520px at 12% 88%,  rgba(124,58,237,.07), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  /* 不加 transition：变量由 JS 逐帧插值，transition 会每帧重启动画、成倍增加重绘开销 */
}
/* 放大 130% 是为了把 AI 底图右下角自带的「AI生成」水印推出视口 */
#hero .bg-ambient{
  z-index:1;
  background-image:url("../imgs/ambient-deep-space.png");
  background-size:130% auto; background-position:center center;
  opacity:0;
  will-change:opacity;
}
#hero .bg-ambient::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.30) 45%, rgba(15,23,42,.72) 100%);
}
#hero #starfield{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }
#hero .bg-grid{
  z-index:3; opacity:0;
  background-image:
    linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.16) 1px, transparent 1px);
  background-size:64px 64px;
  will-change:opacity, transform;
  -webkit-mask-image:radial-gradient(circle at 50% 55%, #000 0%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 55%, #000 0%, transparent 78%);
}

/* ---------- 内容舞台 ---------- */
#hero .stage{
  position:relative; z-index:10;
  width:min(920px, 88vw);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

#hero h1.hero-title{
  font-size:clamp(34px, 5.4vw, 68px);
  line-height:1.14; font-weight:800; letter-spacing:-.028em;
  color:var(--ink);
  margin:0;
  will-change:opacity, transform;
}
/* i18n 注入的双行标题：第二行走主题色 */
#hero h1.hero-title .title-second-line{ display:block; color:var(--accent); }
/* 输入框：每条轨道开场的「问题入场」位 */
#hero .query{
  margin-top:38px; width:min(600px,86vw);
  background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:16px 18px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 10px 34px rgba(15,23,42,.07), 0 2px 7px rgba(15,23,42,.04);
  will-change:opacity, transform;
  position:relative;
}
#hero .query .ico{
  width:26px; height:26px; border-radius:7px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),#7C3AED);
  display:grid; place-items:center; color:#fff; font-size:13px;
}
#hero .query .txt{
  flex:1; text-align:left; font-size:15px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#hero .query .caret{
  display:inline-block; width:1.5px; height:17px; background:var(--accent);
  vertical-align:-3px; margin-left:2px; animation:hnBlink 1.05s steps(1) infinite;
}
@keyframes hnBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
#hero .query .send{
  flex:0 0 auto; width:30px; height:30px; border-radius:8px;
  background:var(--accent); display:grid; place-items:center;
  color:#fff; font-size:13px;
}
#hero .query.frozen .caret{ animation:none; opacity:0; }

/* CTA（nb-btn 前缀，避免与全站 .btn 冲突） */
#hero .cta-row{
  margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  will-change:opacity, transform;
}
#hero .nb-btn{
  font-size:15px; font-weight:600; padding:13px 30px; border-radius:10px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  cursor:pointer; text-decoration:none; display:inline-block;
  font-family:inherit;
}
#hero .nb-btn.solid{
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  border-color:transparent; color:#fff;
  box-shadow:0 10px 26px rgba(37,99,235,.30);
}

/* 坠落光点：段与段之间的转场符号 */
#hero .dot-fall{
  position:absolute; left:50%; bottom:6px; width:7px; height:7px; border-radius:50%;
  background:var(--accent-light);
  box-shadow:0 0 14px 4px rgba(96,165,250,.75);
  opacity:0; transform:translate(-50%,0); pointer-events:none;
}

/* ---------- 章节进度轨（右侧） ---------- */
#hero .prog{
  position:absolute; right:40px; top:50%; transform:translateY(-50%);
  z-index:20; width:2px; height:210px;
  background:linear-gradient(180deg, rgba(148,163,184,.10) 0%, rgba(148,163,184,.28) 15%, rgba(148,163,184,.28) 85%, rgba(148,163,184,.10) 100%);
  border-radius:2px;
}
#hero .prog .fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--accent-light),var(--accent));
  border-radius:2px;
  box-shadow:0 0 10px rgba(37,99,235,.5);
}
#hero .prog .tick{
  position:absolute; left:-4px; width:10px; height:2px;
  background:rgba(148,163,184,.55); border-radius:2px;
}
#hero .prog .tick.on{ background:var(--accent-light); box-shadow:0 0 8px rgba(96,165,250,.8); }
#hero .prog .cap{
  position:absolute; right:14px; top:-26px; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;
}
#hero .prog .pct{
  position:absolute; right:14px; top:calc(100% + 8px); font-size:11px; font-weight:600;
  color:var(--accent-light); font-variant-numeric:tabular-nums;
}
/* 当前轨道名：只作指示，不可点击 */
#hero .prog .segcap{
  position:absolute; right:14px; top:calc(100% + 27px); font-size:10.5px;
  color:var(--ink-faint); white-space:nowrap; letter-spacing:.02em;
}

/* ---------- 第 3 章：指标面板（真实 DOM，数字为实测值） ---------- */
#hero .metrics{
  position:absolute; right:96px; top:50%; transform:translateY(-50%);
  z-index:22; width:288px;
  background:rgba(15,23,42,.62);
  border:1px solid rgba(96,165,250,.26);
  border-radius:15px; padding:22px 22px 16px;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 22px 60px rgba(2,6,23,.5);
  opacity:0; pointer-events:none;
  will-change:opacity, transform;
}
#hero .metrics .hdr{
  font-size:13px; font-weight:700; color:#E2E8F0; letter-spacing:.02em;
  padding-bottom:13px; margin-bottom:6px; border-bottom:1px solid rgba(148,163,184,.18);
  display:flex; align-items:center; gap:8px;
}
#hero .metrics .hdr .live{
  width:6px; height:6px; border-radius:50%; background:#4ADE80;
  box-shadow:0 0 8px rgba(74,222,128,.9); animation:hnPulse 1.9s ease-in-out infinite;
}
@keyframes hnPulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
#hero .metrics .sub{ font-size:11px; color:#64748B; margin-bottom:12px; }
#hero .metrics .row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid rgba(148,163,184,.10);
}
#hero .metrics .row:last-of-type{ border-bottom:0; }
#hero .metrics .row .k{ font-size:13px; color:#94A3B8; }
#hero .metrics .row .v{
  font-size:21px; font-weight:700; color:#E2E8F0;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
#hero .metrics .row .v.hi{ color:#60A5FA; text-shadow:0 0 20px rgba(96,165,250,.55); }
#hero .metrics .src{
  margin-top:12px; padding-top:11px; border-top:1px solid rgba(148,163,184,.16);
  font-size:10.5px; color:#64748B; line-height:1.6;
}
/* 数值单位与口径后缀：不参与数字滚动动画 */
#hero .metrics .row .v small{
  font-size:11px; font-weight:400; color:#64748B;
  margin-left:3px; letter-spacing:0;
}

/* ---------- 第 4 章：报告卡片 ---------- */
#hero .report{
  position:absolute; z-index:24; left:50%; top:50%;
  width:min(560px, 84vw);
  transform:translate(-50%,-50%) translateY(38px) scale(.96);
  opacity:0; pointer-events:none;
  will-change:opacity, transform;
}
#hero .card{
  position:relative; overflow:hidden;
  background:#fff; border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 34px 80px rgba(15,23,42,.20), 0 4px 14px rgba(15,23,42,.07);
}
#hero .card .paper{
  position:absolute; inset:0;
  background-image:url("../imgs/paper-texture.png");
  background-size:130% auto; background-position:center center;
  opacity:.15; mix-blend-mode:multiply; pointer-events:none;
}
#hero .card .inner{ position:relative; padding:26px 26px 22px; }
#hero .card .top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
#hero .card .top .ttl{ font-size:15px; font-weight:700; color:#0F172A; letter-spacing:-.01em; }
#hero .card .top .badge{
  font-size:11px; font-weight:600; color:var(--accent);
  background:rgba(37,99,235,.09); border:1px solid rgba(37,99,235,.20);
  padding:4px 10px; border-radius:20px;
}
#hero .card .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
#hero .card .kpi .kk{ font-size:11px; color:#64748B; margin-bottom:4px; }
#hero .card .kpi .vv{ font-size:18px; font-weight:700; color:#0F172A; font-variant-numeric:tabular-nums; }
#hero .card .kpi .vv em{ font-style:normal; font-size:11px; color:#94A3B8; font-weight:500; margin-left:2px; }
#hero .card .bars{ display:flex; align-items:flex-end; gap:9px; height:96px; margin-bottom:18px; }
#hero .card .bars i{
  flex:1; border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#BFDBFE,#93C5FD);
  transform:scaleY(0); transform-origin:bottom;
}
#hero .card .bars i.hi{ background:linear-gradient(180deg,var(--accent),var(--accent-deep)); }
#hero .card .lines{ display:flex; flex-direction:column; gap:9px; }
#hero .card .lines .ln{ height:8px; border-radius:4px; background:#E9EEF5; }
#hero .card .lines .ln.s{ width:62%; }
#hero .card .foot{
  margin-top:18px; padding-top:13px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:#94A3B8;
}
#hero .card .calev{
  margin-top:5px; font-size:10.5px; color:#B4B2A9; line-height:1.5;
}
#hero .report .cta-row{ margin-top:26px; }

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  #hero .metrics{ right:24px; width:250px; }
}
@media (max-width:900px){
  /* 340vh = 入口段 28.8vh + 4 段 × 52.8vh 的滚动量 + 100vh 视口 */
  #runway{ height:340vh; }
  #hero .prog{ right:18px; height:150px; }
  #hero .metrics{
    left:16px; right:16px; width:auto;
    top:auto; bottom:104px; transform:none;
  }
  #hero .metrics .row .v{ font-size:18px; }
  #hero .card .kpis{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  #hero .prog{ display:none; }
  #hero .card .inner{ padding:20px 18px 16px; }
}

@media (prefers-reduced-motion: reduce){
  #hero .query .caret{ animation:none; }
  #hero .metrics .hdr .live{ animation:none; }
}

/* ---------- 暗色主题适配 ----------
   hero 自带「浅 → 深 → 浅」的明暗叙事；暗色主题下把「浅」端对齐全站暗色底
   （--background #0F172A / --surface #1E293B），「深」端更深，叙事对比仍成立。
   插值变量（--ink/--surface 等）由 JS 按主题分别插值，此处只覆盖非插值项。 */
[data-theme="dark"] #hero{
  background:#0F172A;
  --line:#334155;
}
[data-theme="dark"] #hero h1.hero-title .title-second-line{ color:var(--accent-light); }
[data-theme="dark"] #hero .query{
  background:#1E293B;
  box-shadow:0 10px 34px rgba(0,0,0,.35), 0 2px 7px rgba(0,0,0,.25);
}
[data-theme="dark"] #hero .nb-btn{ background:#1E293B; }
[data-theme="dark"] #hero .card{
  background:#18233C;
  border-color:#2B3B57;
  box-shadow:0 34px 80px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.25);
}
[data-theme="dark"] #hero .card .top .ttl,
[data-theme="dark"] #hero .card .kpi .vv{ color:#E2E8F0; }
[data-theme="dark"] #hero .card .kpi .kk{ color:#94A3B8; }
[data-theme="dark"] #hero .card .lines .ln{ background:#26344E; }
[data-theme="dark"] #hero .card .paper{ opacity:.16; }
[data-theme="dark"] #hero .card .top .badge{
  color:var(--accent-light);
  background:rgba(96,165,250,.12);
  border-color:rgba(96,165,250,.30);
}
[data-theme="dark"] #hero .card .foot{ color:#7C8AA0; }