/* ══════════════════════════════════════════════
   顾寻 · 绝笔
   ══════════════════════════════════════════════ */

:root{
  /* 夜与月 */
  --night:#05080D;
  --night-2:#0B1220;
  --moon:#DCE6F2;
  --pearl:#7FD8F0;
  --pearl-2:#BFEFFC;
  --gold:#E3C88E;
  /* 纸与墨 */
  --paper:#E8DEC4;
  --paper-2:#DFD3B5;
  --ink:#2B2620;
  --ink-2:#3A3229;
  --ink-3:#7A6E58;
  --cinnabar:#B23A2C;

  /* 毛笔题字：Ma Shan Zheng 拿不到时退回系统楷体 */
  --brush:"Ma Shan Zheng","STKaiti","KaiTi","楷体","楷体_GB2312","Kaiti SC",serif;
  /* 正文楷体 */
  --kai:"KaiTi","楷体","STKaiti","楷体_GB2312","Kaiti SC","Noto Serif SC",serif;
  --song:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;

  --ease:cubic-bezier(.16,.84,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--night);
  color:var(--moon);
  font-family:var(--song);
  font-weight:300;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
img{max-width:100%}

/* ══════════ 场景 ══════════
   高度先给人人认的 100vh 再让 dvh 覆盖；只写 dvh 会在旧内核上整条作废、容器塌成 0 */
.scene{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 宽屏时四周用同一张图放大虚化补满，画面不会出现空底色 */
.scene::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/scene.jpg") center/cover no-repeat;
  filter:blur(26px) brightness(.5) saturate(1.2);
  transform:scale(1.2);
}
/* 再压一层暗角，让四周的虚化只是氛围、不抢画面 */
.scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 50%,rgba(5,8,13,.35) 30%,rgba(5,8,13,.86) 100%);
}

/* 画心：宽高都只用 vw/vh 算，锁死 1672:941，不依赖 aspect-ratio */
.stage{
  position:relative;z-index:2;
  width:min(100vw, calc(100vh * 1.7768));
  height:min(100vh, calc(100vw * 0.5628));
  box-shadow:
    0 40px 120px -40px rgba(0,0,0,.9),
    0 0 190px -50px rgba(127,216,240,.35),
    0 0 0 1px rgba(220,230,242,.07);
}
@supports (height:100dvh){
  .stage{
    width:min(100vw, calc(100dvh * 1.7768));
    height:min(100dvh, calc(100vw * 0.5628));
  }
}
.stage-art{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:contain;
}
/* 四周压暗，把目光收到中间 */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 52% 46%,transparent 38%,rgba(4,7,12,.5) 100%);
}

/* ══════════ 三处可点 ══════════ */
.hot{
  position:absolute;z-index:4;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(5px,.9vw,9px);
  padding:clamp(5px,.7vw,8px);
  border-radius:50%;
  transition:transform .4s var(--ease);
}
.hot-paint{left:14%;top:19%}
.hot-bead {left:44.8%;top:50%}
.hot-letter{left:28%;top:91%}

