/* ═══════════════════════════════════════════════
   归苍 · 我们的明天
   夜色 / 台灯 / 一封信 / 一段影像 / 一叠相纸
   ═══════════════════════════════════════════════ */

:root{
  --night:#0B0A10;
  --night-2:#141220;
  --gold:#D8A96A;
  --gold-2:#F0D6A8;
  --cream:#F4ECDD;
  --cream-2:#E4D9C4;
  --ink:#2C241E;
  --warm:#F6C77E;
  --fg:#EFE7DC;
  --fg-2:rgba(239,231,220,.66);
  --kai:"Noto Serif SC","Songti SC","STSong",KaiTi,"楷体",Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{background:var(--night)}
body{
  background:var(--night);
  color:var(--fg);
  font:16px/1.7 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ═══════ 主画面 ═══════ */
.stage{
  position:fixed;inset:0;
  z-index:2;                       /* 要高于 body::after 那层暗角，否则画面会被压暗 */
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* 宽高都用 vw/vh 算 —— 只写 aspect-ratio 旧内核会整条作废、容器塌成 0 */
  width:min(100vw,calc(100vh * 1.7768));
  height:min(100vh,calc(100vw * .5628));
  margin:auto;
}
@supports (height:100dvh){
  .stage{
    width:min(100vw,calc(100dvh * 1.7768));
    height:min(100dvh,calc(100vw * .5628));
  }
}

/* 同图虚化铺底：必须铺满**整个视口**，不能只铺 .stage ——
   竖屏手机上 .stage 会被压成一条，背景留在 stage 里的话上下就是大片纯色 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("assets/scene.jpg") center/cover no-repeat;
  filter:blur(38px) brightness(.42) saturate(1.15);
  transform:scale(1.2);
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 86% at 50% 46%,transparent 40%,rgba(6,5,9,.62) 100%);
}

.scene{position:absolute;inset:0;margin:0;z-index:2}
.scene-art{
  display:block;width:100%;height:100%;
  object-fit:contain;                 /* 整图不裁切 */
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.6));
  animation:sceneIn 1.5s var(--ease) both;
}
@keyframes sceneIn{
  from{opacity:0;transform:scale(1.03);filter:blur(9px) drop-shadow(0 24px 60px rgba(0,0,0,.6))}
  to  {opacity:1;transform:none;filter:blur(0) drop-shadow(0 24px 60px rgba(0,0,0,.6))}
}

/* ═══════ 三个抓手 ═══════ */
.hot{
  position:absolute;z-index:6;
  width:clamp(46px,5.4vw,74px);height:clamp(46px,5.4vw,74px);
  transform:translate(-50%,-50%);
  border:0;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  animation:hotIn .9s var(--ease) both;
}
.hot-letter{left:22.2%;top:60.0%;animation-delay:.75s}
.hot-video {left:31.0%;top:80.0%;animation-delay:.95s}
.hot-album {left:16.5%;top:12.0%;animation-delay:1.15s}
@keyframes hotIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.hot .dot{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 14px 4px rgba(216,169,106,.7),0 0 4px 1px rgba(255,255,255,.9);
}
/* 外圈：两圈反向呼吸的环，把视线勾过来 */
.hot .ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.4px solid rgba(240,214,168,.72);
  box-shadow:0 0 20px rgba(216,169,106,.35),inset 0 0 16px rgba(216,169,106,.22);
  animation:ringPulse 3.1s ease-in-out infinite;
}
.hot::after{
  content:"";position:absolute;inset:-14%;border-radius:50%;
  border:1px solid rgba(216,169,106,.32);
  animation:ringOut 3.1s ease-out infinite;
}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.16);opacity:.55}}
@keyframes ringOut{0%{transform:scale(.72);opacity:.7}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}

