/* ===========================================================
   空间预演 — 滚动三维介绍站
   配色取自主题本身：未开灯的展厅（墨）、测绘图纸（青）、投影光（琥珀）
   =========================================================== */

:root {
  --ink:    #0A0D10;
  --draft:  #10151B;
  --line:   #1E272F;
  --line-2: #2C3841;

  --paper:  #E6E3DB;
  --mute:   #8A959E;
  --dim:    #55626C;

  --cyan:   #63CBD9;   /* 测绘层：网格、坐标、尺寸 */
  --beam:   #FFAE3A;   /* 投影层：光、点位、落点 */

  --f-display: "IBM Plex Sans Condensed", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-body:    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-h1:   clamp(1.9rem, 4vw, 3.4rem);
  --fs-h2:   clamp(1.6rem, 2.9vw, 2.5rem);
  --fs-lead: clamp(.98rem, 1.15vw, 1.1rem);
  --fs-mono: .7rem;

  --gut:  clamp(1.25rem, 5vw, 4rem);
  --maxw: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.4; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .05em; }

:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ── 三维层与叠加层 ───────────────────────────────────── */

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* 暗角 + 左侧压暗：保证左栏文字在任何机位下都读得清。
   --clarity 由 main.js 在镜头切正到幕布那 5 秒里从 1 收到 0，两层覆盖一起让开，
   好让幕布上的画面是一干二净的。默认 1 —— 没有 WebGL、脚本没跑起来时都保持原样。 */
