/* ============================================================
   《无名卷与署名卷》开屏封面（B3_COVER_v5/v6 定稿实装 · 2026-07-28）
   效果权威 = docs/mockups/B3_COVER_v6.html；本文件 = v6 样式 1:1 移植，
   仅两处工程化改动：frame → 全屏 overlay（.cover-prologue），
   终态 appskel 删除（推镜结束直接揭开真实 app）。
   颜色为封面专属摄影层（书案/羊皮/墨），不接主题 token，不随 dark 翻转
   ——封面是一幕电影，不是 UI 面。
   ============================================================ */
/* 预启动遮罩：静态壳阶段即暗场（index.html 内联脚本挂类，coverPrologue 接管后摘除） */
html.cover-pending {
  background: #120d09;
}
html.cover-pending body {
  background: #120d09;
}
html.cover-pending #app {
  visibility: hidden;
}

.cover-prologue {
  position: fixed;
  inset: 0;
  z-index: var(--tm-z-overlay);
  overflow: hidden;
  cursor: pointer;
  background: #120d09 center / cover no-repeat;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.cover-prologue.cvp-leaving {
  opacity: 0;
  pointer-events: none;
}
.cover-prologue canvas,
.cover-prologue img {
  display: block;
}
.cvp-bgcv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.cvp-dust {
  position: absolute;
  border-radius: 99px;
  background: #ffe9c422;
  z-index: 1;
  pointer-events: none;
  animation: cvp-drift 9s linear infinite;
}
@keyframes cvp-drift {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.7; }
  80% { opacity: 0.35; }
  100% { transform: translate(26px, 44px); opacity: 0; }
}

/* 定幅舞台：mockup 坐标系 372×700，JS 等比 cover 缩放（对位不随窗宽漂移） */
.cvp-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 372px;
  height: 700px;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

