/* ══════════════════════════════════════════════════════════════
   封面交互层：金墨提亮 · 双语镜像呼吸 · 水墨夹注 · 透明热区
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 透明热区（叠在封面之上，无可见边框） ─────────── */
.hz{
  position:absolute; inset:0; z-index:14;
  width:100%; height:100%;
  pointer-events:none; overflow:visible;   /* 命中测试交给子图形 */
}
.hz__zone{
  fill: rgba(0,0,0,0);
  pointer-events: all;
  touch-action: none;                       /* 触屏拖曳不与滚动冲突 */
  cursor: pointer;
  outline: none;                            /* 由 :focus-visible 自绘 */
}
.hz__zone:focus-visible{
  fill: rgba(246,227,168,.07);
  stroke: rgba(246,227,168,.75);
  stroke-width: 2;
  paint-order: stroke;
}
/* 书口热区可拖曳 */
#hz-edge{ cursor: grab; }
.stage[data-drag="1"] #hz-edge{ cursor: grabbing; }
.stage[data-view="page"] .hz{ visibility:hidden; }
.stage[data-flipping="1"] .hz__zone{ pointer-events:none; }

/* 调试：显示全部热区 */
.stage[data-debug="zones"] .hz__zone{
  fill: rgba(255,60,120,.13);
  stroke: #ff2d7a; stroke-width:2; stroke-dasharray: 8 6;
}
.stage[data-debug="zones"] .hz__zone::after{ content:''; }

/* 悬停书页边缘时，书口泛起一线纸光 */
.stage::after{
  content:''; position:absolute; top:1%; bottom:1%; right:-.3%; width:24%;
  background: linear-gradient(270deg, rgba(255,244,214,.20), rgba(255,244,214,.04) 42%, transparent 72%);
  mix-blend-mode: screen; opacity:0; pointer-events:none; z-index:15;
  transition: opacity .55s ease;
}
.stage[data-hover="flip"]::after{ opacity:1; }

