/* ============================================================
   story.css — 滚动叙事页（白夜漫游 · NIGHT RIDE）
   3D 模型 + 文字块交替出现，滚动进度精确驱动
   ============================================================ */

:root {
  --bg: #07080f;
  --ink: #ece9e2;
  --mut: #9aa0b4;
  --acc-v: #8b6cff;
  --acc-c: #3fd8d2;
  --acc-o: #ff9a5a;
  --line: rgba(255, 255, 255, .12);
  --mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
  --kai: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", serif;   /* 交互文字：楷体，告别霓虹 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body.s-body {
  /* 背景：深蓝渐变 + 两团微弱的青/紫光晕，代替死黑，给 3D 场景"留出空间感" */
  background:
    radial-gradient(1100px 750px at 72% 18%, rgba(63, 216, 210, .10), transparent 60%),
    radial-gradient(900px 700px at 15% 85%, rgba(139, 108, 255, .12), transparent 60%),
    linear-gradient(180deg, #0c1226 0%, #07080f 45%, #04050c 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 全屏 3D 画布（固定背景） ---------- */

#s-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  touch-action: pan-y;   /* 允许垂直滚动（手机），水平拖拽交给 JS 旋转模型 */
  display: block;
}

/* ---------- 顶部栏 + 进度条 ---------- */

.s-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 26px;
  pointer-events: none;
  mix-blend-mode: normal;
}
.s-top a, .s-top p { pointer-events: auto; }

.s-back {
  color: var(--mut);
  text-decoration: none;
  font-family: var(--kai);
  font-size: 14px;
  letter-spacing: .1em;
  transition: color .25s;
  white-space: nowrap;
}
.s-back:hover { color: var(--ink); }

.s-title {
  color: var(--mut);
  font-size: 12px;
  letter-spacing: .3em;
  white-space: nowrap;
}
.s-title span { color: #565b70; }

.s-progress {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, .1);
  border-radius: 2px;
  overflow: hidden;
  margin-left: auto;
  max-width: 260px;
}
.s-progress__bar {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: rgba(236, 233, 226, .65);
}

/* 自动夜骑 / 月亮按钮：素色细边，不发光 */
.s-autoplay {
  pointer-events: auto;
  background: transparent;
  color: var(--mut);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 7px 18px;
  font-family: var(--kai);
  font-size: 13.5px;
  letter-spacing: .1em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s, border-color .25s, background .25s;
}
.s-autoplay:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .32);
  color: var(--ink);
}
.s-autoplay--on {
  color: var(--ink);
  border-color: rgba(255, 255, 255, .38);
}
.s-autoplay--on:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .5);
}

/* 章节锚点导航（4 个圆点） */
.s-nav {
  display: flex;
  gap: 9px;
  align-items: center;
  pointer-events: auto;
}
.s-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 0;
  cursor: pointer;
  transition: all .25s;
}
.s-nav__dot:hover {
  background: rgba(255, 255, 255, .38);
  border-color: rgba(255, 255, 255, .55);
}
.s-nav__dot.is-active {
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- 滚动提示 ---------- */

.s-hint {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 20;
  color: var(--ink);
  font-family: var(--kai);
  font-size: 13.5px;
  letter-spacing: .22em;
  text-align: center;
  opacity: .85;
  pointer-events: auto;   /* 允许点击开启音效 */
  cursor: pointer;
  animation: s-bounce 1.8s ease-in-out infinite;
  transition: color .25s, opacity .25s;
}
.s-hint:hover { color: #fff; opacity: 1; }
.s-hint__sound {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--mut);
  animation: none;
}
.s-hint--on { color: #fff; }
.s-hint--on .s-hint__sound { color: var(--ink); }
.s-hint__play {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .12em;
  color: #565b70;
}
@media (max-width: 640px) {
  .s-hint__play { display: none; }   /* 手机没有拖拽交互，隐藏引导 */
}
@keyframes s-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* （跟随鼠标的大辉光已删：夜路要安静，光是月亮和路灯的事） */

/* ---------- 章节与文字块 ---------- */

.s-story { position: relative; z-index: 5; pointer-events: none; } /* 鼠标穿透到 canvas，供 3D 交互 */

.s-chapter {
  position: relative;
  height: 150vh;                 /* 每章 1.5 屏滚动空间（原 220vh 偏长，紧凑到 ~600vh 总计） */
  display: flex;
  align-items: center;
  pointer-events: none;
}
.s-chapter--1 { height: 170vh; } /* 开场多留一点 */
.s-chapter--4 { height: 140vh; } /* 收尾略短 */

.s-block {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  max-width: 520px;
  padding: 34px 40px;
  /* 去掉毛玻璃卡片：文字直接"裸奔"在 3D 场景上，
     mix-blend-mode: screen 让文字颜色与背后模型颜色互相叠加 → 交融感 */
  mix-blend-mode: screen;
  /* drop-shadow 按文字轮廓投影（不破坏 em 渐变透明文字），保证亮模型前可读
     强度从 16px/0.5 → 24px/0.7，应对 bloom/亮模型区可能糊字 */
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, .7));
  will-change: transform, opacity;
  pointer-events: none;          /* 文字不拦截鼠标，事件直达 3D 场景 */
}