.grade {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--clarity, 1);
  background:
    radial-gradient(82% 76% at 14% 50%,
      rgba(10,13,16,.94) 0%, rgba(10,13,16,.72) 40%, rgba(10,13,16,0) 74%),
    radial-gradient(118% 100% at 50% 50%,
      rgba(10,13,16,0) 42%, rgba(10,13,16,.72) 100%),
    linear-gradient(180deg,
      rgba(10,13,16,.88) 0%, rgba(10,13,16,0) 16%,
      rgba(10,13,16,0) 84%, rgba(10,13,16,.92) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(.13 * var(--clarity, 1));
  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'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 没有 WebGL 时的静态底，绝不白屏。
   底图不写在 HTML 里 —— 这条规则不命中就不会去请求，省掉所有正常设备的一次下载。 */
.poster {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  background: #0A0D10 center / cover no-repeat;
}
.no-webgl .poster {
  display: block;
  background-image: url("plates/fallback.webp");
}
.no-webgl body,
.no-webgl #stage { background: radial-gradient(90% 70% at 62% 46%, #16202A 0%, #0A0D10 72%); }
.no-webgl #stage { display: none; }

main { position: relative; z-index: 3; }

/* ── 顶栏 ─────────────────────────────────────────────── */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem var(--gut);
  border-bottom: 1px solid var(--line);
  background: rgba(10,13,16,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: baseline; gap: .6rem; flex: none; white-space: nowrap; }
.brand__mark {
  width: 9px; height: 9px;
  background: var(--beam);
  box-shadow: 0 0 0 3px rgba(255,174,58,.16);
  flex: none; align-self: center;
}
.brand__name { font-family: var(--f-display); font-weight: 700; font-size: .95rem; }
.brand__tag { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .14em; color: var(--dim); }

.nav { display: flex; gap: 1.5rem; }
.nav a {
  white-space: nowrap;
  font-size: .82rem; color: var(--mute);
  padding: .15rem 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover { color: var(--paper); }
.nav a.is-on { color: var(--cyan); border-bottom-color: var(--cyan); }

/* 右上角登录入口。
   它是 .topbar 的**第三个**子元素（space-between 会把它顶到最右），故意不放进
   <nav> —— .nav a 是元素选择器，进去就会被导航样式接管；也不给它 data-nav /
   data-rail / data-chapter / class="reveal"，否则会被 main.js 的章节高亮与淡入
   逻辑当成自己的节点。 */
.topbar__login {
  flex: none;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: .08em;
  color: var(--cyan);
  border: 1px solid rgba(99,203,217,.26);
  padding: .34rem .7rem;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
}
.topbar__login:hover {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}

/* ── 右侧进度尺 ───────────────────────────────────────── */

.rail {
  position: fixed;
  right: 1.5rem; top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex; flex-direction: column; gap: .8rem;
  align-items: flex-end;
}
.rail a {
  display: block;
  width: 20px; height: 1px;
  background: var(--line-2);
  transition: width .28s, background .28s;
}
.rail a:hover { background: var(--mute); }
.rail a.is-on { width: 34px; background: var(--beam); }

/* ── 章节 ─────────────────────────────────────────────── */

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 100svh;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(6rem, 12vh, 9rem) var(--gut) clamp(4rem, 9vh, 7rem);
}

.chapter__copy { min-width: 0; max-width: 34rem; }

/* 首屏没有图版，右栏本来就是空的 —— 那就别留。
   以前写成 1.4fr/1fr，空占了四成宽度，标题一长就被逼出孤字。 */
.chapter--hero { grid-template-columns: minmax(0, 1fr); }
.chapter--hero .chapter__copy { max-width: 44rem; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px;
  background: currentColor; opacity: .7; flex: none;
}

.h1 {
  font-size: var(--fs-h1);
  letter-spacing: -.02em;
  line-height: 1.28;
  margin-bottom: 1.6rem;
  text-wrap: balance;   /* 标题一长，显式 <br> 兜不住，让它自己把两行折匀 */
}
.h2 { font-size: var(--fs-h2); letter-spacing: -.015em; margin-bottom: 1.6rem; }

.lead { color: var(--mute); font-size: var(--fs-lead); line-height: 1.95; }
.lead + .lead { margin-top: 1em; }

.scroll-hint {
  margin-top: 2.5rem;
  color: var(--dim);
  display: flex; align-items: center; gap: .6rem;
}
.scroll-hint::after {
  content: ""; width: 34px; height: 1px;
  background: var(--beam); opacity: .7;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.chips li {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: .05em;
  color: var(--cyan);
  border: 1px solid rgba(99,203,217,.26);
  padding: .34rem .7rem;
}

/* ── 图版 ─────────────────────────────────────────────── */

/* 每章一张。以前是错位拼贴，但那些效果图各自说各自的话；
   换成按章节语义生成的图之后，一张就够，也不再需要互相压叠。 */
.chapter__plates { position: relative; min-width: 0; }

.plate {
  margin: 0;
  border: 1px solid var(--line-2);
  background: var(--draft);
  box-shadow: 0 22px 60px -28px rgba(0,0,0,.9);
  overflow: hidden;
  will-change: opacity, transform;
}
.plate img { display: block; width: 100%; height: auto; }

/* ── 投影幕 ───────────────────────────────────────────── */

/* 演示片自己不露面 —— 它是三维里那面投影幕的贴图来源。
   不能 display:none / visibility:hidden：浏览器会停止解码，幕布就冻在第一帧。
   所以给个 2px 的盒子摆在角上，让引擎当它是在渲染的。 */
.reel {
  position: fixed;
  left: 0; top: 0;
  width: 2px; height: 2px;
  overflow: hidden;
  opacity: .01;
  pointer-events: none;
  z-index: -1;
}

/* 这一章只有文字，没有图版。高度留给最后一次运镜 ——
   字先读完，然后相机转过去正对幕布，字自己淡掉，画面留到最后 */
.chapter--film {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 190svh;
}
.chapter--film .chapter__copy { max-width: 40rem; }

/* ── 流水线 ───────────────────────────────────────────── */

.chapter--wide {
  grid-template-columns: 1fr;
  align-items: start;
}
.chapter--wide .chapter__copy { max-width: none; }

.stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.4rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.stage { background: rgba(10,13,16,.82); padding: 1.4rem 1.1rem 1.6rem; }
.stage__no { display: block; color: var(--beam); letter-spacing: .1em; margin-bottom: 1rem; }
.stage__name { font-size: 1rem; margin-bottom: .6rem; }
.stage__what { font-size: .78rem; color: var(--dim); line-height: 1.75; }

.converge { margin-top: 1.4rem; text-align: right; font-size: .8rem; color: var(--mute); }
.converge .mono { color: var(--cyan); font-size: .8rem; }

/* 单栏章节的图在六段表格下面，通栏会太高，收到右半边 */
.chapter--wide .chapter__plates { margin-top: 3.2rem; }
.chapter--wide .plate { width: min(100%, 780px); margin-left: auto; }

/* ── 下一步 ───────────────────────────────────────────── */

.nexts { display: grid; gap: 1px; margin-top: 2.2rem; background: var(--line); border: 1px solid var(--line); }
.next { background: rgba(10,13,16,.82); padding: 1.4rem 1.3rem 1.6rem; }
.next__name { font-size: 1.08rem; margin-bottom: .5rem; }
.next p { color: var(--mute); font-size: .86rem; line-height: 1.8; }

/* ── 页脚 ─────────────────────────────────────────────── */

.foot {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--line);
  background: rgba(10,13,16,.86);
  padding: 3rem 0 4rem;
}
.foot__inner { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.foot__name { font-family: var(--f-display); font-weight: 700; font-size: 1rem; }
.foot__desc { color: var(--dim); font-size: .86rem; }
.foot__link {
  margin-left: auto; font-size: .7rem; letter-spacing: .1em; color: var(--dim);
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.foot__link:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

/* ── 进场 ─────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ── 自适应 ───────────────────────────────────────────── */

@media (max-width: 1080px) {
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .rail { display: none; }

  /* 窄屏放不下显式断行的那一行，改由宽度自然折 */
  .h1 br { display: none; }

  .chapter {
    grid-template-columns: 1fr;
    align-content: end;
    gap: 2rem;
    padding: 6rem var(--gut) 4rem;
  }
  .chapter__copy { max-width: none; }

  /* 除了最后那一章。上面把字压到版面底部是给"边看画面边读"的章节用的，
     可投影幕这一章的字是垫场：它得在相机切正之前读完，切正之后要让位。
     而"切正"是按滚动进度算的 —— 手机上章高 190svh，字一落到版面底部，
     进度早就过了淡出线，标题还没进视口就已经是 0 了。所以这一章照旧顶到上头。 */
  .chapter--film { align-content: start; }

  /* 手机上文字压在画面下半部：把压暗层翻过来 */
  .grade {
    background:
      linear-gradient(180deg,
        rgba(10,13,16,.86) 0%, rgba(10,13,16,.25) 22%,
        rgba(10,13,16,.82) 52%, rgba(10,13,16,.97) 78%),
      radial-gradient(120% 100% at 50% 50%, rgba(10,13,16,0) 45%, rgba(10,13,16,.7) 100%);
  }

  .chapter--wide .plate { width: 100%; }   /* 单栏下再收就太小了 */
}

@media (max-width: 720px) {
  /* 品牌名让位给导航：堆成两行会把标题顶出视口 */
  .brand__tag, .brand__name { display: none; }
  .nav { gap: .9rem; }
  .nav a { font-size: .72rem; }
  /* 登录入口要多占一格，导航跟着再让一点 */
  .topbar { gap: .8rem; }
  .nav { gap: .7rem; }
  .nav a { font-size: .7rem; }
  .topbar__login { padding: .3rem .5rem; letter-spacing: .04em; }
}

@media (max-width: 560px) {
  /* 窄屏一行放不下「6 个章节 + 登录」，而 body 是 overflow-x:hidden，
     挤出去会被**静默裁掉**而不是换行。
     **不能靠 display:none 收掉导航** —— .rail 进度尺在 ≤900px 就已被隐藏，
     再把文字导航也收了，手机上就彻底没有跳章的办法了（实测 768/414/375 三档
     .rail 都是不可见）。改成换行：品牌 + 登录留第一行，章节落到第二行，
     第二行万一还放得下就自己横向滚。 */
  .topbar { flex-wrap: wrap; row-gap: .5rem; }
  .nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .converge { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .plate { opacity: 1 !important; filter: none !important; transform: none !important; }
}