.hot .ring{
  width:clamp(38px,4.6vw,58px);
  height:clamp(38px,4.6vw,58px);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  border:1.4px solid rgba(227,200,142,.7);
  background:radial-gradient(circle at 50% 42%,rgba(227,200,142,.2),rgba(10,14,20,.5) 70%);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  box-shadow:0 0 22px -4px rgba(227,200,142,.5),inset 0 0 16px rgba(227,200,142,.14);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.hot .ring svg{width:52%;height:52%}

/* 珠子多一层青色脉动，呼应画中那颗明珠 */
.hot .ring-bead{
  color:var(--pearl-2);
  border-color:rgba(127,216,240,.8);
  background:radial-gradient(circle at 50% 42%,rgba(127,216,240,.3),rgba(9,16,24,.5) 70%);
  animation:pearlPulse 3s ease-in-out infinite;
}
@keyframes pearlPulse{
  0%,100%{box-shadow:0 0 20px -6px rgba(127,216,240,.55),inset 0 0 16px rgba(127,216,240,.16)}
  50%    {box-shadow:0 0 40px 0px rgba(127,216,240,.85),inset 0 0 22px rgba(127,216,240,.3)}
}

.hot .tag{
  font-family:var(--kai);
  font-size:clamp(11px,1.05vw,14px);
  letter-spacing:.35em;
  text-indent:.35em;
  color:rgba(232,222,204,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.8);
  white-space:nowrap;
  transition:color .4s;
}
.hot-bead .tag{color:rgba(191,239,252,.9)}

.hot:hover{transform:translate(-50%,-50%) scale(1.06)}
.hot:hover .ring{
  border-color:var(--gold);
  box-shadow:0 0 34px -2px rgba(227,200,142,.75),inset 0 0 18px rgba(227,200,142,.22);
}
.hot-bead:hover .ring{border-color:var(--pearl-2)}
.hot:focus-visible{outline:none}
.hot:focus-visible .ring{outline:1px solid var(--gold);outline-offset:4px}

/* ══════════ 角落字 ══════════ */
.brand{
  position:absolute;left:clamp(16px,2.2vw,34px);top:clamp(14px,2vh,26px);z-index:6;
  font-family:var(--kai);
  font-size:clamp(12px,1.15vw,15px);
  letter-spacing:.42em;
  color:rgba(220,230,242,.62);
  text-shadow:0 2px 12px rgba(0,0,0,.95);
  pointer-events:none;
}
.hint{
  position:absolute;left:50%;bottom:clamp(12px,2.4vh,26px);z-index:6;
  transform:translateX(-50%);
  font-family:var(--kai);
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.3em;
  color:rgba(220,230,242,.42);
  text-shadow:0 2px 12px rgba(0,0,0,.95);
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .8s ease;
}
.hint.gone{opacity:0}
.hint-mini{display:none}

/* 窄屏入口：竖屏时画面必然被压成一条，这里补一排可点的字 */
.quick{
  display:none;
  position:absolute;left:0;right:0;bottom:clamp(14px,3vh,30px);z-index:7;
  align-items:center;justify-content:center;
  gap:clamp(6px,2.4vw,16px);
  font-family:var(--kai);
  font-size:clamp(12px,3.5vw,15px);
  letter-spacing:.12em;
}
.quick button{color:rgba(232,222,204,.8);padding:11px 3px;transition:color .3s}
.quick button:active{color:var(--gold)}
.quick span{color:rgba(232,222,204,.24)}

/* 入场 */
.stage{animation:fadeIn 1.1s var(--ease) both}
.brand{animation:fadeUp 1.1s var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* 提示自己有 translateX(-50%) 定位，动画不能碰 transform，否则会被覆盖成靠右溢出 */
.hint{animation:hintIn 1.1s var(--ease) both}
@keyframes hintIn{
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to  {opacity:1;transform:translateX(-50%)}
}
.hot{opacity:0;animation:hotIn .9s var(--ease) both}
.hot-paint{animation-delay:.45s}
.hot-bead{animation-delay:.6s}
.hot-letter{animation-delay:.75s}
@keyframes hotIn{from{opacity:0}to{opacity:1}}

/* ══════════ 遮罩 ══════════ */
.veil{
  position:fixed;inset:0;z-index:80;
  background:rgba(5,8,13,.9);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
}
.veil.show{opacity:1;visibility:visible}
.veil[hidden]{display:none}

.veil-close{
  position:absolute;top:clamp(14px,2vh,24px);right:clamp(14px,2vw,26px);z-index:9;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(232,222,204,.8);
  border:1px solid rgba(232,222,204,.26);
  background:rgba(10,14,20,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:border-color .3s,color .3s,background .3s,transform .3s;
}
.veil-close svg{width:19px;height:19px}
.veil-close:hover{border-color:var(--gold);color:var(--gold);background:rgba(227,200,142,.1);transform:rotate(90deg)}

.panel{position:absolute;inset:0}
.panel[hidden]{display:none}

/* ══════════ 信：立轴信纸 ══════════ */
.scroll-view{
  position:absolute;inset:0;z-index:2;
  overflow-y:auto;overflow-x:hidden;
  padding:clamp(46px,7vh,74px) 0 clamp(56px,8vh,84px);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.scroll-view::-webkit-scrollbar{width:8px}
.scroll-view::-webkit-scrollbar-thumb{background:rgba(227,200,142,.22);border-radius:4px}
.scroll-view::-webkit-scrollbar-track{background:transparent}

/* 上下轴杆 */
.roller{
  position:absolute;left:50%;transform:translateX(-50%);z-index:4;
  width:min(752px,94vw);height:16px;border-radius:8px;
  pointer-events:none;
  background:linear-gradient(180deg,#4A3A28,#251C13 42%,#170F0A 52%,#3D2F20 66%,#1A130D);
  box-shadow:0 2px 18px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5);
}
.roller::after{
  content:"";position:absolute;left:6px;right:6px;top:3px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,200,142,.42),transparent);
}
.roller-top{top:clamp(18px,3.2vh,32px)}
.roller-bottom{bottom:clamp(20px,3.4vh,34px)}
.roller .knob{
  position:absolute;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#7A6039,#2C2115 70%);
  box-shadow:0 0 12px rgba(0,0,0,.9),inset 0 0 4px rgba(227,200,142,.35);
}
.roller .knob:nth-of-type(1){left:-11px}
.roller .knob:nth-of-type(2){right:-11px}

/* 纸 */
.paper{
  position:relative;
  width:min(690px,92vw);
  margin:0 auto;
  padding:clamp(56px,8vw,74px) clamp(30px,6vw,64px) clamp(60px,8vw,78px);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,rgba(126,106,68,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(126,106,68,.04) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 11% 6%,rgba(146,116,64,.13) 0 2.4px,transparent 3.2px),
    radial-gradient(circle at 79% 12%,rgba(146,116,64,.1) 0 1.8px,transparent 2.6px),
    radial-gradient(circle at 27% 31%,rgba(146,116,64,.1) 0 2.6px,transparent 3.4px),
    radial-gradient(circle at 88% 44%,rgba(146,116,64,.09) 0 2px,transparent 2.8px),
    radial-gradient(circle at 16% 58%,rgba(146,116,64,.11) 0 2.2px,transparent 3px),
    radial-gradient(circle at 64% 68%,rgba(146,116,64,.1) 0 2.6px,transparent 3.4px),
    radial-gradient(circle at 38% 85%,rgba(146,116,64,.1) 0 2px,transparent 2.8px),
    radial-gradient(circle at 92% 91%,rgba(146,116,64,.09) 0 2.4px,transparent 3.2px),
    radial-gradient(ellipse at 8% 16%,rgba(150,120,70,.15),transparent 42%),
    radial-gradient(ellipse at 94% 80%,rgba(150,120,70,.14),transparent 40%),
    radial-gradient(ellipse at 62% 3%,rgba(160,132,84,.11),transparent 36%),
    linear-gradient(90deg,rgba(146,116,64,.36) 0 1.6%,rgba(146,116,64,.06) 5%,transparent 13%,transparent 87%,rgba(146,116,64,.06) 95%,rgba(146,116,64,.32) 98.4%);
  box-shadow:
    0 34px 90px -34px rgba(0,0,0,.85),
    inset 0 0 90px rgba(150,126,84,.22),
    inset 0 1px 0 rgba(255,255,255,.4);
}
/* 版框：双线 */
.paper::before{
  content:"";position:absolute;inset:20px;pointer-events:none;
  border:1px solid rgba(92,76,54,.44);
}
.paper::after{
  content:"";position:absolute;inset:25px;pointer-events:none;
  border:1px solid rgba(92,76,54,.2);
}

/* 信文 */
.letter-title{
  font-family:var(--brush);
  font-size:clamp(24px,3.2vw,32px);
  font-weight:400;
  letter-spacing:.14em;
  text-indent:.14em;
  text-align:center;
  color:var(--ink);
}
.letter-rule{
  display:block;width:64px;height:2px;margin:20px auto 0;
  background:linear-gradient(90deg,transparent,rgba(178,58,44,.7),transparent);
}
.letter-salutation{
  font-family:var(--brush);
  font-size:clamp(19px,2.1vw,22px);
  letter-spacing:.1em;
  margin-top:clamp(34px,5vw,48px);
  color:var(--ink);
}
.letter-body{
  margin-top:6px;
  font-family:var(--kai);
  font-size:clamp(16.5px,1.55vw,19px);
  line-height:2.16;
  letter-spacing:.02em;
  color:var(--ink-2);
}
.letter-body p{
  text-indent:2em;
  margin-top:clamp(14px,1.8vw,19px);
  text-align:justify;
}
/* 只有一句话的段落，不缩进、居中，让它自己站住 */
.letter-body p.solo{
  text-indent:0;
  text-align:center;
  letter-spacing:.08em;
  margin-top:clamp(24px,3.4vw,34px);
}
.letter-farewell{
  font-family:var(--brush);
  font-size:clamp(19px,2.1vw,23px);
  letter-spacing:.12em;
  text-align:center;
  margin-top:clamp(46px,6.5vw,64px);
  color:var(--ink);
}
.letter-sign{
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(12px,1.6vw,18px);
  margin-top:clamp(20px,3vw,30px);
}
.sign-name{
  font-family:var(--brush);
  font-size:clamp(20px,2.2vw,24px);
  letter-spacing:.14em;
  color:var(--ink);
}
.seal{
  flex:0 0 auto;
  width:46px;height:46px;
  display:grid;place-items:center;
  writing-mode:vertical-rl;
  font-family:var(--kai);
  font-size:15px;line-height:1.16;letter-spacing:0;
  color:#F7EFE2;
  background:var(--cinnabar);
  border-radius:3px;
  opacity:.92;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24),0 4px 14px rgba(120,30,20,.35);
}

/* ══════════ 珠 ══════════ */
.panel-bead{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vh,26px);
  padding:clamp(64px,9vh,96px) 4vw;
}
.bead-frame{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  max-width:100%;
}
/* 视频是 720×1280 竖版：必须同时卡住宽和高，且让浏览器按原比例缩放。
   只写 width:100% 会让高度冲到 1800px 把屏幕撑爆 */
