@charset "UTF-8";
/* ==========================================================================
   cover.css · 首页封面（类书籍纸面 + 水墨流体）
   --------------------------------------------------------------------------
   版式沿用刊物设计令牌：纸白/墨黑、细线框、衬线竖排题签、
   等宽元数据、Miku 青只做印章与指示的小面积强调。
   结束于 .cover.leaving：揭页交给 opacity/transform，不引入新动画体系。
   ========================================================================== */

/* 封面层：整页纸面，揭开后从 DOM 移除 */
.cover{
  position:fixed;
  inset:0;
  z-index:2000; /* 压过 z-index:999 的顶栏 */
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none; /* 触屏拖笔不触发滚动/刷新 */
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.cover.leaving{
  opacity:0;
  transform:translateY(-1.6%) scale(1.012);
  pointer-events:none;
}

/* 封面在场时收起主页：躲开焦点与读屏，揭页瞬间随淡出显现 */
body.cover-hold{ overflow:hidden; }
body.cover-hold > :not(.cover){ visibility:hidden; }

/* ---------- 三层画布：墨 → 纸纹 → 框与版面 ---------- */
#inkCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
/* 纸纹噪点：极淡，浅色正片叠底 / 深色滤色 */
.cover-grain{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}
[data-theme="dark"] .cover-grain{
  mix-blend-mode:screen;
  opacity:.05;
}

/* ---------- 书封双细线框 ---------- */
.cover-frame{
  position:absolute;
  inset:clamp(10px,1.6vw,18px);
  z-index:2;
  pointer-events:none;
  border:1px solid var(--rule);
}
.cover-frame::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid var(--border);
}

/* ---------- 版面：上题签居左，下款识居左，「进入」居右下 ---------- */
.cover-inner{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(30px,5.4vh,56px) clamp(28px,4.6vw,60px);
  pointer-events:none; /* 版面只是字，点击全交给水墨；按钮单独放开 */
}

.cover-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.cover-kicker,
.cover-vol{
  margin:0;
  font-family:var(--mono);
  font-size:var(--font-small);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-secondary);
}

/* 题签：竖排右起的粘签，贴一块 surface 底让题字浮在墨上 */
.cover-slip{
  align-self:flex-start;
  margin-top:clamp(18px,4.5vh,46px);
  writing-mode:vertical-rl;
  position:relative;
  padding:clamp(20px,2.8vw,30px) clamp(14px,1.9vw,22px);
  background:var(--surface);
  border:1px solid var(--rule);
  display:flex;
  /* vertical-rl 里轴向随文换向：column = 横向右→左（题右、款左），
     row = 纵向自上而下。别凭横排直觉改。
     align-items 取 flex-start：列高各随内容，题字定签高；
     默认的 stretch 会把题字框压到旁列高度，六字标题会被折成两列。 */
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(14px,1.8vw,22px);
}
.cover-title{
  margin:0;
  white-space:nowrap; /* 竖排折列 = 掉出一列字，绝不许 */
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(30px,4.5vw,48px); /* 六字比旧四字长，收一号保住留白 */
  line-height:1;
  letter-spacing:.14em;
  color:var(--text);
}
.cover-slip-side{
  display:flex;
  flex-direction:row; /* 纵向堆叠：款字在上、印章坠底 */
  align-items:center;
  gap:16px;
  padding-top:clamp(44px,6vh,80px); /* 款字下坠，留出题签上部余白 */
}
.cover-author{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(12px,1.15vw,14px);
  letter-spacing:.34em;
  color:var(--text-secondary);
}
.cover-seal{
  writing-mode:horizontal-tb;
  width:27px;
  height:27px;
  line-height:27px;
  text-align:center;
  font-family:var(--serif);
  font-size:15px;
  color:var(--bg);
  background:var(--accent);
  border-radius:2px;
  transform:rotate(-3deg);
}

.cover-foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px 24px;
  flex-wrap:wrap;
}
.cover-foot-left{ max-width:46ch; }
.cover-lead{
  margin:0 0 10px;
  font-size:clamp(14px,1.2vw,16px);
  letter-spacing:.02em;
  color:var(--text-secondary);
}
.cover-hint{
  margin:0;
  font-family:var(--mono);
  font-size:var(--font-small);
  letter-spacing:.12em;
  color:var(--text-secondary);
}
.cover-hint::before{
  content:"◆ ";
  font-size:9px;
  vertical-align:2px;
  color:var(--accent);
}
/* 静帧降级（减动效 / 无 WebGL）时水墨不可搅，不误导 */
.cover--static .cover-hint{ display:none; }

/* 「进入」：同 .btn 的反转语言，字距拉开像题签上的引语 */
.cover-enter{
  pointer-events:auto;
  cursor:pointer;
  padding:12px 24px 12px 30px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--text);
  border-radius:0;
  font-family:var(--mono);
  font-size:clamp(13px,1.15vw,15px);
  font-weight:500;
  letter-spacing:.42em;
  transition:background .2s, color .2s, border-color .2s;
}
.cover-enter:hover{
  background:var(--text);
  color:var(--bg);
}
.cover-enter:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* 墨漫过来时保住文字可读：极窄的纸色晕，不是投影 */
.cover-kicker,.cover-vol,.cover-lead,.cover-hint,.cover-author{
  text-shadow:0 0 5px var(--bg), 0 0 2px var(--bg);
}

/* ---------- 开卷入场：三段错落浮现 ---------- */
@keyframes coverRise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.cover-top{ animation:coverRise .7s var(--ease) .1s backwards; }
.cover-slip{ animation:coverRise .8s var(--ease) .25s backwards; }
.cover-foot{ animation:coverRise .7s var(--ease) .45s backwards; }

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .cover-inner{ padding:24px 20px; }
  .cover-slip{ margin-top:4px; }
  .cover-title{ font-size:clamp(30px,9vw,38px); }
  .cover-slip-side{ padding-top:36px; }
  .cover-vol{ display:none; }
  .cover-foot{ flex-direction:column; align-items:stretch; }
  .cover-enter{ align-self:flex-end; }
}
@media (max-height:520px){
  .cover-slip{ margin-top:8px; }
  .cover-title{ font-size:clamp(26px,6vh,36px); }
  .cover-slip-side{ padding-top:28px; }
}