/* ══════════════════════════════════════════════════════════════════
   致小鱼 · 十九岁
   配色：未定事件簿暖橙 × 刘宇应援色青瓷蓝 × 深夜蓝黑
   纹样：祥云 / 回纹 / 缠枝莲 / 团扇（非遗国风）
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* 青瓷蓝 —— 主调 */
  --c-900:#06222A;  --c-800:#0A3440;  --c-700:#0F4C5C;
  --c-600:#166B7D;  --c-500:#2E93A8;  --c-400:#5FC2D4;
  --c-300:#96DCE7;  --c-200:#C6EEF3;  --c-100:#E6F8FA;

  /* 暖橙 —— 未定事件簿 */
  --o-700:#B34A0E;  --o-500:#F2792B;  --o-400:#FF9A3C;
  --o-300:#FFB870;  --o-200:#FFD9A8;  --o-100:#FFF0D8;

  /* 夜 */
  --n-900:#03080A;  --n-800:#071217;  --n-700:#0C1D24;  --n-600:#132A33;

  /* 纸 / 麻绳 / 木夹 */
  --paper:#FBF3E6;  --paper-2:#F2E4D0;
  --ink:#2E2A24;    --ink-2:#5C5147;   --ink-3:#8E8274;
  --rope:#C89B63;   --wood:#D8AC72;    --seal:#D6402A;

  --ff-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,SimSun,Georgia,serif;
  --ff-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --ff-kai:"Kaiti SC",STKaiti,KaiTi,楷体,"Noto Serif SC",serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* 挂照片的统一高度：宽度 = 高度 × 原图比例，永不裁切 */
  --ph:clamp(50px,11.2vw,150px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-sans);
  background:var(--n-900);
  color:var(--paper);
  overflow-x:hidden;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ───────────────── 背景层 ───────────────── */
.sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(230,248,250,.7),transparent 100%),
    radial-gradient(1.2px 1.2px at 28% 8%,rgba(198,238,243,.6),transparent 100%),
    radial-gradient(1.6px 1.6px at 44% 24%,rgba(230,248,250,.5),transparent 100%),
    radial-gradient(1.1px 1.1px at 62% 12%,rgba(230,248,250,.65),transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 28%,rgba(198,238,243,.55),transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 9%,rgba(230,248,250,.6),transparent 100%),
    radial-gradient(1.3px 1.3px at 8% 38%,rgba(198,238,243,.45),transparent 100%),
    radial-gradient(1.4px 1.4px at 94% 42%,rgba(230,248,250,.45),transparent 100%),
    radial-gradient(120% 78% at 50% 106%,rgba(46,147,168,.22) 0%,rgba(46,147,168,0) 58%),
    radial-gradient(86% 58% at 14% -6%,rgba(255,154,60,.13) 0%,rgba(255,154,60,0) 60%),
    linear-gradient(178deg,#03080A 0%,#071217 34%,#0C1D24 62%,#050D11 100%);
}
.layer{position:fixed;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
#cf{z-index:2}
.grain{
  position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-3%,-4%)}
  33%{transform:translate(4%,-2%)}  50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,4%)}   83%{transform:translate(-4%,-3%)}
}
.vig{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(115% 78% at 50% 45%,transparent 50%,rgba(0,0,0,.62) 100%);
}

