/* ============================================================
   灵感徽章 · Launch 页
   规范见 docs/DESIGN.md —— 改视觉前先改那份文件
   两个场：浅场 = 纸，暗场 = 黑；唯一强调色 = 琥珀
   ============================================================ */

:root{
  --paper:#FBFAF8;
  --ink:#1A1712;
  --ink-2:#5C554D;
  --ink-3:#7E6F58;
  --hair:rgba(0,0,0,.08);
  --amber:#A65F1B;          /* 对纸 4.71:1 */
  --amber-ink:#FFFFFF;
  --panel:#FFFFFF;

  --dur:650ms;              /* 与 App 动效基准一致 */
  --ease:cubic-bezier(.22,1,.36,1);

  --gutter:clamp(20px,6vw,72px);
  --measure:clamp(20rem,42rem,46rem);
}

/* 暗场 */
body.is-dark{
  --paper:#0E0D0C;
  --ink:#F5F2EE;
  --ink-2:#A8A29B;
  --ink-3:#B6A78F;
  --hair:rgba(255,255,255,.10);
  --amber:#E8A03C;
  --amber-ink:#1A1712;
  --panel:#1A1817;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x:hidden;
}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* WebGL 画布贯穿全站 */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none}
main{position:relative;z-index:1}

/* ── 顶栏 ───────────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);
  mix-blend-mode:normal;
}
.topbar__brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;font-weight:500;color:var(--ink)}
.topbar__brand img{border-radius:7px}
.topbar__cta{
  font-size:14px;font-weight:600;text-decoration:none;color:var(--amber);
  padding:8px 14px;border:1px solid var(--hair);border-radius:999px;
}

/* ── 段落通用 ────────────────────────────────────────── */
.sec{position:relative;padding:0 var(--gutter);display:flex;flex-direction:column;justify-content:center}
.sec--hero{min-height:100vh}
.sec--split{min-height:190vh;background:transparent;padding:0}
/* 步骤条钉在顶上、文案钉在底下，手机在中间 —— 否则文案会随着滚动压到手机上 */
.split__sticky{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:11vh var(--gutter) 7vh;
}
.sec--cloud{min-height:220vh}
.sec--blackout{min-height:120vh}
.sec--intro{min-height:120vh}
.feat{min-height:120vh}
.sec--notice{min-height:100vh;background:var(--paper)}
.sec--privacy{min-height:130vh}
.sec--finale{min-height:110vh;align-items:center;text-align:center;justify-content:flex-end;padding-bottom:12vh}

.kicker{font-size:13px;letter-spacing:.08em;color:var(--ink-3);margin:0 0 14px}
h1,h2{font-weight:600;line-height:1.18;letter-spacing:-.01em;margin:0}
.sec--hero h1{font-size:clamp(30px,5.4vw,58px)}
.lede{font-size:clamp(15px,1.5vw,19px);line-height:1.65;color:var(--ink-2);margin:22px 0 30px}
.feat h2{font-size:clamp(26px,3.6vw,42px)}
.feat__body{font-size:clamp(15px,1.35vw,18px);line-height:1.7;color:var(--ink-2);max-width:34em;margin:18px 0 0}
.feat__no{font-size:13px;letter-spacing:.1em;color:var(--ink-3);margin:0 0 16px;font-variant-numeric:tabular-nums}