.bead-frame video{
  display:block;
  width:auto;height:auto;
  max-width:min(1080px,88vw);
  max-height:72vh;
  border-radius:6px;
  background:#000;
  vertical-align:bottom;
  box-shadow:
    0 0 0 1px rgba(127,216,240,.42),
    0 0 90px -14px rgba(127,216,240,.55),
    0 34px 90px -34px rgba(0,0,0,.9);
}
@supports (height:100dvh){
  .bead-frame video{max-height:72dvh}
}
.panel-cap{
  font-family:var(--brush);
  font-size:clamp(16px,1.7vw,21px);
  letter-spacing:.4em;text-indent:.4em;
  color:rgba(191,239,252,.7);
}

/* ══════════ 画 ══════════ */
.panel-paint{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3vh,28px);
  padding:clamp(60px,9vh,96px) 4vw;
}
.paint-frame{
  position:relative;display:inline-block;line-height:0;
  box-shadow:
    0 0 0 1px rgba(227,200,142,.32),
    0 0 0 8px rgba(18,13,9,.8),
    0 0 0 9px rgba(227,200,142,.22),
    0 36px 90px -32px rgba(0,0,0,.95);
  transition:opacity .4s ease;
}
.paint-img{
  display:block;
  width:auto;height:auto;
  max-width:min(1080px,90vw);
  max-height:68vh;
}
.paint-frame.fading{opacity:0}

.pnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(232,222,204,.82);
  border:1px solid rgba(232,222,204,.22);
  background:rgba(8,11,17,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:border-color .3s,color .3s,background .3s,opacity .3s;
}
.pnav svg{width:20px;height:20px}
.pnav-prev{left:16px}
.pnav-next{right:16px}
.pnav:hover{border-color:var(--gold);color:var(--gold);background:rgba(227,200,142,.12)}

.paint-meta{
  display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px);
  font-family:var(--kai);
  color:rgba(232,222,204,.78);
}
.paint-no{
  font-family:var(--brush);
  font-size:clamp(18px,2vw,24px);
  color:var(--gold);
  letter-spacing:.1em;
}
.paint-cap{
  font-size:clamp(13px,1.3vw,16px);
  letter-spacing:.22em;
}
.paint-cap em{font-style:normal;color:rgba(232,222,204,.5);margin:0 .5em}

/* ══════════ 背景音乐 ══════════ */
.music{
  position:fixed;
  right:clamp(14px,2vw,26px);
  bottom:clamp(14px,2.4vh,26px);
  z-index:95;                       /* 高于遮罩，看书时也能随手关 */
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(232,222,204,.8);
  border:1px solid rgba(232,222,204,.36);
  background:rgba(8,11,17,.58);
  box-shadow:0 8px 26px -12px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:border-color .3s,color .3s,background .3s;
}
.music svg{width:20px;height:20px}
.music:hover{border-color:var(--gold);color:var(--gold);background:rgba(227,200,142,.1)}
.music.on{color:var(--gold);border-color:rgba(227,200,142,.42);background:rgba(227,200,142,.08)}
/* 暂停态（也是首次打开最常见的状态）：别反而最暗，否则等于藏了个按钮 */
.music.off{color:rgba(232,222,204,.62);border-color:rgba(232,222,204,.32)}
/* 开场轻推三下，把视线引过去，然后安静 */
.music.off{animation:musicNudge 2.6s ease-in-out 1.1s 3}
@keyframes musicNudge{
  0%,100%{box-shadow:0 8px 26px -12px rgba(0,0,0,.95),0 0 0 0 rgba(227,200,142,0)}
  50%    {box-shadow:0 8px 26px -12px rgba(0,0,0,.95),0 0 0 9px rgba(227,200,142,.09)}
}
/* 只有暂停时才画那道斜线 */
.music-slash{opacity:0;transition:opacity .3s}
.music.off .music-slash{opacity:1}
/* 播放中：极轻的一圈涟漪，不用旋转那么跳 */
.music.on{animation:musicRipple 3.6s ease-in-out infinite}
@keyframes musicRipple{
  0%,100%{box-shadow:0 0 0 0 rgba(227,200,142,0)}
  50%    {box-shadow:0 0 0 7px rgba(227,200,142,.07)}
}