.hot .lbl{
  position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  white-space:nowrap;
  font:400 clamp(12px,1.15vw,14.5px)/1 var(--kai);
  letter-spacing:.3em;text-indent:.3em;
  color:var(--gold-2);
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.9);
  transition:letter-spacing .4s var(--ease),color .4s;
}
.hot:hover .lbl,.hot:focus-visible .lbl{letter-spacing:.42em;color:#FFF3DC}
.hot:hover .ring{border-color:rgba(255,243,220,.95)}
.hot:focus-visible{outline:2px solid var(--gold);outline-offset:8px;border-radius:50%}
.hot:active{transform:translate(-50%,-50%) scale(.94)}

/* ═══════ 窄屏兜底 ═══════ */
.quick{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:none;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  justify-content:center;flex-wrap:wrap;
  background:linear-gradient(180deg,transparent,rgba(11,10,16,.92) 42%);
}
.quick button{
  flex:1 1 auto;min-width:0;
  padding:11px 12px;border-radius:9px;cursor:pointer;
  font:400 13.5px/1 var(--kai);letter-spacing:.08em;
  color:var(--gold-2);
  background:rgba(22,19,30,.82);
  border:1px solid rgba(216,169,106,.42);
  backdrop-filter:blur(8px);
  transition:.3s var(--ease);
}
.quick button:hover{background:rgba(216,169,106,.16);border-color:var(--gold)}
/* 画面被压成一条、圆环点不准时，就换这套 */
@media (max-width:900px),(max-aspect-ratio:1/1){
  .quick{display:flex}
  .hot .lbl{display:none}
}

/* ═══════ 音乐 ═══════ */
.music{
  position:fixed;right:clamp(14px,2vw,26px);
  top:clamp(14px,2vh,24px);z-index:30;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-2);
  background:rgba(18,15,24,.72);
  border:1px solid rgba(216,169,106,.42);
  backdrop-filter:blur(9px);
  transition:.32s var(--ease);
}
.music:hover{background:rgba(216,169,106,.18);border-color:var(--gold);transform:scale(1.06)}
.music svg{width:21px;height:21px}
/* 暂停态（首次打开最常见）必须看得清 —— 别把它做成最暗的 */
.music.off .m-on{display:none}
.music.on  .m-off{display:none}
.music.off{color:rgba(239,231,220,.88)}
.music.on{color:var(--gold-2);
  box-shadow:0 0 0 1px rgba(216,169,106,.34),0 0 22px -4px rgba(216,169,106,.6)}
.music.on::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(216,169,106,.5);
  animation:ringOut 2.8s ease-out infinite;
}

.unlock{
  position:fixed;left:50%;top:clamp(16px,3vh,30px);transform:translateX(-50%);
  z-index:29;margin:0;white-space:nowrap;
  padding:9px 18px;border-radius:999px;
  font:400 13px/1 var(--kai);letter-spacing:.12em;
  color:#F6EEDF;
  background:rgba(10,9,14,.82);       /* 半透明暗底药丸，压在浅色上也不糊 */
  border:1px solid rgba(216,169,106,.4);
  backdrop-filter:blur(8px);
  animation:unlockIn .8s var(--ease) .4s both;
}
@keyframes unlockIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ═══════ 遮罩与面板 ═══════ */
.veil{
  position:fixed;inset:0;z-index:60;
  background:rgba(6,5,10,.86);
  backdrop-filter:blur(14px);
  opacity:0;transition:opacity .42s var(--ease);
}
.veil.show{opacity:1}

.panel{
  position:fixed;inset:0;z-index:61;
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .46s var(--ease),transform .46s var(--ease);
}
.panel.show{opacity:1;transform:none}
.panel[hidden]{display:none}

.close{
  position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(16px,3vh,30px);z-index:70;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#F6EEDF;
  background:rgba(18,15,24,.8);
  border:1px solid rgba(216,169,106,.44);
  backdrop-filter:blur(8px);
  transition:.3s var(--ease);
}
.close:hover{background:rgba(216,169,106,.2);border-color:var(--gold);transform:rotate(90deg)}

