/* ============================================================================
   站点外壳样式
   ----------------------------------------------------------------------------
   注意：scrub-engine.js 用 @layer sw 注入它自己的样式。
   CSS 级联层（@layer）的优先级低于任何未分层的样式，所以本文件的规则
   天然覆盖引擎默认值——不需要 !important。这是有意的设计，放心改。
   ========================================================================== */

/* ⚠ :root 就是 <html>。这里【只放 CSS 变量】，绝对不要写 color / background /
   font-family —— 那等于给整站设默认值，一嵌进主题页面就会把人家全站盖掉。
   字体、颜色、底色都放到下面限定作用域的规则里去。 */
:root {
  /* ↓↓↓ 改这里：品牌配色 ↓↓↓ */
  --paper:  #edf2f4;   /* 页面底色，记得让素材背景色跟它对齐 */
  --ink:    #132c2a;   /* 主文字 */
  --muted:  #5b706d;   /* 次要文字 */
  --green:  #147b4b;   /* 品牌强调色 */
  /* ↑↑↑ 改这里 ↑↑↑ */

  --line: rgba(31, 75, 66, .17);
  --header-h: 104px;
  --footer-h: 58px;
  --nav-h: 72px;
}

/* 字体和文字色只作用在插件自己的元素上，别外溢给主题 */
:is(.site-header, .chapter-nav, .site-footer, .scene-caption, .fallback, #world) {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: var(--ink);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* 只有独立整页模式（页面模板）才铺纸色底——嵌入式必须把页面底色交还给主题，
   否则整站底色会被改掉。seize-standalone 由 template-scroll-world.php 输出。 */
body.seize-standalone { background: var(--paper); }

/* ⚠ #world 千万别给不透明背景。
   #world 是从文档顶部开始的，而很多主题的页眉是「透明背景 + fixed」压在
   hero 上的（本站的 header.top_box 就是）。一旦给 #world 铺底色，它会从页眉
   背后透出来，页眉区域就会变成这个底色，看起来像顶上多了一条缝隙。

   区块内的画面由引擎的 .sw-sky 自己铺（它的背景是 --sw-bg），
   不需要 #world 再铺一层。 */

/* ---------------------------------------------------------------------------
   ⚠ 作用域（这套标记会被嵌进别人的主题页面，写全局规则会污染整站）

   之前这里写着 `a { color: inherit; text-decoration: none }`、
   `body { background: var(--paper) }`、`html { scroll-behavior: smooth }`
   这些全局规则。它们把整站的链接颜色、下划线、页面底色、滚动行为全改掉了——
   用户看到的现象就是"页眉被影响了"。

   现在一律用 :is(...) 限定在插件自己输出的元素上。
   ⚠ 以后加规则也请遵守：不要出现裸的 a / button / * / body / html 选择器。
   --------------------------------------------------------------------------- */
:is(.site-header, .chapter-nav, .site-footer, .scene-caption, .fallback, #world),
:is(.site-header, .chapter-nav, .site-footer, .scene-caption, .fallback, #world) * {
  box-sizing: border-box;
}

/* :not(.sw-btn) 是必须的：:is() 里含 #world，特异性会飙到 (1,0,1)，
   压过 .sw-btn--primary { color:#fff }（0,1,0），按钮会变成深底深字看不见。
   把按钮排除掉，让下面那两条专门的按钮配色规则接管。 */
:is(.site-header, .chapter-nav, .site-footer, .fallback, #world) a:not(.sw-btn) {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

:is(.site-header, .chapter-nav, .site-footer, .fallback, #world) button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:is(.site-header, .chapter-nav, .site-footer, .fallback, #world) :is(a, button):focus-visible {
  outline: 3px solid #1675d1;
  outline-offset: 6px;
}

/* @layer 声明的顺序决定优先级：引擎的 sw 在前，我们的在后。
   未分层的样式（也就是主题自己的 CSS）永远压过所有层——这正是我们要的：
   下面这些规则能撤掉引擎的默认值，又不会盖住主题的设置。 */
@layer sw, seize-plugin;

@layer seize-plugin {

  /* 引擎在 @layer sw 里给 html/body 铺了底色（--sw-bg，默认米色 #F5EDE0）。
     这里撤掉，让主题自己的页面背景生效。
     写在层里而不是裸选择器，是为了不盖过主题未分层的 body 背景规则。 */
  html, body {
    background: transparent;
    margin: 0;
  }

  /* ⚠ 这里【不要】给 #world 铺背景。
     见文件上方那段说明：主题页眉若是「透明背景 + fixed」，#world 从 top:0 铺的
     底色会从页眉背后透出来，看起来像页眉顶上多了一条缝隙。
     区块内的画面由引擎的 .sw-sky 自己铺（背景是 --sw-bg），不需要 #world 再来一层。
     历史教训：这行曾经同时存在于层外和层内两处，只删了层外那处，
     层内这份继续生效，排查了很久。改动这里时记得两处都看一眼。 */
}

/* 键盘用户按 Tab 时第一个拿到的入口，平时藏在视口外 */
.skip-link {
  position: fixed; top: -70px; left: 24px; z-index: 100;
  background: #fff; padding: 14px 18px; border-radius: 3px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- 页头 --- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; height: var(--header-h); padding: 0 4.7%;
  border-bottom: 1px solid var(--line);
  background: rgba(237, 242, 244, .84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brand { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
/* 官方 logo 是 360×150 的横向字标（约 2.4:1），按高度定尺、宽度自适应 */
.brand-logo { display: block; height: 40px; width: auto; }
.brand-caption { display: flex; flex-direction: column; gap: 3px;
                 border-left: 1px solid var(--line); padding-left: 15px; }
.brand-caption b { font-size: 15px; letter-spacing: .04em; }
.brand-caption i { font-style: normal; font-size: 12px; letter-spacing: .08em; color: var(--muted); }

.site-nav { display: flex; align-items: center; gap: 32px; font-size: 14px; font-weight: 550; }
.site-nav a { padding: 14px 0; transition: color .2s; }
.site-nav a:hover { color: var(--green); }

.header-cta {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border: 1px solid var(--green); border-radius: 3px;
  font-size: 14px; font-weight: 600; color: var(--green); white-space: nowrap;
  transition: background .22s, color .22s;
}
.header-cta span { font-size: 17px; line-height: 1; }
.header-cta:hover { background: var(--green); color: #fff; }

.menu-toggle { display: none; border: 0; background: none; width: 44px; height: 44px; font-size: 23px; }

/* ------------------------------------------------------------ 引擎主题 --- */
#world {
  --sw-bg: var(--paper);
  --sw-ink: var(--ink);
  --sw-ink-soft: var(--muted);
  --sw-accent: var(--green);
}

/* 关掉引擎自带的顶栏 / 圆点导航 / 粒子：改用站点自己的页头和章节导航。
   想让引擎自己画，把这里删掉、并在 site.js 里传 nav:true, atmosphere:true */
.sw-topbar, .sw-route, .sw-particles { display: none; }

/* 顶部让位高度。
   --seize-top 由 site.js 实测得出：插件自带页头就取它的高度，嵌入式则去量
   主题那条 fixed 页眉的高度。世界的所有可视层都从它下面开始，页眉那一条
   留给页面自己的背景。
   ⚠ 默认值必须写在 :root 上。写 #world 会出事——自定义属性在 #world 上的
   定义会遮蔽 <html> 上的内联值，site.js 设的 --seize-top 就永远不生效。 */
:root { --seize-top: var(--header-h); }

/* 顶部进度条压在页眉下沿 */
.sw-scrollbar { top: var(--seize-top); height: 2px; z-index: 75; }

/* 画面层铺满整个视口，包括页眉背后。
   主题的页眉多是「透明背景 + fixed」压在 hero 上的——画面铺到最顶上，
   页眉就是透明地浮在画面上（这正是主题原本的设计），不会在页眉位置留下
   一条和页面底色不同色的带子。
   页眉文字的可读性由 .seize-top-scrim 那层遮罩负责。
   底部的章节导航/页脚同样是浮在画面之上的覆盖层，不占画面的位置。 */

/* 文案卡的位置和左侧遮罩宽度 */
.sw-copylayer::before {
  width: 46vw;
  background: linear-gradient(90deg,
    var(--paper) 0%, rgba(237, 242, 244, .88) 57%, rgba(237, 242, 244, 0) 100%);
}
/* 卡片宽度和标题字号是配套的，改一个要连另一个一起看：
   标题每行能放几个字 ≈ 卡片宽 ÷ 字号。中文标题比英文占位大得多，
   卡片太窄或字号太大都会把两行的标题挤成三四行、盖住画面。

   当前值（宽 780 / 字号 56）是按「售气模式」那四句最长的标题调出来的：
   最长一行 14 个字，780 ÷ 56 ≈ 13.9，刚好两行放下。
   换文案时如果某行更长，要么调小这里的字号，要么把标题写短一点。 */
.sw-copy { left: 6.4%; top: 44%; width: min(42vw, 780px); }
.sw-copy__eyebrow { display: flex; align-items: center; gap: 13px; }
.sw-copy__eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
/* 标题里的 \n 靠 pre-line 断行——少了这条，两行会挤成一行 */
.sw-copy__title { white-space: pre-line; }
/* 字号只在桌面端接管；手机端留给引擎自己的 clamp（它按屏宽调过） */
@media (min-width: 861px) {
  .sw-copy__title { font-size: clamp(30px, 2.6vw, 56px); }
}
.sw-copy__title em { font-style: normal; color: var(--green); }
.sw-copy__body { max-width: 380px; }

/* 本文件的规则都是未分层的，会盖过引擎 @layer sw 里的同名规则。
   所以上面那条 a{color:inherit} 会把引擎按钮的文字色一起吃掉，
   这里必须显式把按钮配色写回来。 */
.sw-btn--primary { color: #fff; background: var(--ink); }
.sw-btn--primary:hover { background: var(--green); }
.sw-btn--ghost { color: var(--ink); }

/* 滚动提示抬到章节导航上方。
   它会压在照片上，所以给文字和鼠标图标各垫一层半透明底，否则看不清 */
.sw-hint { bottom: calc(var(--footer-h) + var(--nav-h) + 18px); }
.sw-hint span {
  background: rgba(237, 242, 244, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 5px 13px; border-radius: 999px;
}
.sw-hint i { background: rgba(237, 242, 244, .86); }

/* ------------------------------------------------------- 章节导航（底部） --- */
.chapter-nav {
  position: fixed; left: 0; right: 0; bottom: var(--footer-h); z-index: 66;
  height: var(--nav-h);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(237, 242, 244, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.chapter {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 clamp(14px, 2.4vw, 34px);
  border: 0; border-left: 1px solid var(--line);
  background: none; text-align: left;
  transition: background .25s;
}
.chapter:first-child { border-left: 0; }
.chapter:hover { background: rgba(20, 123, 75, .06); }
.chapter-number { font-size: 11px; letter-spacing: .14em; color: var(--muted);
                  font-variant-numeric: tabular-nums; }
.chapter-name { font-size: 14px; font-weight: 600; letter-spacing: .02em; transition: color .25s; }
.chapter-en { font-size: 10px; letter-spacing: .12em; color: var(--muted);
              text-transform: uppercase; }
.chapter[aria-current="step"] { background: rgba(20, 123, 75, .07); }
.chapter[aria-current="step"] .chapter-name { color: var(--green); }
.chapter[aria-current="step"] .chapter-number { color: var(--green); }

/* 章节进度条：每个按钮顶部一小段 */
.chapter::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--green); opacity: 0; transition: opacity .3s;
}
.chapter { position: relative; }
.chapter[aria-current="step"]::before { opacity: 1; }

/* --------------------------------------------------- 场景角标（左下） --- */
/* 放右侧，免得和左下角的文案卡、CTA 按钮挤在一起。
   同样会压在照片上，所以整块做成带模糊底的小胶囊 */
.scene-caption {
  position: fixed; right: 4.7%; bottom: calc(var(--footer-h) + var(--nav-h) + 20px);
  z-index: 64; display: flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .1em; color: var(--muted);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(237, 242, 244, .86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}
.scene-caption span:first-child { color: var(--green); font-weight: 600;
                                  font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 页脚 --- */
.site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 72;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4.7%; border-top: 1px solid var(--line);
  background: rgba(237, 242, 244, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 12px; color: var(--muted);
}
.footer-left { display: flex; align-items: center; gap: 20px; }
.footer-contact { display: flex; align-items: center; gap: 12px; }
.footer-contact a { color: var(--ink); font-weight: 600; font-size: 14px;
                    font-variant-numeric: tabular-nums; }
.footer-contact a:hover { color: var(--green); }

.motion-toggle {
  border: 1px solid var(--line); border-radius: 999px;
  background: none; padding: 6px 14px; font-size: 12px; color: var(--muted);
  transition: border-color .2s, color .2s;
}
.motion-toggle:hover { border-color: var(--green); color: var(--green); }
.motion-toggle[aria-pressed="true"] { border-color: var(--green); color: var(--green); }

/* ------------------------------------------- file:// 打开时的醒目提示 --- */
/* 只在用 file:// 直接打开时出现，走 HTTP 时完全不存在 */
.file-warning {
  position: fixed; left: 50%; top: 118px; transform: translateX(-50%);
  z-index: 200; width: min(660px, 92vw);
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 22px; border-radius: 8px;
  background: #fff4e5; border: 1px solid #e0954a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
  font-size: 13px; line-height: 1.75; color: #5a3a12;
}
.file-warning b { font-size: 15px; color: #8a4b00; }
.file-warning em { font-style: normal; font-weight: 700; }
.file-warning code {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  background: rgba(224, 149, 74, .16); padding: 2px 6px; border-radius: 4px;
}

/* ------------------------------------------- 和其他内容共存（区块模式） --- */
/* 这个体验的所有视觉层都是 position:fixed，会一直盖住整屏。如果页面里
   除了滚动世界还有别的内容，滚出这个区块后必须把它们收起来，否则后面的
   内容永远被压住看不见。

   site.js 用 IntersectionObserver 盯着 #world：它离开视口时给 <html> 加上
   seize-out-of-world。如果整个页面就只有滚动世界（常规用法），观察器会
   一直报"在视口内"，这个类永远不加，行为跟以前完全一样。 */
/* ⚠ .sw-sky 是引擎画的一层不透明整屏背景（position:fixed; inset:0）。
   千万别漏了它——CSS 绘制顺序里定位元素永远画在静态元素之上，所以哪怕
   后面的内容是普通文档流，也会被这一层整个盖住，看起来就是"后面是空白"。
   下面这份清单必须覆盖引擎生成的全部可视层：
     .sw-sky（背景） .sw-stage（舞台） .sw-copylayer（文案）
     .sw-scrollbar（进度条） .sw-hint（滚动提示）
   （.sw-topbar 和 .sw-route 在本站样式里已经 display:none，不用管）
   .sw-track 是空的撑高条、透明，留着不影响。 */
.site-header, .chapter-nav, .site-footer, .scene-caption,
.sw-sky, .sw-stage, .sw-copylayer, .sw-scrollbar, .sw-hint {
  transition: opacity .35s ease;
}

/* --- 世界之前：什么都还没开始，可视层全部收掉 ---------------------------
   不收的话，舞台那一层 fixed 会盖住世界前面的普通内容。 */
html.seize-before-world .sw-sky,
html.seize-before-world .sw-stage,
html.seize-before-world .sw-copylayer,
html.seize-before-world .site-header,
html.seize-before-world .chapter-nav,
html.seize-before-world .site-footer,
html.seize-before-world .scene-caption,
html.seize-before-world .sw-scrollbar,
html.seize-before-world .sw-hint {
  opacity: 0;
  pointer-events: none;
}

/* --- 世界整块滚出视口：画面层彻底收掉 -----------------------------------
   「滚动区间走完」（seize-after-world）时舞台要留着定格，让后面的内容卷上来
   盖住它。但再往下滚、连世界的高度都到视口上方去之后，页面已经翻到自己的
   页脚区了——这时画面层必须收掉，否则主题页脚之后那段会露出定格的画面，
   看起来像页尾超出了内容。 */
html.seize-past-world .sw-sky,
html.seize-past-world .sw-stage,
html.seize-past-world .sw-copylayer,
html.seize-past-world .seize-top-scrim {
  opacity: 0;
  pointer-events: none;
}

/* --- 世界之后：舞台【留着定格】，只收站点外壳 ---------------------------
   引擎给撑高条留了 1 个视口的余量，世界滚完之后、后面内容填满屏幕之前有
   一整屏空档。这里不收舞台，最后一幕就定格在那儿；site.js 把后面的内容
   抬到 z-index:30（高于舞台的 10），它会像帘子一样卷上来盖住，交界处不会
   出现白屏。

   站点外壳（章节导航/页脚/角标/进度条）必须收掉，否则它们会压在后面
   那些内容上面。 */
html.seize-after-world .site-header,
html.seize-after-world .chapter-nav,
html.seize-after-world .site-footer,
html.seize-after-world .scene-caption,
html.seize-after-world .sw-scrollbar,
html.seize-after-world .sw-hint {
  opacity: 0;
  pointer-events: none;
}

/* 兜底内容只在引擎挂掉时显示，区块模式下也一样 */
html.seize-before-world .fallback,
html.seize-after-world .fallback { display: none; }

/* --- 顶部遮罩：给主题的白色导航文字垫对比 -------------------------------
   主题页眉常是「透明背景 + 白色导航」压在深色 hero 上，而世界的画面偏浅，
   白字压上去看不见。这层从顶部往下渐隐的深色遮罩提供对比。

   z-index 50：在画面层（0~20）之上、页眉（99999）之下。
   高度跟着 --seize-top 走，再多 90px 渐变到透明，避免切出硬边。
   由 site.js 按需创建，独立整页模式不会出现。 */
.seize-top-scrim {
  position: fixed; left: 0; right: 0; top: 0;
  height: calc(var(--seize-top, 0px) + 90px);
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(12, 30, 28, .72) 0%,
    rgba(12, 30, 28, .42) 55%,
    rgba(12, 30, 28, 0) 100%);
  opacity: 1;
  transition: opacity .35s ease;
}

/* 世界滚出去之后跟着收起，别压住后面的正文 */
html.seize-out-of-world .seize-top-scrim { opacity: 0; }

/* --- 世界滚完之后，把最后一帧钉住 ---------------------------------------
   引擎按「超出该段末端多少」算场景透明度：
       outside = y - seg.end;  op = smooth(1 - outside / crossfade)
   世界滚完（y 超过撑高条的滚动区间）之后，最后一幕会被算成 opacity 0。

   但文案层的公式不一样，最后一段是 smooth(pr / 0.4) 且 pr 被钳在 1，
   所以【文字永远留着】。结果就是尾部只剩文字、画面没了。

   这里把最后一幕钉在 opacity 1，让它一直定格到被后面的内容盖住为止。
   必须 !important —— 引擎是写内联 style 的，样式表规则压不过内联。 */
html.seize-after-world .sw-stage .sw-scene:last-child { opacity: 1 !important; }

/* 文案层同理：钉住最后一张，让它也跟着定格，不要中途变淡 */
html.seize-after-world .sw-copylayer .sw-copy:last-child { opacity: 1 !important; }

/* -------------------------------------------------------------- 兜底 --- */
/* 没有 JS、或引擎挂掉时由 site.js 显示 */
.fallback { display: none; padding: 140px 6% 90px; max-width: 780px; margin: 0 auto; }
.fallback section { padding: 44px 0; border-bottom: 1px solid var(--line); }
.fallback h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.25; margin: 0 0 18px; }
.fallback h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 14px; }
.fallback p { font-size: 16px; line-height: 1.9; color: var(--muted); margin: 0 0 12px; }
.fallback a { color: var(--green); font-weight: 600; }

/* ------------------------------------------------------------ 响应式 --- */
@media (max-width: 980px) {
  .site-nav { display: none; }
  .brand-caption { display: none; }
  .menu-toggle { display: block; }
  .header-cta { padding: 11px 16px; font-size: 13px; }
}

@media (max-width: 860px) {
  :root { --header-h: 74px; --footer-h: 50px; --nav-h: 60px; }

  .chapter { padding: 0 12px; }
  .chapter-en { display: none; }
  .chapter-name { font-size: 12px; }

  /* 手机屏幕窄，文案改成贴底，并从底部往上铺一道更实的遮罩压住画面，
     否则文字会糊在方块上读不清。 */
  .sw-copy { left: 6%; right: 6%; top: auto; bottom: 28%; width: auto; max-width: none; }
  .sw-copylayer::before {
    width: 100%; height: 66%; top: auto; bottom: 0;
    background: linear-gradient(0deg, var(--paper) 14%,
      rgba(237, 242, 244, .92) 42%, rgba(237, 242, 244, .55) 68%,
      rgba(237, 242, 244, 0) 100%);
  }

  /* 文案卡里已经有 "01 / 04" 了，角标在手机上只会跟滚动提示打架 */
  .scene-caption { display: none; }
  .brand-logo { height: 30px; }

  /* 页脚：390px 宽放不下四段文字，砍掉两个标签并全部禁止换行 */
  .site-footer { padding: 0 4%; font-size: 11px; }
  .footer-left { gap: 10px; }
  .footer-left > span, .footer-contact span { white-space: nowrap; }
  .footer-contact { gap: 8px; }
  .footer-contact span { display: none; }        /* 省掉"7×24 服务热线"标签，只留号码 */
  .footer-contact a { font-size: 13px; white-space: nowrap; }
  .motion-toggle { padding: 5px 11px; font-size: 11px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}