.btn{
  display:inline-block;text-decoration:none;font-size:16px;font-weight:600;
  color:var(--amber-ink);background:var(--amber);
  padding:15px 26px;border-radius:999px;
  transition:transform 220ms var(--ease), opacity 220ms linear;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--onDark{margin-top:28px}

/* ── 01 · 品牌大字 ──────────────────────────────────── */
.brandmark{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:clamp(96px,26vw,340px);font-weight:700;letter-spacing:-.04em;
  color:var(--ink);opacity:.055;white-space:nowrap;
}
.brandmark span{transform:translateY(-6%)}
.hero{position:relative;max-width:var(--measure)}
.scrollhint{
  position:absolute;bottom:5vh;left:var(--gutter);font-size:12px;letter-spacing:.14em;
  color:var(--ink-3);display:flex;align-items:center;gap:10px;
}
.scrollhint::after{content:"";width:1px;height:34px;background:currentColor;opacity:.5;animation:fall 2.4s var(--ease) infinite}
@keyframes fall{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ── 02 · 四步进度条 ───────────────────────────────── */
.steps{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(14px,3vw,40px);flex-wrap:wrap;
}
.step{display:flex;align-items:baseline;gap:8px;font-size:13px;letter-spacing:.06em;color:var(--ink-3);opacity:.35;transition:opacity 420ms var(--ease),color 420ms var(--ease)}
.step b{font-variant-numeric:tabular-nums;font-weight:600}
.step.is-on{opacity:1;color:var(--amber)}
.split__copy{max-width:var(--measure)}
.split__copy h2{font-size:clamp(30px,4.6vw,54px)}
.split__copy p{margin:18px 0 0;font-size:clamp(15px,1.4vw,18px);color:var(--ink-2)}

/* ── 03 · 星云 + 漂浮短词 ──────────────────────────── */
.driftfield{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.driftfield span{
  position:absolute;font-size:clamp(13px,1.4vw,17px);color:var(--ink-3);opacity:.42;
  white-space:nowrap;will-change:transform;
}
.cloudhint{position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.14em;color:var(--ink-3);opacity:0;transition:opacity var(--dur) var(--ease)}
.cloudhint.is-on{opacity:.8}

/* ── 05 · 逐词点亮 ─────────────────────────────────── */
.sec--intro{align-items:flex-start}
.wordlight{font-size:clamp(28px,4.4vw,52px);max-width:22em;line-height:1.3}
.wordlight i{font-style:normal;color:var(--ink);opacity:.16;transition:opacity 520ms var(--ease);margin-right:.28em;display:inline-block}
.wordlight i.is-on{opacity:1}

/* ── 06 · 四章进场效果 ─────────────────────────────── */
.feat__inner{max-width:var(--measure)}
/* 网格铺开 */
.feat--grid .gridlines{position:absolute;inset:0;pointer-events:none;opacity:0}
.feat--grid .gridlines i{position:absolute;background:var(--hair)}
.feat--grid.is-in .gridlines{opacity:1}
/* 解码 + 扫描带 */
.feat--scan h2{font-variant-numeric:tabular-nums}
.feat--scan .scanbar{position:absolute;left:0;right:0;height:2px;background:var(--amber);opacity:0;pointer-events:none}
.feat--scan.is-in .scanbar{animation:scan 1.1s var(--ease) 1}
@keyframes scan{0%{opacity:.9;transform:translateY(-40px)}100%{opacity:0;transform:translateY(120px)}}
/* 同心涟漪 */
.feat--ripple .ripples{position:absolute;right:var(--gutter);top:50%;width:min(46vw,520px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.feat--ripple .ripples i{position:absolute;inset:0;border:1px solid var(--amber);border-radius:50%;opacity:0;transform:scale(.2)}
.feat--ripple.is-in .ripples i{animation:ripple 2.4s var(--ease) infinite}
@keyframes ripple{0%{opacity:.55;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}
/* 点阵对角扩散 */
.feat--diag .dots{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.feat--diag .dots i{position:absolute;width:3px;height:3px;background:var(--ink);opacity:0;border-radius:50%}

/* ── 07 · 点阵告示屏 ──────────────────────────────── */
.board{
  max-width:44rem;margin:0 auto;width:100%;
  background:var(--panel);border:1px solid var(--hair);
  border-radius:14px;padding:clamp(20px,3vw,32px);
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 var(--hair);
}
.board__head{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;color:var(--amber);padding-bottom:14px;border-bottom:1px solid var(--hair)}
.board__dot{width:9px;height:9px;border-radius:50%;background:var(--amber)}
.board__rows{list-style:none;margin:0;padding:0}
.board__rows li{display:grid;grid-template-columns:9.5rem 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.board__rows li:last-child{border-bottom:0}
.board__rows b{font-weight:600;font-size:15px}
.board__rows span{font-size:14.5px;color:var(--ink-2);line-height:1.6}

/* ── 08 · 隐私手电筒 ─────────────────────────────── */
.sec--privacy{justify-content:center}
.privacy__copy{max-width:var(--measure);position:relative;z-index:2}
.privacy__copy h2{font-size:clamp(28px,4.2vw,50px)}
.privacy__copy p{margin:18px 0 0;font-size:clamp(15px,1.4vw,18px);line-height:1.75;color:var(--ink-2)}
/* 未照亮时整体压暗 */
.sec--privacy{--torch:0}
.sec--privacy .privacy__copy h2,
.sec--privacy .privacy__copy p{opacity:.16;transition:opacity 260ms linear}
.sec--privacy .privacy__copy h2{opacity:.22}
.torch{
  position:absolute;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;
  pointer-events:none;z-index:3;opacity:0;transition:opacity 320ms linear;
  background:radial-gradient(circle, rgba(232,160,60,.20) 0%, rgba(232,160,60,.10) 40%, rgba(232,160,60,.03) 62%, transparent 76%);
  border:1px solid color-mix(in srgb, var(--amber) 70%, transparent);
  box-shadow:0 0 90px rgba(232,160,60,.10) inset;
  transform:translate(-50%,-50%);
}
.sec--privacy.is-torch .torch{opacity:1}
.sec--privacy.is-torch .privacy__copy h2,
.sec--privacy.is-torch .privacy__copy p{opacity:.45}
/* 被圆覆盖的字由 JS 打 .lit */
.privacy__copy .lit{opacity:1 !important}

/* ── 09 · 收尾 ───────────────────────────────────── */
.sec--finale h2{font-size:clamp(30px,5vw,58px);cursor:grab;touch-action:none;user-select:none}
.sec--finale h2.is-dragging{cursor:grabbing}
.draggable i{font-style:normal;display:inline-block;will-change:transform;margin-right:.22em}
.fineprint{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.foot{display:flex;gap:22px;justify-content:center;margin:38px 0 0;font-size:13px}
.foot a{text-decoration:none;color:var(--ink-3);border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:currentColor}

/* ── 降级：尊重系统的减少动态 ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  :root{--dur:1ms}
  .scrollhint::after{animation:none}
  .feat--ripple.is-in .ripples i{animation:none;opacity:.25;transform:none}
  .feat--scan.is-in .scanbar{animation:none}
  .wordlight i{opacity:1}
  .sec--privacy .privacy__copy h2,.sec--privacy .privacy__copy p{opacity:1}
  .torch{display:none}
  .btn:hover{transform:none}
}

/* ── 移动端 ─────────────────────────────────────── */
@media (max-width:720px){
  .board__rows li{grid-template-columns:1fr;gap:6px}
  .steps{padding-top:12vh;gap:12px}
  .feat--ripple .ripples{width:70vw;right:-10vw;opacity:.5}
  .sec--finale{justify-content:center}
  .topbar__cta{padding:7px 12px}
}