/* =========================================================
   开卷 · 卷轴互动（移植 xiwan/qingming-scroll 的「木轴 + 纸窗 + 长卷横移 + 底部铨条」）
   .sc-intro 盖住全屏；里面 .sc-wrap 是唯一的滚动容器，.sc-scene 黏在顶上，
   上下滑动多少 → 长卷就横向展开多少。文字/旁白用本站自有内容，不带任何配乐与环境音。
   ========================================================= */

.sc-intro{
  position:fixed;inset:0;z-index:300;
  background:radial-gradient(120% 90% at 50% 38%,#2c241c 0%,#1a1511 56%,#14100c 100%);
  color:#efe5cf;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  transition:opacity .9s ease;
}
.sc-intro.fade{opacity:0}
.sc-intro.fade.fast{transition-duration:.35s}

/* 滚动容器（原生滚动：滚轮、触控板、触屏都顺） */
.sc-wrap{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:none;
}
.sc-wrap::-webkit-scrollbar{width:0;height:0}
.sc-spacer{width:1px;pointer-events:none}

/* 黏在顶上的舞台：整屏分「顶栏 / 卷轴 / 铨条」三段 */
.sc-scene{
  position:sticky;top:0;
  height:100vh;height:100dvh;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
}

/* ---------------- 顶栏 ---------------- */
.sc-hud{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(16px,2.4vw,34px) 6px;
  min-height:56px;box-sizing:border-box;
}
.sc-brand{display:flex;align-items:center;gap:10px;flex:none}
.sc-seal{
  display:inline-grid;place-items:center;width:30px;height:30px;padding:2px;
  background:#b5382a;color:#f8e9d8;font:400 11px/1.05 "STKaiti","KaiTi",serif;
  writing-mode:vertical-rl;border-radius:3px;transform:rotate(-2deg);
  box-shadow:inset 0 0 0 1.5px rgba(248,233,216,.5);
}
.sc-brand h1{margin:0;font:400 20px/1 "STKaiti","KaiTi",serif;letter-spacing:.16em;color:#f6ecd6}
.sc-brand small{display:block;font-size:11px;letter-spacing:.24em;color:rgba(239,229,207,.45);margin-top:4px}

.sc-now{
  flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:10px;white-space:nowrap;
}
.sc-no{font:400 12.5px/1 "STKaiti","KaiTi",serif;color:#d2ae72;letter-spacing:.12em}
.sc-name{font:400 20px/1 "STKaiti","KaiTi",serif;letter-spacing:.14em;color:#f6ecd6}
.sc-desc{
  min-width:0;overflow:hidden;text-overflow:ellipsis;
  font-size:12.5px;color:rgba(239,229,207,.6);letter-spacing:.04em;
}
.sc-now.in .sc-name,.sc-now.in .sc-desc{animation:scRise .55s ease both}
.sc-now.in .sc-desc{animation-delay:.06s}
@keyframes scRise{from{opacity:0;transform:translateY(5px)}}

.sc-ctrls{display:flex;align-items:center;gap:8px;flex:none}
.sc-btn{
  height:32px;padding:0 14px;font-size:13px;letter-spacing:.06em;
  background:rgba(239,229,207,.05);border:1px solid rgba(239,229,207,.18);
  border-radius:999px;color:#efe5cf;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.sc-btn:hover{background:rgba(239,229,207,.13);border-color:rgba(239,229,207,.36)}
.sc-btn:focus-visible{outline:2px solid #d2ae72;outline-offset:2px}
.sc-btn.on{background:rgba(210,174,114,.2);border-color:rgba(210,174,114,.6);color:#f6e6c4}
.sc-skip{color:#f0d9a0;border-color:rgba(210,174,114,.45)}
.sc-voice{
  position:absolute;left:50%;bottom:118px;transform:translateX(-50%);z-index:20;
  color:#f6e6c4;background:rgba(24,18,12,.9);
}

/* ---------------- 卷轴本体 ---------------- */
/* 注意：基础态必须是「全开」。
   开卷动效只是从「中间一道缝」展开到全幅的入场效果，用 from/to 写；
   一旦哪个环境不跑动画（省电模式、被别的样式 animation:none 掉、缓存了旧样式…），
   元素就停在基础态 = 完整展开，绝不会再出现「只剩一根竖细条」的情况。 */
.sc-stage{
  position:relative;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:8px clamp(10px,3vw,46px);
  clip-path:none;
  animation:scUnroll 1.25s cubic-bezier(.45,.05,.35,1) .1s both;
}
@keyframes scUnroll{
  from{clip-path:inset(0 49% 0 49%)}
  to{clip-path:inset(0 0 0 0)}
}

.sc-paper{
  position:relative;overflow:hidden;flex:none;
  aspect-ratio:1500 / 832;max-width:100%;max-height:100%;
  background:#efe2c6 url("../背景/清明上河图卷.webp") center/cover no-repeat;
  box-shadow:0 24px 56px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  cursor:grab;touch-action:pan-y;user-select:none;
}
.sc-paper.grabbing{cursor:grabbing}
.sc-paper *{user-select:none}
/* 卷面：一条很长的横卷（纸窗的 3.4 倍宽），JS 只改 translateX */
/* 卷面：原片（清明上河图 1080p 长卷）铺满纸窗，卷上另叠一层纸色罩染与宣纸纹 */
.sc-video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  background:#efe2c6;pointer-events:none;
}
.sc-art{
  position:absolute;left:0;top:0;height:100%;width:340%;
  will-change:transform;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,252,242,.42) 0%,rgba(255,252,242,.06) 14%,rgba(255,252,242,0) 34%,
                    rgba(255,252,242,0) 78%,rgba(250,240,220,.22) 93%,rgba(247,235,213,.42) 100%);
  box-shadow:inset 0 0 120px rgba(120,86,44,.22);
}
.sc-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../装饰/宣纸纹.webp") repeat;background-size:256px 256px;opacity:.34;
  mix-blend-mode:multiply;
}
/* 纸边卷起的暗角 */
.sc-curl{position:absolute;top:0;bottom:0;width:18px;pointer-events:none;z-index:6}
.sc-curl.l{left:0;background:linear-gradient(90deg,rgba(40,24,12,.4),rgba(40,24,12,0))}
.sc-curl.r{right:0;background:linear-gradient(270deg,rgba(40,24,12,.4),rgba(40,24,12,0))}

/* 轴杆：深色漆木 + 上下牙白轴头；卷起多少，轴就多粗（JS 设 --d） */
.sc-rod{
  --d:16px;
  position:relative;z-index:7;flex:none;
  width:var(--d);height:calc(100% + 6px);
  margin:0 -3px;border-radius:4px;
  background:linear-gradient(90deg,#2a130b 0%,#6b3420 28%,#a8653d 46%,#7a3d24 62%,#3a1b0f 88%,#1f0e07 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.5);
  transition:width .45s ease;
}
.sc-rod::before,.sc-rod::after{
  content:"";position:absolute;left:-3px;right:-3px;height:16px;border-radius:3px;
  background:linear-gradient(90deg,#6f6249 0%,#c9bc9b 30%,#f3ead3 48%,#b9aa86 70%,#5f533e 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.45);
}
.sc-rod::before{top:-15px}
.sc-rod::after{bottom:-15px}

/* ---------------- 卷上内容 ---------------- */
/* 旁白字幕：四句原文压在卷面下沿，随朗读逐句换行（文字与配音都沿用原来的） */
.sc-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(64px,15vh,200px);z-index:8;
  pointer-events:none;background:linear-gradient(0deg,rgba(22,14,8,.8),rgba(22,14,8,.4) 48%,rgba(22,14,8,0))}
.sc-sub{
  position:absolute;left:50%;bottom:clamp(16px,3.4vh,38px);transform:translateX(-50%);
  z-index:9;width:min(92%,1000px);height:2.2em;pointer-events:none;text-align:center;
}
.sc-sub .sc-line{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  font-family:"STKaiti","KaiTi","楷体",serif;
  font-size:clamp(15px,1.34vw,23px);letter-spacing:.12em;line-height:1.55;
  color:#FFF9EC;opacity:0;visibility:hidden;
  text-shadow:0 1px 3px rgba(14,8,3,.98),0 2px 12px rgba(14,8,3,.9),0 0 26px rgba(14,8,3,.8),0 0 60px rgba(14,8,3,.55);
  transition:opacity .1s ease,visibility 0s linear .1s;
  will-change:opacity;
}
.sc-sub .sc-line.show{
  opacity:1;visibility:visible;
  transition:opacity .06s ease 0s,visibility 0s linear 0s;
}

/* 历史长河：铺满整条横卷的 SVG（纯代码画的远山/河道/波纹/飞鸟） */
.sc-river{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.sc-river .river{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sc-river .mtn{stroke:none}
.sc-river .sc-flow{fill:none;stroke:rgba(206,160,86,.8);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:3 16}
.sc-river .sc-ripple path{fill:none;stroke:rgba(72,116,128,.4);stroke-width:1.8;stroke-linecap:round}
.sc-river .sc-bird{fill:none;stroke:rgba(96,88,70,.42);stroke-width:1.7;stroke-linecap:round}

/* 十六件文物：沿河一件一上一下，像悬在卷上的玉璧 */
.sc-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none;opacity:0;z-index:3;transition:opacity .7s ease,transform .7s ease;
}
.sc-node.in{opacity:1}
.sc-node .sc-ring{
  position:relative;display:grid;place-items:center;
  width:var(--art,62px);height:var(--art,62px);
}
.sc-node .sc-ring::before{
  content:"";position:absolute;inset:-34%;
  background:radial-gradient(circle,rgba(255,253,246,.72) 28%,rgba(255,250,235,.4) 56%,rgba(255,250,235,0) 82%);
}
.sc-node img{
  position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:2px solid rgba(198,150,74,.9);
  box-shadow:0 0 0 3px rgba(255,250,240,.5),0 14px 24px -12px rgba(70,40,16,.6);
  filter:saturate(1.02);
}
.sc-node b{
  font-family:"STKaiti","KaiTi",serif;font-weight:700;font-size:12px;letter-spacing:.06em;
  color:#6B3410;background:linear-gradient(180deg,rgba(255,252,243,.96),rgba(250,240,220,.92));
  border:1px solid rgba(176,124,62,.6);border-radius:3px;padding:1px 7px;
  box-shadow:0 3px 9px rgba(70,40,16,.22),inset 0 0 0 1px rgba(255,255,255,.7);
  white-space:nowrap;
}
.sc-node.lit img{border-color:#FFEBBC;box-shadow:0 0 0 3px rgba(255,246,220,.34),0 0 22px rgba(255,200,116,.42)}
.sc-node.lit b{color:#A5181C;border-color:rgba(200,154,78,.95)}
/* 沿河牵一缕虚线，让节点「挂」在河上 */
.sc-node::after{
  content:"";position:absolute;left:50%;width:1px;height:22px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(176,124,62,.55) 0 3px,rgba(176,124,62,0) 3px 7px);
}
.sc-node.up::after{top:100%}
.sc-node.down::after{bottom:100%}

/* 卷上的小舟 */
.sc-boat{
  position:absolute;width:clamp(38px,3.4vw,58px);pointer-events:none;z-index:1;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 3px 4px rgba(70,40,16,.18));
}
.sc-boat svg{display:block;width:100%;height:auto;animation:scFloat 5s ease-in-out infinite}
.sc-boat.s2{width:clamp(28px,2.4vw,42px);opacity:.72}
.sc-boat.s2 svg{animation-duration:6.4s;animation-delay:-2s}
@keyframes scFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------------- 底部铨条 ---------------- */
.sc-rail{padding:2px clamp(14px,2.4vw,34px) 12px}
.sc-labels{position:relative;height:24px;max-width:1560px;margin:0 auto}
.sc-lab{
  position:absolute;bottom:3px;transform:translateX(-50%);
  padding:1px 4px;border:0;background:none;cursor:pointer;
  font:400 11.5px/1.2 "STKaiti","KaiTi",serif;letter-spacing:.02em;white-space:nowrap;
  color:rgba(239,229,207,.4);transition:color .3s;
}
.sc-lab::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:1px;height:4px;background:currentColor;
}
.sc-lab:hover{color:rgba(239,229,207,.78)}
.sc-lab.on{color:#f6ecd6}
.sc-lab.on::after{background:#d2ae72}

.sc-bar{position:relative;height:46px;max-width:1560px;margin:0 auto;cursor:pointer;touch-action:none}
.sc-thumb{
  position:absolute;inset:0;border-radius:3px;overflow:hidden;background:#e9dec5;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.4);
}
.sc-pano{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,248,230,.16),rgba(60,40,20,.16));
}
.sc-win{
  position:absolute;top:0;bottom:0;left:0;width:29%;z-index:2;
  border:2px solid #f6ecd6;border-radius:2px;
  box-shadow:0 0 0 4000px rgba(12,9,6,.46),0 0 12px rgba(255,240,210,.35);
  pointer-events:none;will-change:transform,width;
}
.sc-marks{position:absolute;inset:0;pointer-events:none}
.sc-mark{
  position:absolute;bottom:-4px;width:8px;height:8px;margin-left:-4px;padding:0;border:0;
  border-radius:1px;background:#b5382a;transform:rotate(45deg);
  box-shadow:0 0 0 1.5px rgba(248,233,216,.7);
  pointer-events:auto;cursor:pointer;transition:background .2s;
}
.sc-mark:hover{background:#d4503f}
.sc-mark.on{background:#f0d9a0}

/* ---------------- 窄屏 ---------------- */
@media (max-width:860px){
  .sc-brand small{display:none}
  .sc-brand h1{font-size:16px}
  .sc-now{justify-content:flex-start;gap:7px}
  .sc-name{font-size:15px}
  .sc-desc{display:none}
  .sc-btn{height:28px;padding:0 10px;font-size:12px}
  .sc-stage{padding:6px 4px}
  .sc-lab{font-size:10px}
  .sc-lab:nth-child(2n){visibility:hidden}
  .sc-bar{height:38px}
  .sc-voice{bottom:96px}
}
/* 竖屏：纸窗按宽卷比例收在中段，字幕上提到卷下沿，别沉到屏幕最底 */
@media (max-width:560px){
  .sc-paper{aspect-ratio:8 / 5}
  .sc-sub{bottom:clamp(148px,23vh,224px);width:94%}
  .sc-sub .sc-line{font-size:13px;letter-spacing:.015em;line-height:1.5}
  .sc-stage::after{height:clamp(70px,13vh,130px)}
}
@media (prefers-reduced-motion:reduce){
  .sc-stage{animation-duration:.01s}
  .sc-boat svg{animation:none}
}