/* ═══════════ 金墨提亮 / 浮雕 / 镜像呼吸 ═══════════ */
.inkfx{
  position:absolute; inset:0; z-index:13;
  width:100%; height:100%; pointer-events:none; overflow:visible;
}
.inkfx .glow{
  opacity:0;
  transition: opacity .42s ease;
}
/* 金墨提亮层：SVG 滤镜抽出笔画，再以 CSS 滤镜发散金光 */
.glow__halo{
  filter: url(#fx-gold)
          drop-shadow(0 0 4px rgba(248,226,158,.85))
          drop-shadow(0 0 12px rgba(206,158,66,.45));
}
/* 浮雕层：亮而略偏上的一层，营造凸起感 */
.glow__relief{
  mix-blend-mode: screen;
  opacity:.46;
  transform: translate(-.75px, -.75px);
}

.stage[data-active="han"]    .inkfx [data-glyph="han"],
.stage[data-active="tangut"] .inkfx [data-glyph="tangut"]{ opacity:.86; }

@keyframes breathe{
  0%,100%{ opacity:.06; }
  46%    { opacity:.30; }
}
.stage[data-active="han"]    .inkfx [data-glyph="tangut"],
.stage[data-active="tangut"] .inkfx [data-glyph="han"]{
  animation: breathe 2.7s ease-in-out infinite;
}

/* 翻页中关闭特效，避免与折页错位 */
.stage[data-drag="1"] .inkfx .glow,
.stage[data-flipping="1"] .inkfx .glow{ opacity:0 !important; animation:none !important; transition:none; }

/* ═══════════ 水墨夹注 ═══════════ */
.gloss{
  position:absolute; z-index:16;
  left:15.0%; top:16.6%; width:8.4%; height:44%;
  pointer-events:none;
  visibility:hidden;
}
.gloss.is-open,.gloss.is-closing{ visibility:visible; }

/* 墨晕：从笔尖位置向纸里晕开 */
.gloss__wash{
  position:absolute; left:-18%; top:-3%; width:140%; height:106%;
  border-radius: 48% 52% 46% 54% / 7% 9% 8% 11%;
  background:
    radial-gradient(58% 46% at 38% 26%, rgba(46,36,26,.24), transparent 72%),
    radial-gradient(66% 54% at 66% 68%, rgba(46,36,26,.18), transparent 74%),
    radial-gradient(40% 30% at 50% 92%, rgba(46,36,26,.14), transparent 76%);
  filter: blur(8px);
  opacity:0; transform: scale(.5); transform-origin: 82% 2%;
  transition: transform 1.2s cubic-bezier(.18,.82,.22,1), opacity .85s ease;
}
.gloss.is-open .gloss__wash{ opacity:1; transform: scale(1); }
.gloss.is-closing .gloss__wash{
  opacity:0; transform: scale(1.16);
  transition: transform .95s ease-out, opacity .95s ease-out;
}

/* 引线：自落款处引出的细墨线 */
.gloss__rule{
  position:absolute; right:-7%; top:1%; width:1.4px; height:97%;
  background: linear-gradient(180deg,
    rgba(36,31,25,0), rgba(36,31,25,.52) 10%,
    rgba(36,31,25,.40) 84%, rgba(36,31,25,0));
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1.05s cubic-bezier(.2,.8,.2,1);
}
.gloss.is-open .gloss__rule{ transform: scaleY(1); }
.gloss.is-closing .gloss__rule{ transform: scaleY(0); transition-duration:.55s; }
.gloss__rule::before{
  content:''; position:absolute; left:50%; top:-.22em;
  width:.42em; height:.42em; margin-left:-.21em; border-radius:50%;
  background: var(--vermilion); opacity:.85;
}

/* 手写体夹注：竖排，逐字生长 */
.gloss__text{
  position:absolute; inset:0;
  margin:0;
  writing-mode: vertical-rl;
  font-family: var(--f-brush);
  font-size: calc(var(--u, 8px) * 1.52);
  line-height: 1.66;
  letter-spacing: .04em;
  color: #2b2318;
  text-shadow: 0 0 1px rgba(43,35,24,.35), 0 0 12px rgba(43,35,24,.10);
}
.gloss__text .ch{
  display:inline-block;
  opacity:0;
  filter: blur(7px);
}
.gloss.is-open .gloss__text .ch{
  animation: ch-in .66s cubic-bezier(.2,.78,.22,1) both;
  animation-delay: calc(var(--i) * 30ms + 240ms);
}
@keyframes ch-in{
  0%  { opacity:0; filter: blur(8px); transform: translate(3px,-2px) scale(1.22); }
  58% { opacity:1; filter: blur(1.2px); }
  100%{ opacity:1; filter: blur(0);   transform: translate(0,0) scale(1); }
}
.gloss.is-closing .gloss__text .ch{
  animation: ch-out .62s ease-out both;
  animation-delay: calc((var(--n) - var(--i)) * 13ms);
}
@keyframes ch-out{
  0%  { opacity:1; filter: blur(0);    transform: none; }
  100%{ opacity:0; filter: blur(10px); transform: translate(2px,4px) scale(1.08); }
}

/* 出版／整理区的朱印回馈 */
.imprint{
  position:absolute; z-index:17; pointer-events:none;
  left:9.6%; top:76%; width:14%; height:16%;
  display:grid; place-items:center;
  opacity:0; transform: scale(.72) rotate(-7deg);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.imprint.is-open{ opacity:.92; transform: scale(1) rotate(0deg); }
.imprint__seal{
  writing-mode: vertical-rl;
  font-family: var(--f-serif); font-size: calc(var(--u,8px) * 1.24);
  letter-spacing:.16em;
  color:#f3e2c8;
  padding:.5em .4em;
  border:2px solid rgba(246,226,196,.75);
  border-radius:2px;
  background: linear-gradient(150deg, rgba(178,58,42,.94), rgba(132,34,24,.94));
  box-shadow: 0 3px 12px rgba(60,10,6,.45);
}

/* ═══════════ 拖曳中的纸张回馈 ═══════════ */
.stage[data-drag="1"] .leaf{ cursor: grabbing; }