/* ───────────────── 场景通用 ───────────────── */
.scene{
  position:relative;z-index:5;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(72px,10vh,120px) clamp(20px,5vw,64px);
  transition:opacity 1.1s var(--ease-out);
}
/* 开场烟花期间：正片全部藏起来，只有烟花和夜空 */
body.prelude-on .scene{opacity:0;pointer-events:none}
body.prelude-on .cover-inner *,
body.prelude-on .scroll-hint{animation-play-state:paused}
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ═════════════════ 幕 0 · 开场 ═════════════════ */
.prelude{
  position:fixed;inset:0;z-index:60;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.prelude.hide{opacity:0;visibility:hidden;pointer-events:none}
.prelude::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 100%,rgba(3,8,10,.66) 0%,rgba(3,8,10,0) 62%);
}
/* 爆开瞬间的全屏闪光（暖色只留一点，主调还是青瓷蓝） */
.pl-flash{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,
    rgba(255,252,246,.86) 0%,
    rgba(240,250,252,.42) 13%,
    rgba(255,214,160,.20) 27%,
    rgba(95,194,212,.10) 44%,
    rgba(46,147,168,0) 62%);
}
.pl-flash.go{animation:plFlash 1.7s var(--ease-out) forwards}
@keyframes plFlash{
  0%{opacity:0;transform:scale(.16)}
  9%{opacity:.96;transform:scale(.96)}
  34%{opacity:.34;transform:scale(1.34)}
  100%{opacity:0;transform:scale(1.95)}
}
/* 爆开后从光里浮出的「19th」 */
.pl-word{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-serif);font-weight:900;line-height:1;
  opacity:0;filter:blur(26px);transform:scale(.82);
}
.pl-word b{
  font-size:clamp(84px,20vw,250px);letter-spacing:-.02em;
  background:linear-gradient(170deg,#FFFFFF 0%,var(--c-200) 32%,var(--c-400) 64%,var(--o-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pl-word i{
  font-style:normal;font-size:clamp(26px,6vw,74px);color:var(--c-300);
  margin-left:.06em;transform:translateY(-.62em);opacity:.9;
  text-shadow:0 0 30px rgba(95,194,212,.8);
}
.pl-word.go{animation:plWord 2.8s var(--ease-out) forwards}
@keyframes plWord{
  0%{opacity:0;transform:scale(.72);filter:blur(26px)}
  16%{opacity:1;transform:scale(1.03);filter:blur(0)}
  30%{transform:scale(1)}
  74%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.1);filter:blur(8px)}
}
/* 冲击光环 */
.pl-ring{
  position:absolute;left:50%;top:42%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;border:1px solid rgba(198,238,243,.7);opacity:0;
  box-shadow:0 0 40px rgba(255,196,107,.5),inset 0 0 40px rgba(198,238,243,.3);
}
.pl-ring.go{animation:plRing 1.5s var(--ease-out) forwards}
@keyframes plRing{
  0%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(60)}
}
.pl-tip{
  position:absolute;bottom:clamp(30px,7vh,66px);left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.34em;color:rgba(230,248,250,.62);white-space:nowrap;
  opacity:0;animation:fadeIn 1s var(--ease-out) 3.6s forwards;
}
@keyframes fadeIn{to{opacity:1}}
@keyframes riseIn{to{opacity:1;transform:none}}

/* ═════════════════ 幕 1 · 封面 ═════════════════ */
.s-cover{text-align:center}
.cover-inner{display:flex;flex-direction:column;align-items:center}

.cv-top{
  display:flex;align-items:center;gap:14px;
  opacity:0;transform:translateY(10px);
  animation:riseIn 1.1s var(--ease-out) .45s forwards;
}
.cv-line{display:block;width:clamp(26px,7vw,66px);height:1px;background:linear-gradient(90deg,transparent,rgba(95,194,212,.7))}
.cv-line:last-child{background:linear-gradient(270deg,transparent,rgba(95,194,212,.7))}
.cv-date{font-size:10.5px;font-weight:700;letter-spacing:.36em;color:var(--c-300);white-space:nowrap}

.cv-title{
  display:flex;align-items:baseline;justify-content:center;gap:clamp(10px,2.4vw,26px);
  margin:clamp(18px,3.2vh,32px) 0 clamp(20px,3.2vh,34px);line-height:.94;
}
.cvt-en{
  font-family:var(--ff-serif);font-weight:400;font-style:italic;
  font-size:clamp(28px,6vw,70px);color:var(--c-200);
  opacity:0;transform:translateY(26px) scale(.96);
  animation:riseIn 1.35s var(--ease-out) .8s forwards;
  text-shadow:0 0 44px rgba(95,194,212,.5);
}
.cvt-num{
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(52px,12vw,140px);letter-spacing:-.03em;
  background:linear-gradient(172deg,#FFFFFF 4%,var(--c-300) 32%,var(--c-500) 60%,var(--o-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(30px) scale(.9);
  animation:riseIn 1.5s var(--ease-out) 1s forwards;
  filter:drop-shadow(0 0 34px rgba(46,147,168,.6));
}
.cvt-num em{font-style:normal;font-size:.4em;letter-spacing:0}

.cv-to{
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(17px,2.6vw,26px);letter-spacing:.42em;text-indent:.42em;
  color:var(--c-100);
  opacity:0;transform:translateY(14px);
  animation:riseIn 1.2s var(--ease-out) 1.35s forwards;
}
.cv-rule{
  display:flex;align-items:center;gap:14px;margin:clamp(16px,2.6vh,26px) 0 clamp(12px,2vh,20px);
  opacity:0;animation:riseIn 1.1s var(--ease-out) 1.6s forwards;
}
.cv-rule i{display:block;width:clamp(24px,7vw,72px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,154,60,.6))}
.cv-rule i:last-child{background:linear-gradient(270deg,transparent,rgba(255,154,60,.6))}
.cv-rule span{color:var(--o-400);font-size:13px}
.cv-poem{
  font-family:var(--ff-kai);font-size:clamp(14px,2vw,20px);letter-spacing:.16em;
  color:rgba(230,248,250,.9);
  opacity:0;transform:translateY(14px);
  animation:riseIn 1.2s var(--ease-out) 1.8s forwards;
}
.cv-note{
  margin-top:clamp(10px,1.6vh,18px);
  font-size:11px;letter-spacing:.42em;text-indent:.42em;color:rgba(198,238,243,.55);
  opacity:0;animation:riseIn 1.2s var(--ease-out) 2.1s forwards;
}