/* ═══ 羊皮 rotulus（无杆，羊皮自身卷边） ═══ */
.cvp-cam {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 50% 30%;
}
.cvp-scroll {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 300px;
  height: 600px;
  margin: -300px 0 0 -150px;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateZ(-2.5deg);
}
.cvp-scroll-shadow {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 330px;
  height: 600px;
  margin: -284px 0 0 -165px;
  background: radial-gradient(46% 48% at 50% 52%, #000000a8, transparent 72%);
  filter: blur(16px);
  z-index: 0;
}
.cvp-vellum {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 42px;
  bottom: 54px;
  overflow: hidden;
  border-radius: 6px 8px 7px 5px;
  box-shadow: 0 8px 22px #00000052, inset 0 0 0 1px #00000018;
  clip-path: polygon(0.8% 0.4%, 98.9% 0%, 100% 1.2%, 99.4% 98.8%, 97.8% 100%, 1.4% 99.6%, 0% 98.4%, 0.4% 1.6%);
}
.cvp-tex {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.cvp-tex2 {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.cvp-vellum.cvp-reborn .cvp-tex2 {
  opacity: 1;
}
.cvp-age {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, #6b4a1e2e 82%, #4a301252 100%),
    radial-gradient(40% 26% at 12% 8%, #7a532150, transparent 70%),
    radial-gradient(34% 20% at 91% 16%, #6b482042, transparent 70%),
    radial-gradient(46% 25% at 84% 90%, #6b48204a, transparent 72%),
    radial-gradient(30% 18% at 8% 78%, #7a53213e, transparent 70%);
}
.cvp-curlshade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #4a301238 0, transparent 7%, transparent 93%, #4a301238 100%),
    linear-gradient(180deg, #4a301226 0, transparent 6%, transparent 94%, #4a301226 100%);
}
.cvp-guest .cvp-age { opacity: 0.42; }
.cvp-guest .cvp-curlshade { opacity: 0.65; }
.cvp-inkcv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 上端 = 自然裁切边窄翻边；下端 = 余卷（阅读方向的存量） */
.cvp-curl {
  position: absolute;
  left: 5.2%;
  right: 5.2%;
  z-index: 3;
  background-size: cover;
  overflow: hidden;
}
.cvp-curl .cvp-shade {
  position: absolute;
  inset: 0;
}
.cvp-curl-t {
  top: 34px;
  height: 15px;
  border-radius: 8px 10px 3px 4px / 7px 8px 3px 3px;
  transform: rotate(0.35deg);
  box-shadow: 0 3px 7px #00000042;
  background-position: center 4%;
}
.cvp-curl-t .cvp-shade {
  background:
    linear-gradient(180deg, #fff3 0%, #ffffff10 34%, #3a250e52 78%, #24150580 100%),
    linear-gradient(90deg, #2b1d0b55 0, transparent 6%, transparent 94%, #2b1d0b55 100%);
}
.cvp-curl-b {
  bottom: 0;
  height: 64px;
  border-radius: 26px / 22px;
  transform: rotate(-0.6deg);
  box-shadow: 0 10px 20px #00000066, inset 0 0 0 1px #00000026;
  background-position: center 92%;
}
.cvp-curl-b .cvp-shade {
  background:
    linear-gradient(0deg, #241505b0 0%, #3a250e70 16%, transparent 46%, #ffffff12 62%, #fff2 74%, #5a3d1a66 100%),
    linear-gradient(90deg, #2b1d0b78 0, transparent 6%, transparent 94%, #2b1d0b78 100%);
}
.cvp-end {
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 11px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #e8dcc0 0, #e8dcc0 1.2px, #b9a478 2.2px, #8f7a52 3px);
  box-shadow: inset 0 0 4px #00000066, inset 0 0 1px #00000033;
  opacity: 0.92;
}
.cvp-end-l { left: -2px; }
.cvp-end-r { right: -2px; }
.cvp-curl-cast-t {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 47px;
  height: 12px;
  z-index: 2;
  background: linear-gradient(180deg, #00000030, transparent);
  filter: blur(2px);
}
.cvp-curl-cast-b {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 58px;
  height: 24px;
  z-index: 2;
  background: linear-gradient(0deg, #00000044, transparent);
  filter: blur(3px);
}

/* 墨后显影：报头 + 中世纪藏书题记（署名态） */
.cvp-impress {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 9%;
  opacity: 0;
  transition: opacity 1s 0.2s;
}
.cvp-impress .cvp-nm {
  font-family: var(--tm-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: #2b2534;
}
.cvp-impress .cvp-rl {
  border: 0;
  border-top: 1.6px solid #2b2534;
  margin-top: 7px;
}
.cvp-impress .cvp-clph {
  margin-top: 12px;
  font-family: var(--tm-serif);
  color: #3a2f52;
  font-size: 13.5px;
  letter-spacing: 0.14em;
}
.cvp-impress .cvp-nm2 {
  font-style: italic;
  letter-spacing: 0.06em;
}
.cvp-impress .cvp-ad {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: #6b5f85;
}
.cvp-vellum.cvp-reborn .cvp-impress {
  opacity: 0.94;
}

/* ═══ 羽毛笔（真素材，屏幕空间，不入 3D） ═══ */
.cvp-brush {
  position: absolute;
  width: 75px;
  height: 340px;
  left: 62%;
  top: -55%;
  z-index: 8;
  filter: drop-shadow(7px 12px 9px rgba(0, 0, 0, 0.16));
  transform: rotate(-30deg);
  transform-origin: 20px 14px;
  transition: transform 1s cubic-bezier(0.3, 0.9, 0.3, 1), top 1s cubic-bezier(0.3, 0.9, 0.3, 1), left 1s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.6s;
}
.cvp-brush.cvp-enter { top: -12.7%; left: 22.3%; }
.cvp-brush.cvp-dip { top: -13%; left: 29.9%; transform: rotate(-26deg); }
.cvp-brush.cvp-lift { top: -62%; left: 72%; transform: rotate(-42deg); opacity: 0; }
.cvp-brush-shadow {
  position: absolute;
  z-index: 7;
  left: 46%;
  top: 24%;
  width: 215px;
  height: 34px;
  border-radius: 99px;
  background: radial-gradient(50% 50% at 50% 50%, #0000003a, transparent 74%);
  filter: blur(9px);
  opacity: 0;
  transform: rotate(-27deg);
  transition: opacity 0.8s, top 1s, left 1s, width 1s, filter 1s;
}
.cvp-brush-shadow.cvp-enter { opacity: 0.58; top: 26.5%; left: 33%; }
.cvp-brush-shadow.cvp-dip { opacity: 0.66; top: 27%; left: 31.8%; width: 200px; filter: blur(7px); }
.cvp-brush-shadow.cvp-lift { opacity: 0; }
.cvp-bead {
  position: absolute;
  z-index: 9;
  width: 5px;
  height: 5px;
  border-radius: 50% 50% 58% 58%;
  background: radial-gradient(circle at 34% 30%, #6a58d4, #3e3190 60%, #241c56);
  left: 70.9%;
  top: 30.7%;
  opacity: 0;
  transform: scale(0.4);
}
.cvp-bead-cast {
  position: absolute;
  z-index: 6;
  width: 15px;
  height: 6px;
  border-radius: 50%;
  left: calc(70.5% - 8px);
  top: 39.4%;
  opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, #00000022, transparent 72%);
  filter: blur(2.5px);
  transform: translate(6px, 3px) scale(1.35);
  transition: opacity 0.5s, transform 0.38s cubic-bezier(0.5, 0, 1, 0.7), filter 0.38s;
}
.cvp-bead-cast.cvp-on { opacity: 0.42; }
.cvp-bead-cast.cvp-meet { transform: translate(1px, 0) scale(0.38); filter: blur(1px); opacity: 0.34; }
.cvp-bead.cvp-grow {
  opacity: 1;
  transition: transform 0.55s cubic-bezier(0.5, 1.6, 0.5, 1);
  transform: scale(1.35);
}
.cvp-bead.cvp-grow.cvp-hold {
  animation: cvp-bead-tremble 1.1s ease-in-out 0.55s infinite;
}
@keyframes cvp-bead-tremble {
  0%, 100% { transform: scale(1.35); }
  45% { transform: scale(1.46) translateY(1px); }
  60% { transform: scale(1.39); }
}
.cvp-bead.cvp-fall {
  opacity: 1;
  transition: top 0.5s cubic-bezier(0.55, 0, 1, 0.45), transform 0.5s;
  transform: scaleY(1.55) scaleX(0.82);
  top: 38.5%;
  animation: none;
}

/* ═══ 推镜（终态 = 真实 app，随 overlay 淡出揭幕） ═══ */
.cvp-cam.cvp-push {
  transition: transform 1s cubic-bezier(0.5, 0.05, 0.2, 1), opacity 0.35s 0.78s;
  transform: scale(2.35) translateY(9%);
  opacity: 0;
}