.s-block--left  { margin-left: clamp(20px, 9vw, 130px); }
.s-block--right { margin-left: auto; margin-right: clamp(20px, 9vw, 130px); }

.s-block__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--acc-o);
  margin-bottom: 18px;
}

.s-block__title {
  /* 衬线标题：与「观鸟手记」方向一致，夜读文学感 */
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 900;
  letter-spacing: .06em;
  margin-bottom: 18px;
  line-height: 1.15;
}
.s-block__title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--acc-c), var(--acc-v));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.s-block__text {
  /* 正文同衬线，行距放宽：夜里的独白要有书页感 */
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  color: var(--mut);
  font-size: 17px;
  line-height: 2.05;
  margin-bottom: 20px;
}

.s-block__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  /* screen 混合下暗色会"隐形"，所以元信息用中灰色保证可读 */
  color: #8b93a8;
}

/* 章节内的文字动画初始态（由 GSAP 控制） */
.s-block[data-block] .s-block__kicker,
.s-block[data-block] .s-block__title,
.s-block[data-block] .s-block__text,
.s-block[data-block] .s-block__meta {
  opacity: 0;
  transform: translateY(46px);
}
.no-js .s-block[data-block] .s-block__kicker,
.no-js .s-block[data-block] .s-block__title,
.no-js .s-block[data-block] .s-block__text,
.no-js .s-block[data-block] .s-block__meta,
.no-gsap .s-block[data-block] .s-block__kicker,
.no-gsap .s-block[data-block] .s-block__title,
.no-gsap .s-block[data-block] .s-block__text,
.no-gsap .s-block[data-block] .s-block__meta {
  opacity: 1;
  transform: none;
}

/* ---------- Lenis 平滑滚动配套 ---------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- 尾注 ---------- */

.s-footer {
  position: relative;
  z-index: 5;
  text-align: center;
  color: var(--mut);
  font-size: 12px;
  letter-spacing: .18em;
  line-height: 2.2;
  padding: 60px 24px 80px;
  border-top: 1px solid var(--line);
}
.s-footer a { color: var(--acc-c); text-decoration: none; }
.s-footer a:hover { color: var(--ink); }
.s-footer__back { margin-top: 10px; }

/* ---------- 移动端适配 ---------- */

@media (max-width: 640px) {
  .s-block { max-width: 86vw; padding: 26px 24px; }
  .s-block--left, .s-block--right { margin-left: auto; margin-right: auto; }
  .s-title { display: none; }
  .s-nav { display: none; }     /* 手机空间紧，隐藏锚点；后续可改成浮窗 */
  .s-top { padding: 14px 18px; gap: 10px; }
  .s-progress { max-width: 80px; }
  .s-autoplay { padding: 6px 12px; font-size: 11px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .s-hint { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 手记回链（第 4 章尾声 → 首页 No.06 permalink） ---------- */
.s-link-line { margin-top: 14px; }
.s-link {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px dashed rgba(236, 233, 226, .35);
  font-size: 12.5px; letter-spacing: .06em;
  transition: color .2s, border-color .2s;
}
.s-link:hover { color: #fff; border-bottom-color: rgba(236, 233, 226, .8); }

/* ---------- 加载提示（3D 场景 / GLB 模型下载期间覆盖白屏） ---------- */

.s-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 与 body 背景一致，避免从纯黑跳变突兀 */
  background:
    radial-gradient(1100px 750px at 72% 18%, rgba(63, 216, 210, .10), transparent 60%),
    radial-gradient(900px 700px at 15% 85%, rgba(139, 108, 255, .12), transparent 60%),
    linear-gradient(180deg, #0c1226 0%, #07080f 45%, #04050c 100%);
  opacity: 1;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.s-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* 隐藏后不再拦截点击/滚动 */
}
.s-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* 旋转环：青紫双色描边，呼应夜骑的月光与霓虹 */
.s-loader__ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .14);
  border-top-color: var(--acc-c);
  border-right-color: var(--acc-v);
  animation: s-spin 1s linear infinite;
}
.s-loader__txt {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--ink);
  opacity: .92;
}
.s-loader__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--mut);
}
@keyframes s-spin {
  to { transform: rotate(360deg); }
}
/* 尊重"减少动态效果"：停止旋转，仅保留淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  .s-loader__ring { animation: none; }
  .s-loader { transition: opacity .3s ease, visibility 0s linear .3s; }
}