/* 长内容自己滚，轴杆与关闭按钮是它的兄弟节点才能钉在视口 */
.scroll-view{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.scroll-view::-webkit-scrollbar{width:7px}
.scroll-view::-webkit-scrollbar-thumb{background:rgba(216,169,106,.42);border-radius:4px}

/* ── 信：立轴 ── */
.rod{
  position:fixed;left:50%;transform:translateX(-50%);
  width:min(680px,84vw);height:17px;z-index:66;
  border-radius:9px;
  background:linear-gradient(180deg,#6E553A,#3D2D1C 56%,#241A10);
  box-shadow:0 4px 16px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,220,170,.22);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 9px;pointer-events:none;
}
.rod i{width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F0D6A8,#9A7B4E 62%,#5E4726);
  box-shadow:0 0 7px rgba(216,169,106,.6)}
.rod-top{top:clamp(10px,2.4vh,26px)}
.rod-bot{bottom:clamp(10px,2.4vh,26px)}

.letter-paper{
  width:min(632px,80vw);
  margin:clamp(40px,6.4vh,62px) auto clamp(40px,6.4vh,62px);
  padding:clamp(46px,7vh,68px) clamp(28px,5vw,62px);
  position:relative;
  color:var(--ink);
  background:
    repeating-linear-gradient(90deg,rgba(150,124,86,.055) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(150,124,86,.04) 0 1px,transparent 1px 5px),
    radial-gradient(38% 22% at 16% 12%,rgba(160,132,92,.14),transparent 66%),
    radial-gradient(30% 20% at 84% 76%,rgba(140,112,74,.12),transparent 68%),
    radial-gradient(24% 16% at 62% 32%,rgba(170,142,100,.1),transparent 70%),
    linear-gradient(176deg,#F7F1E4 0%,#F1E8D6 52%,#E8DDC8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(150,124,86,.2),
    0 30px 70px -26px rgba(0,0,0,.9);
}
/* 双线版框 */
.letter-paper::before,.letter-paper::after{
  content:"";position:absolute;pointer-events:none;
  border:1px solid rgba(150,124,86,.42);
}
.letter-paper::before{inset:clamp(14px,2.6vw,24px)}
.letter-paper::after{inset:clamp(19px,3.2vw,30px);border-color:rgba(150,124,86,.22)}

.l-sal{
  font:500 clamp(16px,1.5vw,19px)/1.9 var(--kai);
  letter-spacing:.16em;margin:0 0 clamp(20px,3.4vh,32px);
  color:#3A2E24;
}
.l-body p{
  font:300 clamp(16.5px,1.55vw,19px)/2.16 var(--kai);
  letter-spacing:.045em;
  margin:0 0 clamp(17px,2.6vh,25px);
  text-indent:2em;
  text-align:justify;
  text-justify:inter-ideograph;
}
/* 只有一句的短段自己站住 */
.l-body p.solo{text-indent:0;text-align:center;letter-spacing:.14em;
  color:#4A3A2C;margin:clamp(22px,3.4vh,34px) 0}
.l-sign{
  margin:clamp(30px,5vh,52px) 0 0;
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
}
.l-sign em{
  font:300 clamp(15px,1.4vw,18px)/1 var(--kai);
  font-style:normal;letter-spacing:.2em;color:#4A3A2C;
}
.seal{
  width:clamp(42px,4vw,52px);aspect-ratio:1;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;
  background:radial-gradient(circle at 34% 28%,#C0503C,#A62B22 52%,#7C1A15);
  box-shadow:0 0 0 1px rgba(246,239,226,.32),0 6px 18px -6px rgba(0,0,0,.7);
  color:#F6EFE2;font:400 clamp(13px,1.25vw,16px)/1.08 var(--kai);
  writing-mode:vertical-rl;letter-spacing:.06em;
  padding:3px;
}

/* ── 影像 ── */
.panel-video{display:flex;align-items:center;justify-content:center;padding:clamp(18px,4vh,44px)}
.panel-video video{
  display:block;width:auto;height:auto;
  max-width:min(1180px,92vw);max-height:78vh;      /* 宽和高都要卡 */
  border-radius:10px;
  background:#000;
  box-shadow:0 0 0 1px rgba(216,169,106,.34),
    0 0 70px -10px rgba(216,169,106,.34),
    0 34px 80px -30px rgba(0,0,0,.95);
}

/* ── 相册 ── */
.panel-album{padding-top:clamp(56px,9vh,96px)}
.al-title{
  font:400 clamp(20px,2.3vw,30px)/1.5 var(--kai);
  letter-spacing:.16em;text-align:center;margin:0 0 10px;
  color:var(--gold-2);
}
.al-sub{
  text-align:center;margin:0 0 clamp(26px,4.4vh,46px);
  font:400 13.5px/1.7 var(--kai);letter-spacing:.16em;color:var(--fg-2);
}
.album{
  width:min(1180px,92vw);margin:0 auto;
  display:grid;gap:clamp(14px,2.4vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  align-items:start;
}
/* 错落：每张各歪一点、各升降一点，像随手摊在桌上的一叠相纸 */
.album figure{
  margin:0;cursor:zoom-in;position:relative;
  padding:clamp(8px,1vw,12px) clamp(8px,1vw,12px) clamp(30px,3.4vw,42px);
  background:linear-gradient(168deg,#FBF7EE,#EEE5D3);
  border-radius:2px;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.86),0 0 0 1px rgba(120,100,70,.16);
  transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px));
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.album figure:nth-child(6n+1){--rot:-1.7deg;--dy:6px}
.album figure:nth-child(6n+2){--rot: 1.3deg;--dy:-10px}
.album figure:nth-child(6n+3){--rot:-.8deg;--dy:14px}
.album figure:nth-child(6n+4){--rot: 2.1deg;--dy:-4px}
.album figure:nth-child(6n+5){--rot:-2.3deg;--dy:10px}
.album figure:nth-child(6n+6){--rot: .6deg;--dy:-14px}
/* 偶尔一张横跨两栏，画面才有呼吸。
   落在第 5 张：4 列时 1-4 / 5(跨2)+6+7 / 8-11 正好排满，不留空洞 */
.album figure:nth-child(7n+5){grid-column:span 2}
@media (max-width:640px){.album figure:nth-child(7n+5){grid-column:span 1}}

.album img{
  display:block;width:100%;height:auto;
  border-radius:1px;background:#DDD2BC;
}
.album figure:hover{
  transform:rotate(0deg) translateY(calc(var(--dy,0px) - 6px)) scale(1.035);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.92),0 0 0 1px rgba(216,169,106,.4);
  z-index:3;
}
/* 相纸下缘的手写小字 */
.album figure figcaption{
  position:absolute;left:0;right:0;bottom:clamp(7px,.9vw,11px);
  text-align:center;
  font:400 clamp(11px,1vw,13px)/1 var(--kai);
  letter-spacing:.2em;color:#8A7358;
}
.al-pad{height:clamp(70px,10vh,110px)}

/* ── 大图 ── */
.lbox{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,3,7,.95);
  backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s var(--ease);
}
.lbox.show{opacity:1}
.lbox[hidden]{display:none}
.lbox-stage{margin:0;display:inline-block;max-width:94vw}
.lbox-stage img{
  display:block;width:auto;height:auto;
  max-width:94vw;max-height:82vh;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(216,169,106,.3),0 40px 90px -30px rgba(0,0,0,.98);
}
.lbox-cap{
  position:absolute;left:0;right:0;bottom:clamp(16px,3vh,32px);
  margin:0;text-align:center;
  font:400 13px/1 var(--kai);letter-spacing:.24em;color:var(--fg-2);
}
.lbox-close{
  position:absolute;right:clamp(14px,2.2vw,28px);top:clamp(14px,2.4vh,26px);
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  font-size:16px;color:#F6EEDF;
  background:rgba(18,15,24,.8);border:1px solid rgba(216,169,106,.44);
  backdrop-filter:blur(8px);transition:.3s var(--ease);
}
.lbox-close:hover{background:rgba(216,169,106,.2);transform:rotate(90deg)}
.lbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  font-size:26px;line-height:1;color:#F6EEDF;
  background:rgba(18,15,24,.72);border:1px solid rgba(216,169,106,.4);
  backdrop-filter:blur(8px);transition:.3s var(--ease);
}
.lbox-nav:hover{background:rgba(216,169,106,.2);border-color:var(--gold)}
.lbox-prev{left:clamp(10px,2vw,30px)}
.lbox-next{right:clamp(10px,2vw,30px)}

/* ── 无障碍：减少动态效果 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .scene-art,.hot{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
  .scene-art{transform:none!important}
  .veil,.panel,.lbox,.music,.hot .lbl{transition:none!important}
}
@media (max-width:900px),(max-aspect-ratio:1/1){
  .letter-paper{width:92vw;margin-top:clamp(34px,5.4vh,50px)}
  .l-body p{font-size:clamp(15.5px,4.1vw,17.5px)}
  .rod{width:92vw}
  .panel-album{padding-top:clamp(48px,8vh,80px)}
}