.scroll-hint{
  position:fixed;left:50%;bottom:clamp(18px,4vh,40px);transform:translateX(-50%);
  z-index:7;display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:riseIn 1.1s var(--ease-out) 2.6s forwards;
  transition:opacity .6s var(--ease);
}
.sh-txt{font-size:10.5px;letter-spacing:.32em;color:rgba(230,248,250,.5)}
.sh-line{position:relative;display:block;width:1px;height:44px;background:rgba(230,248,250,.16);overflow:hidden}
.sh-line i{position:absolute;left:0;width:1px;height:16px;background:linear-gradient(180deg,transparent,var(--c-300));animation:runDown 2.1s var(--ease) infinite}
@keyframes runDown{0%{top:-16px}100%{top:44px}}
.scroll-hint.gone{opacity:0 !important;pointer-events:none}

/* ═════════════════ 幕 2 · 卷宗 · 挂照片 ═════════════════ */
.s-board{justify-content:flex-start;padding-top:clamp(76px,11vh,132px)}
.board-wrap{width:100%;max-width:1180px;margin:0 auto}

/* 卷宗抬头（未定事件簿式） */
.case-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,3vw,34px);
  padding:clamp(12px,2vh,18px) clamp(14px,2.4vw,26px);
  border:1px solid rgba(95,194,212,.22);
  border-radius:3px;
  background:
    linear-gradient(180deg,rgba(46,147,168,.10),rgba(3,8,10,.34)),
    repeating-linear-gradient(90deg,rgba(198,238,243,.05) 0 1px,transparent 1px 14px);
  position:relative;
}
.case-head::before,.case-head::after{
  content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--o-400);opacity:.75;
}
.case-head::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.case-head::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.ch-left{display:flex;flex-direction:column;gap:2px}
.ch-file{font-size:9.5px;letter-spacing:.34em;color:var(--c-400)}
.ch-no{font-family:var(--ff-serif);font-size:clamp(15px,2.2vw,22px);font-weight:900;color:var(--c-200);letter-spacing:.06em}
.ch-no b{color:var(--o-400);font-size:1.22em}
.ch-mid{text-align:center}
.ch-title{
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(19px,3.4vw,38px);line-height:1.3;letter-spacing:.05em;
}
.ch-title span{
  background:linear-gradient(100deg,var(--c-300) 0%,var(--o-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ch-sub{margin-top:6px;font-family:var(--ff-kai);font-size:clamp(12.5px,1.6vw,16px);letter-spacing:.2em;color:rgba(230,248,250,.7)}
.ch-right{display:flex;align-items:center}
.ch-stamp{
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(11px,1.4vw,14px);letter-spacing:.14em;
  color:var(--seal);padding:5px 9px;border:2px solid rgba(214,64,42,.72);border-radius:4px;
  transform:rotate(-8deg);opacity:.9;
  box-shadow:inset 0 0 0 1px rgba(214,64,42,.2);
}

/* 被祝福人档案条 */
.dossier{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(10px,1.8vw,20px);
  margin-top:clamp(12px,2vh,18px);padding:10px clamp(12px,2vw,20px);
  border-left:2px solid var(--c-500);
  background:linear-gradient(90deg,rgba(46,147,168,.10),rgba(46,147,168,0));
  border-radius:0 3px 3px 0;
}
.ds-k{font-size:10px;letter-spacing:.3em;color:var(--c-400)}
.ds-v{font-family:var(--ff-kai);font-size:clamp(12.5px,1.55vw,15.5px);color:rgba(251,243,230,.9);letter-spacing:.06em}

/* 一排麻绳 + 挂着的照片 */
.rope-rows{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(26px,5vh,58px);
  margin-top:clamp(26px,4.5vh,52px);
}
.rope-row{position:relative;width:max-content;max-width:100%}
.rope{
  position:absolute;top:8px;left:0;width:100%;height:30px;display:block;
  overflow:visible;
}
.rope path{fill:none;stroke:url(#g-rope);stroke-width:2}
.rope-knot{
  position:absolute;top:7px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F0D6AC,var(--rope));
  box-shadow:0 1px 4px rgba(0,0,0,.55);
}
.rope-items{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(7px,1.5vw,20px);
  margin-top:34px;padding:0 clamp(14px,2vw,30px);
}

.hung{
  position:relative;flex:0 0 auto;
  margin-top:var(--drop,10px);
  opacity:0;transform:translateY(-16px) rotate(var(--rot,0deg));
  transition:opacity .8s var(--ease-out),transform .9s var(--ease-out),filter .5s var(--ease);
}
.rope-row.in .hung{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))}
.hung{transition-delay:var(--d,0s)}
/* 细绳：从麻绳垂到木夹 */
.hg-string{
  position:absolute;left:50%;top:calc(-1 * var(--drop,10px));
  width:1px;height:var(--drop,10px);
  background:linear-gradient(180deg,rgba(200,155,99,.9),rgba(200,155,99,.45));
}
/* 木夹 */
.hg-clip{
  position:absolute;left:50%;top:-9px;width:11px;height:20px;margin-left:-5.5px;z-index:3;
  border-radius:2.5px;
  background:linear-gradient(100deg,var(--wood) 0%,#F0D2A4 42%,#B98549 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 -6px 5px -5px rgba(0,0,0,.6);
}
.hg-clip::after{
  content:"";position:absolute;left:1.5px;right:1.5px;top:6px;height:1.5px;
  background:rgba(90,58,24,.55);border-radius:1px;
}
/* 相纸 */
.hg-card{
  position:relative;background:var(--paper);padding:5px;border-radius:2px;
  box-shadow:0 12px 30px rgba(0,0,0,.62),0 0 0 1px rgba(150,220,231,.12);
}
.hg-card img{
  width:calc(var(--ph) * var(--ar));height:var(--ph);
  object-fit:contain;border-radius:1px;background:#0B1A20;
  filter:saturate(1.04) contrast(1.03);
}
.hg-no{
  position:absolute;top:-7px;right:-7px;z-index:4;
  min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  display:grid;place-items:center;
  font-size:10px;font-weight:800;letter-spacing:.02em;
  background:linear-gradient(140deg,var(--c-600),var(--c-500));
  color:#EAFBFD;box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 1px rgba(198,238,243,.3);
}
.hg-cap{
  width:calc(var(--ph) * var(--ar) + 10px);
  margin-top:5px;padding:0 2px;
  font-family:var(--ff-kai);font-size:11.5px;line-height:1.5;letter-spacing:.02em;
  color:rgba(251,243,230,.68);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hung:hover{filter:drop-shadow(0 0 22px rgba(46,147,168,.5))}
.hung:hover .hg-card{box-shadow:0 20px 44px rgba(0,0,0,.72),0 0 0 1px rgba(150,220,231,.5)}

/* 归档落款 */
.board-foot{
  margin-top:clamp(28px,5vh,56px);text-align:center;
  font-family:var(--ff-kai);font-size:clamp(13px,1.7vw,17px);letter-spacing:.22em;
  color:rgba(198,238,243,.62);
}

/* ═════════════════ 幕 3 · 汉服横幅 ═════════════════ */
.s-hanfu{overflow:hidden}
.han-stage{
  position:relative;width:100%;max-width:1180px;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(10px,3vh,40px) 0;
}

/* 非遗纹样点缀 */
.han-deco{position:absolute;color:rgba(95,194,212,.17);pointer-events:none}
.han-deco-tl{top:2%;left:0;width:clamp(90px,13vw,170px)}
.han-deco-br{bottom:6%;right:0;width:clamp(90px,13vw,170px);transform:rotate(180deg)}
.han-fan{
  position:absolute;top:47%;left:50%;transform:translate(-50%,-52%);
  width:clamp(190px,25vw,320px);color:rgba(95,194,212,.11);pointer-events:none;
}

/* 立绘 + 横幅 同一行 */
.han-row{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:100%;gap:0;
}
.han-chibi{
  flex:0 0 auto;width:clamp(150px,21vw,288px);
  transform:translateX(-118vw);
  transition:transform 1.9s var(--ease-out);
  filter:drop-shadow(0 22px 48px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(46,147,168,.34));
}
.han-stage.in .han-chibi{transform:translateX(0)}
/* 走动时轻微上下起伏 */
.han-stage.in .han-chibi img{animation:hanWalk 1.5s var(--ease) 1.9s infinite}
@keyframes hanWalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 横幅：宽度 0 → 满，像被从左往右一点点拉出来 */
.han-banner{
  position:relative;display:flex;align-items:center;
  height:calc(clamp(74px,8.8vw,116px) + 40px);
  width:0;opacity:0;overflow:hidden;margin-left:-18px;
  transition:width 1.7s var(--ease-out) .55s,opacity .35s linear .55s;
}
.han-stage.in .han-banner{width:min(700px,54vw);opacity:1}

.hb-cloth{
  position:relative;flex:0 0 auto;overflow:hidden;
  width:min(700px,54vw);height:clamp(74px,8.8vw,116px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:3px clamp(10px,1.6vw,22px) 4px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 24%),
    linear-gradient(100deg,#F7FDFE 0%,#E4F5F9 44%,#CBE9F0 100%);
  box-shadow:0 12px 34px rgba(0,0,0,.55),inset 0 0 44px rgba(46,147,168,.15);
}
.hb-cloth::before,.hb-cloth::after{
  content:"";position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(22,107,125,.12),rgba(22,107,125,.72),rgba(22,107,125,.12));
}
.hb-cloth::before{top:0}
.hb-cloth::after{bottom:0}

.hb-meander{width:100%;height:11px;display:block;color:rgba(22,107,125,.4);flex:0 0 auto}
.hb-meander-b{transform:rotate(180deg)}
.hb-txt{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-serif);font-weight:900;white-space:nowrap;
  font-size:clamp(17px,2.9vw,38px);letter-spacing:.16em;text-indent:.16em;
  color:#0E4557;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.85);
}
/* 两端轴头 + 流苏 */
.hb-rod{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:13px;height:calc(100% - 22px);border-radius:7px;
  background:linear-gradient(100deg,#8E6132,#F2DAB4 46%,#8E6132);
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
.hb-rod-l{left:2px}
.hb-rod-r{right:2px}
.hb-rod i{
  position:absolute;left:50%;top:100%;width:2px;height:10px;margin-left:-1px;
  background:linear-gradient(180deg,var(--o-300),rgba(255,184,112,0));
}

.han-foot{
  position:relative;z-index:2;margin-top:clamp(26px,5vh,54px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vh,26px);
  opacity:0;transform:translateY(18px);
  transition:opacity 1.1s var(--ease-out) 2.1s,transform 1.1s var(--ease-out) 2.1s;
}
.han-stage.in .han-foot{opacity:1;transform:none}
.han-poem{
  font-family:var(--ff-kai);font-size:clamp(14px,1.9vw,19px);letter-spacing:.2em;
  color:rgba(230,248,250,.86);
}
.han-seal{
  width:clamp(56px,7.4vw,70px);height:clamp(56px,7.4vw,70px);
  display:grid;place-items:center;
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(10px,1.3vw,13px);line-height:1.25;letter-spacing:.04em;
  color:var(--seal);border:2px solid rgba(214,64,42,.74);border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(214,64,42,.16);
  transform:rotate(-7deg);
}

/* ═════════════════ 幕 4 · 证物陈列 ═════════════════ */
.s-film{justify-content:center;padding-top:clamp(64px,8vh,100px)}
.film-wrap{width:100%;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px)}

.ev-head{display:flex;align-items:center;gap:clamp(10px,2vw,20px);width:100%;justify-content:center}
.ev-badge{
  font-size:9.5px;font-weight:700;letter-spacing:.34em;
  color:var(--o-200);padding:4px 11px;border:1px solid rgba(255,154,60,.4);border-radius:999px;
  background:rgba(242,121,43,.12);
}
.ev-title{
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(19px,3vw,32px);letter-spacing:.16em;
  background:linear-gradient(168deg,#FFFFFF 0%,var(--c-200) 40%,var(--c-400) 72%,var(--o-400) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ev-no{
  font-size:10.5px;font-weight:700;letter-spacing:.3em;color:rgba(198,238,243,.72);
  padding:4px 11px;border:1px solid rgba(198,238,243,.22);border-radius:999px;
  background:rgba(3,8,10,.5);
}

/* 舞台：宽高都由图片自身决定 → 任何比例的图都完整显示，不留黑边也不裁切 */
.ev-stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  max-width:100%;
}
.ev-stage img{
  display:block;width:auto;height:auto;
  max-width:min(100%,860px);
  max-height:min(58svh,600px);
  border-radius:3px;
  box-shadow:0 28px 70px rgba(0,0,0,.72),0 0 0 1px rgba(198,238,243,.18),0 0 60px rgba(46,147,168,.16);
  opacity:0;transform:scale(1.035);
  transition:opacity .8s var(--ease-out),transform 1.3s var(--ease-out);
}
.ev-stage img.on{opacity:1;transform:scale(1)}
/* 四角取景框 */
.ev-corners{position:absolute;inset:-11px;pointer-events:none;z-index:2}
.ev-corners i{position:absolute;width:20px;height:20px;border:1.5px solid rgba(95,194,212,.7)}
.ev-corners i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.ev-corners i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.ev-corners i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.ev-corners i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
/* 扫描光带 */
.ev-scan{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:3px;
}
.ev-scan::after{
  content:"";position:absolute;left:0;right:0;height:34%;
  background:linear-gradient(180deg,rgba(95,194,212,0),rgba(95,194,212,.16),rgba(95,194,212,0));
  animation:evScan 5.4s var(--ease) infinite;
}
@keyframes evScan{0%{top:-34%}55%{top:100%}100%{top:100%}}

.ev-foot{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;max-width:760px;text-align:center;min-height:76px;
}
.ev-idx{
  font-size:10.5px;font-weight:700;letter-spacing:.34em;color:var(--c-400);
  padding:3px 12px;border-radius:999px;background:rgba(46,147,168,.14);
  border:1px solid rgba(95,194,212,.28);
}
.ev-cap{
  font-family:var(--ff-kai);font-size:clamp(14px,1.95vw,19px);line-height:1.95;letter-spacing:.08em;
  color:rgba(251,243,230,.94);
  opacity:0;transform:translateY(9px);transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.ev-cap.on{opacity:1;transform:none}

.ev-ctrl{display:flex;align-items:center;gap:clamp(10px,2vw,20px)}
.ev-arrow{
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(95,194,212,.34);background:rgba(46,147,168,.08);
  color:var(--c-200);font-size:19px;line-height:1;display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease-out);
}
.ev-arrow:hover{background:rgba(46,147,168,.22);border-color:rgba(95,194,212,.8);transform:translateY(-2px)}
.ev-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:min(560px,66vw)}
.ev-dots i{
  width:6px;height:6px;border-radius:50%;background:rgba(230,248,250,.2);cursor:pointer;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ev-dots i:hover{background:rgba(198,238,243,.65);transform:scale(1.35)}
.ev-dots i.on{background:var(--o-400);transform:scale(1.55);box-shadow:0 0 12px rgba(255,154,60,.85)}

/* ═════════════════ 幕 5 · 手写信 ═════════════════ */
.s-hand{justify-content:flex-start;padding-top:clamp(76px,11vh,132px)}
.hand-wrap{width:100%;max-width:min(760px,92vw);margin:0 auto;text-align:center}
.hs-title{
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(24px,4vw,40px);letter-spacing:.42em;text-indent:.42em;
  color:var(--c-300);
}
.hs-sub{margin-top:8px;font-family:var(--ff-kai);font-size:13px;letter-spacing:.32em;color:rgba(198,238,243,.5)}
.hs-scroll{
  position:relative;margin-top:clamp(22px,4vh,40px);
  padding:clamp(9px,1.4vw,16px);
  background:linear-gradient(180deg,#FBF3E6,#EFE0C8);
  border-radius:3px;
  box-shadow:0 30px 80px rgba(0,0,0,.72),0 0 0 1px rgba(198,238,243,.16),0 0 70px rgba(46,147,168,.14);
}
.hs-scroll::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;
  background:radial-gradient(120% 40% at 100% 0%,rgba(46,147,168,.10),transparent 60%),
             radial-gradient(120% 40% at 0% 100%,rgba(255,154,60,.10),transparent 60%);
}
.hs-scroll img{width:100%;height:auto;border-radius:2px;position:relative}
.hs-scroll figcaption{
  margin-top:10px;font-family:var(--ff-kai);font-size:12px;letter-spacing:.3em;color:rgba(92,81,71,.7);
}

/* ═════════════════ 幕 6 · 文字版来信 ═════════════════ */
.s-letter{justify-content:flex-start;padding-top:clamp(64px,9vh,108px)}
.letter-wrap{width:100%;max-width:760px;margin:0 auto}
.letter{
  position:relative;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  color:var(--ink);
  padding:clamp(32px,5.6vw,64px) clamp(22px,4.6vw,60px) clamp(28px,4.6vw,50px);
  border-radius:3px;
  box-shadow:0 30px 70px rgba(0,0,0,.62),0 0 0 1px rgba(198,238,243,.12),inset 0 1px 0 rgba(255,255,255,.5);
  font-family:var(--ff-kai);
  font-size:clamp(14.5px,1.72vw,17px);
  line-height:2.14;letter-spacing:.035em;
}
.letter::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.016) 0 1px,transparent 1px 3px),
    radial-gradient(120% 60% at 100% 0%,rgba(46,147,168,.07),transparent 60%),
    radial-gradient(90% 50% at 0% 100%,rgba(255,154,60,.07),transparent 60%);
}
.letter p{margin-bottom:1.32em;text-align:justify}
.letter p:last-of-type{margin-bottom:0}
.l-salute{font-size:1.12em;font-weight:700;color:var(--c-700);margin-bottom:.7em !important}
.l-open{margin-bottom:1.5em !important;color:var(--ink-2)}
.l-first{
  font-size:1.06em;color:var(--c-700);font-weight:700;
  padding-left:14px;border-left:3px solid var(--c-500);margin-bottom:1.6em !important;
}
.l-last{
  color:var(--c-700);font-weight:700;
  padding:15px 17px;background:rgba(46,147,168,.08);
  border-radius:3px;border-left:3px solid var(--c-500);
}
.l-sign{
  margin-top:2.1em;padding-top:1.5em;border-top:1px dashed rgba(92,81,71,.3);
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;
}
.ls-name{font-size:1.06em;font-weight:700;color:var(--c-700);letter-spacing:.09em}
.ls-date{font-size:.86em;color:var(--ink-3);letter-spacing:.14em}

/* ═════════════════ 幕 7 · 尾声 ═════════════════ */
.s-final{text-align:center}
.final-inner{display:flex;flex-direction:column;align-items:center;max-width:920px}
.fn-case{
  font-size:10px;font-weight:700;letter-spacing:.42em;text-indent:.42em;color:var(--c-400);
  padding:5px 16px;border:1px solid rgba(95,194,212,.26);border-radius:999px;
  background:rgba(46,147,168,.06);margin-bottom:clamp(24px,4.2vh,44px);
}
.fn-quote{
  font-family:var(--ff-serif);font-weight:900;
  font-size:clamp(22px,4.4vw,50px);line-height:1.52;letter-spacing:.055em;
}
.fq-line{display:block;opacity:0;transform:translateY(26px);transition:opacity 1.2s var(--ease-out) .2s,transform 1.2s var(--ease-out) .2s}
.s-final.in .fq-line,.final-inner.in .fq-line{opacity:1;transform:none}
.final-inner.in .fq-line:nth-child(2){transition-delay:.5s}

.fn-rule{display:flex;align-items:center;gap:16px;margin:clamp(22px,3.8vh,40px) 0}
.fn-rule i{display:block;width:clamp(28px,9vw,90px);height:1px;background:linear-gradient(90deg,transparent,rgba(95,194,212,.62))}
.fn-rule i:last-child{background:linear-gradient(270deg,transparent,rgba(95,194,212,.62))}
.fn-rule span{color:var(--o-400);font-size:15px}

.fn-meta{
  font-family:var(--ff-kai);font-size:clamp(14px,1.9vw,19px);line-height:2.05;
  letter-spacing:.14em;color:rgba(251,243,230,.86);
  opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease-out) .8s,transform 1.1s var(--ease-out) .8s;
}
.final-inner.in .fn-meta{opacity:1;transform:none}
.fn-sign{
  margin-top:clamp(20px,3.6vh,34px);font-family:var(--ff-kai);
  font-size:clamp(12.5px,1.6vw,15px);letter-spacing:.2em;color:rgba(198,238,243,.7);
  opacity:0;transition:opacity 1s var(--ease-out) 1.1s;
}
.final-inner.in .fn-sign{opacity:1}
.fn-dot{margin:0 10px;opacity:.5}
.fn-replay{
  margin-top:clamp(26px,4.6vh,46px);
  padding:13px 32px;border-radius:999px;
  border:1px solid rgba(95,194,212,.42);background:rgba(46,147,168,.09);
  font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--c-200);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.fn-replay:hover{
  background:rgba(46,147,168,.2);border-color:rgba(95,194,212,.85);
  transform:translateY(-3px);box-shadow:0 12px 30px rgba(46,147,168,.3);
}

