/* ═══════════════════════════════════════════════
   门后的便利贴
   手机优先（390×844 基准），桌面居中铺尾帧虚化
   视觉规范沿用 landing-page-design：字号梯队 / 间距表 / 动效令牌
   ═══════════════════════════════════════════════ */

:root{
  --t-xs:12px; --t-sm:14px; --t-base:16px; --t-lg:18px; --t-xl:20px; --t-2xl:24px;
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-8:48px;
  --r-sm:4px; --r-md:8px;

  --ink-0:#0B0908;      /* 夜 */
  --ink-1:#181818;
  --ink-2:#1F1F1F;
  --fg:#FFFFFF;
  --fg-2:rgba(255,255,255,.62);
  --fg-3:rgba(255,255,255,.38);
  --gold:#E5C89A;

  --e:cubic-bezier(.22,1,.36,1);
  --e-in:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.33,1,.68,1);
  --pop:cubic-bezier(.34,1.56,.64,1);   /* 便利贴的弹性弹出 */

  --font:"Noto Serif SC","Songti SC","STSong",KaiTi,"楷体",Georgia,serif;
}

*{box-sizing:border-box}
html{background:var(--ink-0);overflow-x:hidden;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-0);color:var(--fg);
  font-family:var(--font);
  overflow:hidden;                 /* 单屏体验，便利贴自己定位 */
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
[hidden]{display:none!important}

.skip{
  position:fixed;left:var(--s-4);top:-64px;z-index:100;
  padding:var(--s-3) var(--s-4);background:var(--ink-2);color:var(--fg);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--r-sm);
  font-size:var(--t-sm);text-decoration:none;transition:top .3s var(--e);
}
.skip:focus{top:var(--s-4)}

/* ── 音乐 ── */
.music{
  position:fixed;right:calc(var(--s-4) + env(safe-area-inset-right,0px));
  top:calc(var(--s-4) + env(safe-area-inset-top,0px));z-index:80;
  width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--fg-2);background:rgba(24,24,24,.72);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(9px);
  transition:color .3s var(--e),background-color .3s var(--e),
             border-color .3s var(--e),transform .5s var(--e);
}
.music svg{width:20px;height:20px}
.music:hover{background:rgba(255,255,255,.1);color:var(--fg)}
.music:active{transform:scale(.98)}
.music:focus-visible{outline:2px solid #fff;outline-offset:3px}
.music.off{color:rgba(255,255,255,.86)}     /* 暂停态最常见，必须看得清 */
.music.on{color:#fff;border-color:rgba(255,255,255,.4)}
.music.on .m-off{display:none}
.music.off .m-on{display:none}

.hint{
  position:fixed;left:50%;top:calc(var(--s-4) + env(safe-area-inset-top,0px));
  transform:translateX(-50%);z-index:79;margin:0;white-space:nowrap;
  padding:var(--s-2) var(--s-4);border-radius:999px;
  font-size:var(--t-sm);letter-spacing:.1em;color:rgba(255,255,255,.92);
  background:rgba(11,9,8,.86);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(9px);
  animation:hintIn .7s var(--e-in) both;
}
@keyframes hintIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ══════════ 舞台 ══════════ */
.stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-0);overflow:hidden;
}
.backdrop{
  position:absolute;inset:0;
  background:url("assets/end.jpg") center/cover no-repeat;
  filter:blur(34px) brightness(.34) saturate(1.1);
  transform:scale(1.18);
}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 86% at 50% 46%,transparent 38%,rgba(6,5,4,.6) 100%);
}

/* 视频框 = 素材自身的 720:1260（0.5714） */
.frame{
  position:relative;z-index:2;margin:0;
  width:min(100vw,calc(100vh * .5714));
  height:min(100vh,calc(100vw * 1.75));
  border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95);
}
@supports (width:100dvh){
  .frame{
    width:min(100vw,calc(100dvh * .5714));
    height:min(100dvh,calc(100vw * 1.75));
  }
}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* ── 门把手抓手：金色横把的中心（x 54% / y 42.5%） ── */
.door-hot{
  position:absolute;left:54%;top:42.5%;z-index:3;
  transform:translate(-50%,-50%);
  width:clamp(64px,17vw,84px);height:clamp(64px,17vw,84px);
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 50% 42%,rgba(229,200,154,.28),rgba(229,200,154,.05) 52%,transparent 74%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  animation:breathe 3s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .4s var(--e);
}
.door-hot.gone{opacity:0;pointer-events:none}
.door-hot .ring{
  width:clamp(48px,12vw,58px);height:clamp(48px,12vw,58px);
  border-radius:50%;border:1.5px solid rgba(229,200,154,.9);
  background:rgba(11,9,8,.4);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  transition:transform .35s var(--e),background-color .35s var(--e);
}
.door-hot .ring::after{
  content:"";width:44%;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,rgba(229,200,154,.5),var(--gold));
  box-shadow:0 0 8px rgba(229,200,154,.8);   /* 模拟那根金色把手 */
}
.door-hot .lbl{
  font-size:var(--t-xs);letter-spacing:.3em;text-indent:.3em;
  color:var(--gold);white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.95);
}
.door-hot:hover .ring{transform:scale(1.12);background:rgba(11,9,8,.6)}
.door-hot:hover{animation-play-state:paused}
.door-hot:active{transform:translate(-50%,-50%) scale(.95)}
.door-hot:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:999px}
@media (hover:none){.door-hot{animation:none;opacity:1}}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}

/* ══════════ 便利贴 ══════════ */
.notes{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}

.note{
  position:absolute;
  width:clamp(148px,42vw,200px);
  padding:14px 15px 18px;
  border-radius:3px;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.28);
  color:#33291D;
  transform-origin:50% 12%;
  animation:noteIn .55s var(--pop) both;
}
@keyframes noteIn{
  from{opacity:0;transform:rotate(calc(var(--rot,0deg) - 7deg)) scale(.3) translateY(-14px)}
  to{opacity:1;transform:rotate(var(--rot,0deg)) scale(1) translateY(0)}
}
/* 右下折角 */
.note::after{
  content:"";position:absolute;right:0;bottom:0;
  width:0;height:0;
  border-style:solid;border-width:0 0 16px 16px;
  border-color:transparent transparent rgba(0,0,0,.14) transparent;
}
.note .who{
  display:block;margin:0 0 8px;
  font-size:var(--t-xs);letter-spacing:.22em;
  color:rgba(51,41,29,.52);
}
.note .txt{
  margin:0;font-size:15px;line-height:1.78;
  letter-spacing:.02em;font-weight:400;
  text-wrap:pretty;
}


/* ══════════ 窄屏 ══════════ */
@media (max-width:560px){
  .note{width:clamp(140px,46vw,190px)}
  .note .txt{font-size:14px;line-height:1.72}
}

/* ══════════ 减少动效 ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-delay:0ms!important}
  .note{opacity:1;transform:rotate(var(--rot,0deg))}
}