/* 自动播放被拦时的提示 */
.unlock{
  position:fixed;
  right:clamp(14px,2vw,26px);
  bottom:calc(clamp(14px,2.4vh,26px) + 54px);
  z-index:95;
  font-family:var(--kai);
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.2em;
  color:rgba(220,230,242,.6);
  text-shadow:0 2px 10px rgba(0,0,0,.95);
  white-space:nowrap;
  text-align:right;
  pointer-events:none;
  animation:unlockIn .8s var(--ease) both;
  transition:opacity .6s ease;
}
@keyframes unlockIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.unlock[hidden]{display:none}
.unlock.gone{opacity:0}

/* ══════════ 适配 ══════════ */
@media (max-width:900px){
  .hot .ring{width:clamp(38px,11vw,50px);height:clamp(38px,11vw,50px)}
  .hot .tag{font-size:clamp(11px,3vw,13px)}
  .brand{font-size:clamp(12px,3.4vw,14px)}
  .hint{display:none}
  .quick{display:flex}
  .paper{padding:52px 26px 58px}
  .paper::before{inset:14px}
  .paper::after{inset:18px}
  .seal{width:40px;height:40px;font-size:15px}
  .pnav{width:40px;height:40px}
  .pnav svg{width:17px;height:17px}
  .pnav-prev{left:8px}
  .pnav-next{right:8px}
  .paint-img{max-height:56vh}
  .bead-frame video{max-height:66vh}
}

/* 触屏不跑脉动，避免一直闪 */
@media (hover:none){
  .hot .ring-bead{animation:none}
  .veil-close:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}