/* ───────────────── 背景音乐开关 ───────────────── */
.bgm-btn{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(16px,2.8vh,30px);
  z-index:30;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;gap:3px;
  border:1px solid rgba(95,194,212,.38);
  background:rgba(6,26,33,.72);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:border-color .4s var(--ease),background .4s var(--ease),
             transform .4s var(--ease-out),box-shadow .4s var(--ease);
}
.bgm-btn[hidden]{display:none}
.bgm-btn:hover{border-color:rgba(95,194,212,.85);background:rgba(46,147,168,.24);transform:translateY(-2px)}
.bgm-btn i{
  display:block;width:3px;height:9px;border-radius:2px;
  background:linear-gradient(180deg,var(--c-300),var(--c-500));
  transition:height .3s var(--ease),opacity .3s var(--ease);
}
/* 播放中：跳动 */
.bgm-btn.on i{animation:bgmBar 1.05s var(--ease) infinite}
.bgm-btn.on i:nth-child(2){animation-delay:.14s}
.bgm-btn.on i:nth-child(3){animation-delay:.28s}
.bgm-btn.on i:nth-child(4){animation-delay:.42s}
@keyframes bgmBar{0%,100%{height:8px}50%{height:19px}}
/* 暂停：压平 + 一道斜线 */
.bgm-btn:not(.on) i{height:8px;opacity:.5}
.bgm-slash{
  position:absolute;width:24px;height:2px;border-radius:2px;
  background:var(--o-400);transform:rotate(-42deg);
  opacity:0;transition:opacity .3s var(--ease);
}
.bgm-btn:not(.on) .bgm-slash{opacity:1}

