/* ============================================================
   色生万象 · 基础层样式
   章节主色不写死：每章由 app.js 内联 --ch / --ch-soft / --ch-bright
   （来源 config.js）。这里只有纸墨与结构。
   注意：这是交互框架的 MVP 样式，不是最终 UI。
   ============================================================ */

:root{
  --paper:#F7F5F0;
  --ink:#082346;
  --ink-2:#5A6B7B;
  --ink-3:#93A0AB;
  --line:#E3DED2;
  --card:#FDFCF9;
  --serif:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --nav-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
html{scroll-behavior:smooth}
/* 交互门闩：成色之前锁住整页滚动（禁掉回弹，不然看着像「只能往上弹」）。
   scroll-behavior 一并压成 auto：overflow:hidden 只挡用户滚动，挡不住
   scrollTo 这类程序跳位；平滑滚动会让它「一边往目标跑、一边被拉回」地拉锯半秒，
   看着就是内容闪一下。压成 auto 后跳位是瞬时的，守卫一帧就能按回去。 */
html.locked{overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
/* 锁着的时候往下滚 → 让那行提示闪两下：不是坏了，是要先动手。
   只动 opacity（ln-geo-hint 用 translateX 定位，动 transform 会把它推歪）。 */
html.lock-nudge .ln-geo-hint,
html.lock-nudge .glz-tip,
html.lock-nudge .lq-tip,
html.lock-nudge .wh-tip,
html.lock-nudge .sc-tip,
html.lock-nudge .bh-stage #touch.show{animation:lockNudge .9s ease}
@keyframes lockNudge{0%,50%,100%{opacity:1}25%,75%{opacity:.25}}
body{background:var(--paper);color:var(--ink);font:14px/1.8 var(--sans);-webkit-font-smoothing:antialiased}
body[data-state="splash"]{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 页面过渡（多页面）：进入淡入 / 离开淡出 */
body{transition:opacity .25s ease}
body.leaving{opacity:0}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body[data-page="chapter"] #flow{animation:pageIn .55s ease both}

/* 宣纸颗粒 + 四角晕影（全站质感，取自开屏方案三） */
body::before{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");}
body::after{content:"";position:fixed;inset:0;z-index:199;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(28,43,58,.075) 100%)}
/* 紫棠：不要纸纹/四角晕影等 UI 底，只留干净纸色衬花枝 */
body[data-chapter="zitang"]::before,
body[data-chapter="zitang"]::after{display:none}
body[data-chapter="zitang"] .ch-info::before{display:none}

/* ---------------- 页眉（无导航栏，浮于内容上） ----------------
   高端品牌三分式（参照 Aesop / 上下 SHANG XIA 的页眉语法）：
   · 居中英文字标 —— 品牌的脸，开屏大字的落点，全站唯一固定锚点；
   · 左上目录触发器（仅章节页）—— 点开 = 五条色带落下；
   · 右上中文功能位 —— 首页放「色生万象」落款，章节页放「五色」索引。
   中英各司其职：英文当脸居中，中文只出现在左右功能位。无底色无框线。 */
.wordmark{position:fixed;top:22px;left:0;right:0;z-index:140;display:flex;align-items:center;
  justify-content:center;gap:clamp(18px,2.6vw,40px);pointer-events:none}
a.wordmark{pointer-events:none}
.wordmark .wm-en{font-family:"AiDeep","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:18px;line-height:1;letter-spacing:.42em;padding-left:.42em;color:var(--ink);white-space:nowrap;
  pointer-events:auto}
/* 首页 · 中文分列章：题名拆两半，分列字标左右（色生 ─ coliverse ─ 万象）。
   开屏大字飞进两章之间落定后才亮出（.done），章先占位保证字标永远居中；
   亮出即钤印：下压一顿 + 一圈墨晕散开，像真的盖下去 */
.wordmark .seal{position:relative;visibility:hidden;font-family:var(--serif);font-size:13px;font-weight:600;
  line-height:1;letter-spacing:.5em;color:var(--ink);white-space:nowrap}
.wordmark.done .seal{visibility:visible;animation:stampIn .4s cubic-bezier(.2,.85,.3,1.25) both}
.wordmark .seal::after{content:"";position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;
  transform:translate(-50%,-50%) scale(.45);border-radius:50%;opacity:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(8,35,70,.30),0 0 16px 5px rgba(8,35,70,.12)}
.wordmark.done .seal::after{animation:sealHalo .65s ease-out .1s both}
@keyframes stampIn{0%{opacity:0;transform:scale(1.55)}55%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes sealHalo{0%{opacity:.85;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
.site-index{position:fixed;top:26px;right:4vw;z-index:140}
.site-index a{font-family:var(--serif);font-size:12px;letter-spacing:.34em;color:var(--ink-2);
  border-bottom:1px solid transparent;padding-bottom:3px;transition:.25s}
.site-index a:hover{color:var(--ink);border-color:var(--ink-3)}
/* 右上 · 声音开关（唯一一个非文字的「图标」是靠一道细斜杠划在「声」上，
   关掉时划过去；不额外造图形，跟页眉的文字语法一致）。
   章节页要让开右侧「五色」，所以右偏移多 56px。 */
.snd-btn{position:fixed;top:26px;right:4vw;z-index:151;
  font-family:var(--serif);font-size:12px;letter-spacing:.34em;color:var(--ink-2);
  padding:0 2px 3px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
/* z-index 151 = 压在开屏(#splash 150)之上：进门前就该能关声音 */
.snd-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.snd-btn.off{color:var(--ink-3)}
/* 章节页右上已有「五色」索引（right:4vw）→ 声音让到它左边 */
body[data-page="chapter"] .snd-btn{right:calc(4vw + 56px)}
.snd-btn::after{content:"";position:absolute;left:-4px;right:-4px;top:48%;height:1px;
  background:currentColor;transform:rotate(-16deg) scaleX(0);transform-origin:center;
  transition:transform .24s ease}
.snd-btn.off::after{transform:rotate(-16deg) scaleX(1)}
/* 左上 · 目录触发器（打开时变成明显的「关闭」胶囊，浮在满屏彩带上） */
.site-menu{position:fixed;top:24px;left:4vw;z-index:160}
.menu-btn{position:relative;z-index:126;display:flex;align-items:center;gap:10px;
  padding:8px 16px;border:1px solid transparent;border-radius:99px;transition:.25s}
.menu-ico{display:flex;flex-direction:column;gap:5px;width:17px;transition:width .25s}
.menu-ico i{display:block;height:1.5px;background:var(--ink);transition:transform .3s,height .25s}
.site-menu.open .menu-btn{background:var(--paper);border-color:var(--line)}
.site-menu.open .menu-ico{width:21px}
.site-menu.open .menu-ico i{height:2px}
.site-menu.open .menu-ico i:first-child{transform:translateY(3.75px) rotate(45deg)}
.site-menu.open .menu-ico i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu-txt{font-family:var(--serif);font-size:12px;letter-spacing:.34em;color:var(--ink-2);transition:color .25s}
.site-menu:hover .menu-txt,.site-menu.open .menu-txt{color:var(--ink)}
/* 菜单面板：满屏彩虹带（页眉中唯一允许颜色出现的地方）。
   字标(z:140) / 五色索引(z:140) 浮在满屏彩带之上，目录按钮(z:126)浮在面板之上 */
.menu-panel{position:fixed;inset:0;z-index:125;
  background:rgba(247,245,240,.97);opacity:0;pointer-events:none;transition:opacity .35s ease}
.site-menu.open .menu-panel{opacity:1;pointer-events:auto}
.menu-ribbons{position:absolute;inset:0}
.menu-ribbons canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* 目录面板底部的版权行：音乐 CC BY 3.0 要署名，但正片一个字都不该多 */
.menu-credits{position:absolute;left:6vw;right:6vw;bottom:5vh;margin:0;z-index:2;
  font-family:var(--serif);font-size:10.5px;line-height:2;letter-spacing:.16em;
  color:var(--ink-3);text-align:center;pointer-events:none}

/* ---------------- 首页 · 丝绸彩带（替代旧五色块入口） ---------------- */
#silk{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .1s}
#silk.on{opacity:1}

/* ---------------- 章节 ---------------- */
.chapter{position:relative}
.chapter.no-pin .ch-interaction{position:relative}
.ch-interaction{position:sticky;top:0;height:100vh;z-index:0;display:flex;flex-direction:column;overflow:hidden}
/* 信息层压暗垫：满画面纹样（花布/麦田）背后压大字会糊，
   滑进信息层时按 --veil 盖一层纸色（由 app.js 按章节滚动进度写变量）。 */
.ch-interaction::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--paper);opacity:var(--veil,0);transition:opacity .2s linear}
.ch-head{position:absolute;top:calc(var(--nav-h) + 3vh);left:4vw;z-index:3;pointer-events:none}
.ch-name{font-family:var(--serif);font-size:clamp(32px,4.2vw,62px);letter-spacing:.18em;font-weight:600;line-height:1.2}
.ch-verb{position:absolute;top:calc(var(--nav-h) + 3vh);right:4vw;z-index:3;font-family:var(--serif);
  font-size:clamp(60px,7.5vw,116px);line-height:1;color:var(--ch);opacity:.92;pointer-events:none}
.ch-stage{flex:1;position:relative;z-index:2}
.ch-hint{position:relative;z-index:3;text-align:center;font-size:12px;letter-spacing:.28em;color:var(--ink-2);padding:0 20px 10px;transition:opacity .4s}
.chapter[data-state="done"] .ch-hint{opacity:0}
/* 状态条贴在画面最下沿：原来底部留 4vh 纸色，麦穗页的浅底一衬就成了一条米白横带 */
.ch-status{position:relative;z-index:3;display:flex;align-items:center;gap:16px;padding:0 4vw 0}
.ch-readout{font-size:12px;letter-spacing:.14em;color:var(--ink-2);white-space:nowrap;min-width:0}
/* 进度条：只留填充本身，不要底下那条米白轨道（用户：那条不要，留进度条就够） */
.ch-bar{flex:1;height:2px;background:transparent;position:relative;overflow:hidden;border-radius:2px}
.ch-bar b{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--ch);transition:width .2s}

/* ---------------- 信息层（上滑覆盖交互区 = 显） ---------------- */
.ch-info{position:relative;z-index:1;background:var(--paper);border-top:1px solid var(--line);
  min-height:150vh;padding:13vh 4vw 9vh;scroll-margin-top:var(--nav-h)}
.ch-info::before{content:"";position:absolute;top:0;left:0;right:0;height:11vh;
  background:linear-gradient(var(--ch-soft),transparent);opacity:.45;pointer-events:none}
.info-inner{max-width:1080px;margin:0 auto}
.info-kick{font-family:var(--serif);letter-spacing:.4em;color:var(--ch);font-size:clamp(14px,1.3vw,17px);margin-bottom:6vh}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:8vh}
.info-grid h3{font-family:var(--serif);font-size:15px;letter-spacing:.32em;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--line);font-weight:600}
.info-grid p{font-size:13.5px;color:var(--ink-2)}
.viz-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:28px 30px 20px}
.viz-card h4{font-family:var(--serif);font-size:15px;letter-spacing:.2em;margin-bottom:22px;font-weight:600}
.viz-host{animation:vizIn .8s ease both}
@keyframes vizIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.viz-note{font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin-top:14px}
.ch-next{margin-top:10vh;font-family:var(--serif);letter-spacing:.3em;font-size:clamp(13px,1.2vw,15px);color:var(--ink-2)}
.ch-next a{text-decoration:none;border-bottom:1px solid var(--ch);padding-bottom:3px;color:var(--ch);transition:.3s}
.ch-next a:hover{opacity:.65}

/* ---------------- 信息层 · fizzi 式满屏节拍（朱砂例） ----------------
   透明信息层：模型（sticky 画布）在背后游走，大字节拍左右交替渐显渐隐；
   成色后开滚，交互区 UI（章名/动词/提示/进度）整体淡出让位 */
.ch-info.info-fizz{background:transparent;border-top:0;min-height:0;padding:0}
.ch-info.info-fizz::before{display:none}
.info-fizz-inner .fz-sec{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:0 12vw;opacity:0;transform:translateY(34px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.info-fizz-inner .fz-sec.in{opacity:1;transform:none}
.fz-sec[data-side="right"]{align-items:flex-end;text-align:right}
.fz-big{font-family:var(--serif);font-size:clamp(44px,7vw,108px);letter-spacing:.14em;font-weight:600;line-height:1.18}
.fz-big i{font-style:italic;font-family:Georgia,serif;font-size:.42em;letter-spacing:.08em;color:var(--ink-2)}
/* 三件事并置（矿 · 漆 · 礼）：字多，收一号，免得横着撞到背后的模型 */
.fz-big .tri{font-size:.7em;letter-spacing:.06em}
.fz-kick{font-family:var(--serif);font-size:13px;letter-spacing:.5em;color:var(--ink-3);margin-bottom:18px;text-indent:.5em}
/* text-wrap:balance —— 小字多了会被折成两行，右栏是 text-align:right，
   不收的话第二行只剩「不住。」这种两字孤行挂在右边，很难看。均分后会齐一些。 */
.fz-small{margin-top:24px;font-size:13px;letter-spacing:.22em;color:var(--ink-2);max-width:36em;text-wrap:balance}
.fz-strip{display:flex;gap:10px;margin-top:38px}
.fz-chip{flex:1;max-width:130px}
.fz-chip b{display:block;height:14px;border-radius:2px;transition:height .3s}
.fz-chip:hover b{height:22px}
.fz-chip i{display:block;font-style:normal;font-family:var(--serif);font-size:13px;letter-spacing:.24em;margin-top:10px;color:var(--ink)}
.fz-chip span{display:block;font-family:Georgia,serif;font-size:11px;letter-spacing:.12em;color:var(--ink-3);margin-top:2px}
.fz-sec + .ch-next, .info-fizz-inner .ch-next{min-height:70vh;display:flex;align-items:center;justify-content:center;margin:0}
/* 有一拍由图承担（config 的 fizz[i].viz）：图跟着大字走，宽度收在本栏里，
   不横着压到背后的模型；右栏时靠右对齐。
   align-self 必须写 —— 默认 stretch 会让这个块撑满整栏（972px），
   花的让位是按 Range 量文字框算的，量到整栏宽就等于凭空多要 250px，花只能出画。 */
.fz-viz{width:min(520px,100%);align-self:flex-start;margin-top:2px}
.fz-sec[data-side="right"] .fz-viz{align-self:flex-end}

/* 散 · 页底交棒（朱砂试）：一屏黄卡撑满即停，变淡进下一页 */
.fz-sec + .ch-next.pass-host,
.info-fizz-inner .ch-next.pass-host{
  display:block; margin:0; padding:0;
  position:relative;
  width:100vw; max-width:none;
  height:100vh; min-height:100vh;
  margin-left:calc(50% - 50vw);
  overflow:hidden; z-index:5;
}
.pass-card{
  position:absolute; inset:0; z-index:1;
  will-change:opacity;
}
.pass-hint{
  position:absolute; left:0; right:0; bottom:10vh; z-index:2;
  text-align:center; pointer-events:none;
  font:13px/1.6 var(--sans); letter-spacing:.28em;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 12px rgba(0,0,0,.18);
  transition:opacity .5s ease;
}
.pass-hint.gone{opacity:0}
.pass-host.leaving{pointer-events:none}
/* 下一页入场：黄卡盖住整页再慢慢变淡 */
.pass-arrive{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:1; transition:opacity 1.15s ease;
}
.pass-arrive.out{opacity:0}
/* 成色后开滚：交互 UI 让位 */
.chapter[data-scrolled="1"] .ch-head,.chapter[data-scrolled="1"] .ch-verb,
.chapter[data-scrolled="1"] .ch-hint,.chapter[data-scrolled="1"] .ch-status{opacity:0;pointer-events:none}
.ch-head,.ch-verb,.ch-hint,.ch-status{transition:opacity .5s}

/* ---------------- 终章 ---------------- */
#outro{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:13vh 4vw;border-top:1px solid var(--line);text-align:center}
.outro-bands{display:flex;width:min(760px,86vw);height:9px;gap:6px;margin-bottom:10px}
.outro-bands i{flex:1;background:var(--ch);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
#outro.in .outro-bands i{transform:scaleX(1)}
.outro-line{font-family:var(--serif);font-size:clamp(24px,3.4vw,42px);letter-spacing:.4em;font-weight:600}
.outro-sub{font-size:12px;letter-spacing:.28em;color:var(--ink-3)}
.outro-credit{font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.outro-replay{margin-top:14px;font-size:12px;letter-spacing:.25em;border:1px solid var(--line);border-radius:99px;padding:8px 22px;color:var(--ink-2);background:var(--card);transition:.25s}
.outro-replay:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------------- 响应式（MVP：保可用不保好看） ---------------- */
@media(max-width:820px){
  .info-grid{grid-template-columns:1fr}
  .ch-name{font-size:30px}
  .ch-verb{font-size:56px;opacity:.5}
  .ch-readout{font-size:11px}
  .wordmark .wm-en{font-size:15px}
  .site-menu{left:6vw}
  .site-index{right:6vw}
  .snd-btn{right:6vw}
  body[data-page="chapter"] .snd-btn{right:calc(6vw + 50px)}
  .wordmark{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #splash *{animation-duration:.01s!important;animation-delay:0s!important}
  .viz-host{animation:none!important;opacity:1!important;transform:none!important}
  #silk{transition:none}
  body[data-page="chapter"] #flow{animation:none}
  body.leaving{opacity:1}
  .menu-panel,.menu-ico i,.menu-txt,.site-index a{transition:none!important}
  .wordmark.done .seal,.wordmark.done .seal::after{animation:none!important}
}