@media (prefers-reduced-motion:reduce){
  .bgm-btn.on i{animation:none;height:14px}
}

/* ───────────────── 进度条 ───────────────── */
.progress{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:20;background:rgba(230,248,250,.06)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-600),var(--c-300) 55%,var(--o-400));box-shadow:0 0 12px rgba(95,194,212,.7);transition:width .18s linear}

/* ───────────────── 响应式 ───────────────── */
@media (max-width:900px){
  .case-head{grid-template-columns:auto 1fr;row-gap:10px}
  .ch-mid{text-align:left}
  .ch-right{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:700px){
  .scene{padding-left:16px;padding-right:16px}
  .hg-cap{display:none}
  .dossier{gap:4px 12px}
  .han-stage.in .han-banner{width:min(470px,62vw)}
  .hb-cloth{width:min(470px,62vw);padding:3px 8px 4px}
  .hb-txt{font-size:clamp(13px,3.9vw,17px);letter-spacing:.1em;text-indent:.1em}
  .hb-meander{height:9px}
  .hb-rod{width:10px}
  .han-chibi{width:clamp(96px,26vw,176px)}
  .ev-dots{max-width:60vw}
  .letter{line-height:2.05;padding:28px 20px;font-size:15px}
}
@media (max-width:430px){
  :root{--ph:clamp(46px,14.5vw,80px)}
  .cvt-num{font-size:clamp(48px,17vw,86px)}
  .rope{gap:0}
  .rope-items{gap:5px}
  .hg-cap{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .hung{opacity:1;transform:none}
  .han-chibi{transform:none}
  .han-banner{width:min(760px,58vw);opacity:1}
  .han-foot{opacity:1;transform:none}
  .fq-line,.fn-meta,.fn-sign,.ev-cap{opacity:1;transform:none}
}