/* ══════════════════════════════════════════════════════════════
   其四 · 掌珠 —— 六文合璧
   全屏一张宣纸。纸心一个圈上立着六种文字的「一个字」：
   汉・西夏・吐蕃・回鹘・契丹大字・女真文。长按（或向上拂过）纸面，
   六字自纸上升起、散作墨粒，归向纸心凝成一枚珠；珠起飞、落在右上角
   成一枚朱印，纸心左侧随之长出后记。点那枚印，自书中抽出一叶夹页。
   页面上自始至终没有现代控件——只有纸、墨、金线与批注。
   ── 为什么这一卷另立一套版面（不自百分比算，改由脚本量「纸心方框」）：
      四卷的底页宽高由封面那一支按窗口实时算（对开时是一条横长的框，
      不是单页）。若直接拿框的百分比摆字，同一个圆在宽屏上会被拉成扁的
      （实测：左右半径 246px、上下半径 152px，圈就不成圈了）。
      故本卷先在框里量出一个「单页方框」（纸心方框，794:1044），
      六字的座标一律取这个方框的百分比，换任何窗口构图都不走样。
   ══════════════════════════════════════════════════════════════ */

.page--zz{ background:none; box-shadow:none; }

.zz{
  --ink:    #2b2318;
  --ink-2:  #5d5142;
  --ink-3:  #8a7a66;
  --gold:   #c79a44;
  --gold-hi:#f2dda6;
  --zhu:    #a63428;
  /* 印面：书上自己的题名末三字（掌・中・珠），掩膜 PNG，与六体同一路数。
     写在样式表里，相对路径才以样式表为基准解析。 */
  --seal:url('../assets/zhangzhu/seal-title.png');
  /* 纸心方框的单位：su = 方框高的 1%，sw = 方框宽的 1%（由脚本写入） */
  --su: 8px;
  --sw: 6px;
  position:absolute; inset:0;
  overflow:hidden;
  color:var(--ink);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  /* 纸：与其一・其二・其三同一张宣纸，四卷翻过去是同一张桌面 */
  background:
    radial-gradient(120% 78% at 50% 14%, rgba(255,253,246,.74), transparent 62%),
    linear-gradient(180deg, #f3ead4, #e9dfc2 62%, #ded1ae),
    url('../assets/paper-tile.png');
  background-size: auto, auto, 380px;
  background-blend-mode: normal, normal, multiply;
  box-shadow: inset 0 0 90px rgba(96,68,32,.20);
}

/* 纸心方框：看不见的定位框，六字、书眉、后记都取它的百分比 */
.zz__sheet{
  position:absolute; left:50%; top:50%;
  width:var(--sheet-w, 60%); height:var(--sheet-h, 80%);
  transform:translate(-50%,-50%);
}

/* 六体所在的圈：只作定位层，本身不画东西 */
.zz__ring{ position:absolute; inset:0; }

/* 纸的旧痕：几处极淡的水渍。走正片叠底，故只比纸色深一点点，
   是「纸像纸」的一点底子，不是画上去的东西。 */
.zz__stains{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; }
.zz__stains i{
  position:absolute; display:block; border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  background:radial-gradient(closest-side,
    rgba(122,92,52,var(--a,.04)), rgba(122,92,52,0) 82%);
}

/* 宣纸上的墨粒（正片叠底，像墨渗进纸）与金粒（普通叠色，像金粉落在纸面） */
.zz__dust,.zz__gleam{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.zz__dust{ mix-blend-mode:multiply; }
.zz__gleam{ mix-blend-mode:normal; }

/* ─────────── 六体：纸心一圈 ───────────
   每一体是一枚「掩膜」：字形的墨浓写在 PNG 的 alpha 里，故页面不依赖
   任何字库（西夏、藏、蒙古文在多数机器上根本没有，图版上的契丹・女真
   更是无从「打字」）。着色靠 CSS mask，粒子靠同一张掩膜的 alpha 采样。
   --x / --y 由脚本按角度现算（见 js/zhangzhu.js 的 placeGlyphs）：竖向半径
   也取方框宽，圈才是正圆——写死百分比的话，底页一变宽圆就扁。 */
.zz__gl{
  position:absolute; left:var(--x,50%); top:var(--y,50%);
  width:var(--sz,13%);
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  transition: transform .52s cubic-bezier(.28,.9,.3,1), opacity .42s ease;
  will-change: transform, opacity;
}
.zz__glyph{
  position:relative; display:block;
  width:100%; aspect-ratio:1 / 1;
  filter: drop-shadow(0 calc(var(--su) * .22) calc(var(--su) * .5) rgba(58,42,20,.30));
  transition: filter .7s ease;
}
.zz__ink,.zz__au{
  position:absolute; inset:0;
  -webkit-mask-image:var(--mask); mask-image:var(--mask);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition: opacity .8s ease;
}
.zz__ink{ background:linear-gradient(158deg, #4c3c28, #241c12 52%, #3a2c1c); }
.zz__au{ opacity:0; background:linear-gradient(158deg, #f6e6b4, var(--gold) 46%, #9c6a1c); }
/* 字名吊在字的圈外一侧，不占字位：上半的字名在字上、下半的在字下。
   如此「字心」正落在圈上，圈里那一块空处才干净——后记要长在那里。
   字名若挤在字与纸心之间（原先是那样），后记一长就要与它打架（试出来的）。 */
.zz__label{
  position:absolute; left:50%; top:calc(100% + .34em);
  transform:translateX(-50%);
  font-size:calc(var(--su) * 1.52);
  letter-spacing:.2em; text-indent:.2em; white-space:nowrap;
  color:rgba(93,81,66,.88);
  transition: opacity .5s ease;
}
.zz__gl.is-name-above .zz__label{ top:auto; bottom:calc(100% + .34em); }

/* 浮起：字自纸面立起来，金墨自笔画里透出来 */
.zz[data-state="lift"] .zz__gl,
.zz[data-state="burst"] .zz__gl{
  transform:translate(-50%,-50%) translateY(calc(var(--su) * -1.15)) scale(1.055);
}
.zz[data-state="lift"] .zz__glyph,
.zz[data-state="burst"] .zz__glyph{
  filter:
    drop-shadow(0 0 calc(var(--su) * 1.2) rgba(206,162,74,.72))
    drop-shadow(0 calc(var(--su) * 1.0) calc(var(--su) * 1.2) rgba(58,42,20,.42));
}
.zz[data-state="lift"] .zz__au,
.zz[data-state="burst"] .zz__au{ opacity:.66; }

/* 未动之时，六字只是薄薄地透一点金，像纸里藏着的那一点光 */
.zz[data-state="idle"] .zz__au{ opacity:.07; animation:zzBreath 6.5s ease-in-out infinite; }
@keyframes zzBreath{
  0%,100%{ opacity:.05; }
  50%    { opacity:.13; }
}

/* 散作墨粒：字退场，同处由画布上的墨粒接住（掩膜采样的原点就在这里） */
.zz[data-state="burst"] .zz__gl{ opacity:0; transition: opacity .40s ease; }
.zz[data-state="gather"] .zz__gl,
.zz[data-state="bead"] .zz__gl,
.zz[data-state="fly"] .zz__gl{ opacity:0; }

/* 落印：六字只留一层淡淡的影，像纸上洗不掉的旧痕；名目仍可读 */
.zz[data-state="landed"] .zz__gl,
.zz[data-state="inset"] .zz__gl{ opacity:1; transition: opacity 1.5s ease .5s; }
.zz[data-state="landed"] .zz__ink,
.zz[data-state="inset"] .zz__ink,
.zz[data-state="inset"] .zz__au{ opacity:.14; }
/* 六字化去之后，纸上留的是金痕——墨退一点、金加一点，纸面便不显灰旧 */
.zz[data-state="landed"] .zz__au,
.zz[data-state="inset"] .zz__au{ opacity:.28; }
.zz[data-state="landed"] .zz__glyph,
.zz[data-state="inset"] .zz__glyph{
  /* 化去之后留的不是墨，是光：六字各带一层极淡的金晕，纸面才不显灰旧 */
  filter:drop-shadow(0 0 calc(var(--su) * 1.7) rgba(198,150,70,.30));
}
/* 落定之后，六字那层旧痕里还剩一点金光，极缓地明灭一下，纸便不像死的 */
.zz[data-state="landed"] .zz__au,
.zz[data-state="inset"] .zz__au{ animation:zzBreath 9.5s ease-in-out infinite; }

/* ─────────── 印（右上）：珠落之处 ───────────
   印面不另刻花纹，就用书上自己的题名末三字（掌・中・珠）。 */
.zz__seal{
  position:absolute; right:5.4%; top:5.2%;
  height:16%; width:auto; aspect-ratio:246 / 600;
  padding:0; border:0; background:none; cursor:pointer;
  opacity:0; pointer-events:none;
  transform:scale(1.7) rotate(-7deg);
  transition: opacity .5s ease, transform .72s cubic-bezier(.18,1.5,.42,1), filter .4s ease;
  -webkit-appearance:none; appearance:none;
}
.zz__seal::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, #bc4436, #8d2a20 58%, #a63428);
  -webkit-mask-image:var(--seal); mask-image:var(--seal);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  filter: drop-shadow(0 1px 1px rgba(96,32,20,.35));
}
/* 印边：朱线一框，才像钤上去的一方印 */
.zz__seal::before{
  content:''; position:absolute; inset:-5% -9%;
  border:1.5px solid rgba(166,52,40,.48);
  border-radius:2px;
  opacity:0; transition:opacity .6s ease .16s;
}
.zz[data-state="landed"] .zz__seal,
.zz[data-state="inset"] .zz__seal{
  opacity:1; pointer-events:auto;
  transform:scale(1) rotate(0deg);
}
.zz[data-state="landed"] .zz__seal::before,
.zz[data-state="inset"] .zz__seal::before{ opacity:.9; }
.zz__seal:hover{ filter:brightness(1.08); }
.zz__seal:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }

/* ─────────── 后记（纸心）：六字散尽，空处落字 ───────────
   落在纸心：六字绕成的那一圈，圈里本就是空的；六字合璧之后，
   这四句正该落在这块空处。两栏，自右而左，一个字一个字地长。
   圆心由脚本写入 --ring-y，与珠结之处同一个点，换窗口也不会各走各的。 */
.zz__epi{
  position:absolute; left:50%; top:var(--ring-y, 41.5%);
  transform:translate(-50%,-50%);
  display:flex; flex-direction:row-reverse; align-items:flex-end;
  gap:calc(var(--su) * 1.5);
}
.zz__epi-col{
  margin:0;
  writing-mode:vertical-rl;
  font-family:var(--f-brush); font-weight:400;
  /* 字号由「圈里的空处」定：两栏十字须稳稳落在六字围出的那一圈里，
     不得碰到上下那两枚的字名——它们的批注正朝着纸心。 */
  font-size:calc(var(--su) * 3.0);
  letter-spacing:.08em; line-height:1.02;
  color:rgba(40,31,22,.90);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.zz__epi-col span{
  display:inline-block;
  opacity:0;
  transform:translateY(-.42em) scale(.94);
}
.zz__epi.is-grown .zz__epi-col span{
  opacity:1; transform:none;
  transition:opacity .58s ease, transform .58s cubic-bezier(.2,.9,.3,1);
}
.zz__epi-label{
  margin:0; align-self:flex-end;
  writing-mode:vertical-rl;
  font-family:var(--f-serif);
  font-size:calc(var(--su) * 1.32);
  letter-spacing:.34em; color:rgba(166,52,40,.78);
  opacity:0; transition:opacity .8s ease;
}
.zz__epi.is-grown .zz__epi-label{ opacity:1; }

/* ─────────── 纸脚的几句话 ─────────── */
.zz__hint{
  position:absolute; left:50%; bottom:7.4%;
  transform:translateX(-50%);
  margin:0; white-space:nowrap;
  font-family:var(--f-brush);
  font-size:calc(var(--su) * 1.75);
  letter-spacing:.42em; text-indent:.42em;
  color:rgba(148,56,32,.62);
  transition:opacity .8s ease;
  pointer-events:none;
  text-shadow:0 0 1px rgba(255,250,235,.8), 0 1px 10px rgba(120,70,40,.16);
}
.zz__hint.is-gone{ opacity:0; }
/* 轻触未起：摇一下这句提示，读者便知道该长按 */
.zz__hint.is-nudge{ animation:zzNudge 1.5s ease; }
@keyframes zzNudge{
  0%,100%{ transform:translateX(-50%); }
  12%    { transform:translateX(calc(-50% - 4px)) rotate(-.7deg); }
  32%    { transform:translateX(calc(-50% + 4px)) rotate(.7deg); }
  54%    { transform:translateX(calc(-50% - 3px)); }
  76%    { transform:translateX(calc(-50% + 2px)); }
}
/* 揉合期：这条提示不与后记争位，自纸脚收起 */
.zz[data-state="gather"] .zz__hint,
.zz[data-state="bead"] .zz__hint,
.zz[data-state="fly"] .zz__hint{ opacity:0; }
/* 掌珠一卷自己会说话，通用那条提示让开（与形骨、合音同一规矩） */
.stage.is-zhangzhu .hint{ opacity:0; }

.zz__foot{
  position:absolute; left:50%; bottom:3.0%;
  transform:translateX(-50%);
  max-width:62%; margin:0; text-align:center;
  font-family:var(--f-serif);
  font-size:calc(var(--su) * 1.02); line-height:1.7;
  letter-spacing:.04em; color:rgba(138,122,102,.92);
}

/* ─────────── 余烬墨星：钤印溅开的那几点 ───────────
   十几枚 span 走 CSS 动画，只动明暗——不占画布、不占帧。
   座标是方框百分比，随窗口自己缩放。 */
.zz__ash{ position:absolute; inset:0; pointer-events:none; }
.zz__ash span{
  position:absolute; display:block; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(52,38,20,.95), rgba(52,38,20,0) 72%);
  opacity:0;
}
.zz[data-state="landed"] .zz__ash span,
.zz[data-state="inset"] .zz__ash span{
  animation:zzAsh var(--d,9s) ease-in-out var(--dl,0s) infinite;
}
@keyframes zzAsh{
  0%,100%{ opacity:0; }
  46%,62%{ opacity:var(--a,.1); }
}

/* ─────────── 押角章：纸心左下那方闲章 ───────────
   右上那枚是书名印（自封面题名裁出），这方是今人的闲章：「六文合璧」。
   印是朱文——红字红框、纸色为底，故不与右上那枚相混。落定时才钤上，
   只作对角相照、压住纸角，不是控件（要抽夹页请点右上那枚）。 */
.zz__corner{
  position:absolute; left:var(--corner-x,12.5%); top:var(--corner-y,82.5%);
  width:calc(var(--su) * 7.2); aspect-ratio:1 / 1;
  transform:translate(-50%,-50%) rotate(-1.6deg) scale(1.25);
  display:grid; grid-template-columns:1fr 1fr; place-items:center;
  padding:calc(var(--su) * .7);
  border:2px solid rgba(166,52,40,.66);
  color:rgba(166,52,40,.80);
  font-family:var(--f-brush);
  font-size:calc(var(--su) * 2.05); line-height:1;
  text-shadow:0 1px 0 rgba(255,250,235,.5);
  opacity:0; pointer-events:none;
  transition:opacity .8s ease 1.15s, transform 1s cubic-bezier(.18,1.5,.42,1) 1.15s;
}
.zz[data-state="landed"] .zz__corner,
.zz[data-state="inset"] .zz__corner{
  opacity:.92; transform:translate(-50%,-50%) rotate(-1.6deg) scale(1);
}

/* ─────────── 落款：闲章右边那一行小字 ───────────
   款在右上、印在左下，配成一套。字号与色都比后记轻，只说明来处。 */
.zz__post{
  position:absolute; left:var(--post-x,24%); top:var(--post-y,73.5%);
  display:flex; flex-direction:row-reverse; align-items:flex-start;
  gap:calc(var(--su) * 1.2);
  opacity:0; pointer-events:none;
  transition:opacity 1s ease 1.3s;
}
.zz__post p{
  margin:0;
  writing-mode:vertical-rl;
  font-family:var(--f-brush);
  font-size:calc(var(--su) * 1.42); line-height:1.06;
  letter-spacing:.06em;
  color:rgba(74,60,44,.78);
  text-shadow:0 1px 0 rgba(255,252,240,.45);
}
.zz[data-state="landed"] .zz__post,
.zz[data-state="inset"] .zz__post{ opacity:1; }

/* ─────────── 夹页：自书中抽出的一叶 ───────────
   不用弹窗。纸叶自右侧被抽出来，底下的书页随之退后压暗；
   收起时按原路插回。全程没有关闭键。 */
.zz__inset{
  position:absolute; inset:0; z-index:6;
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .46s ease, visibility .46s;
}
.zz[data-state="inset"] .zz__inset{ opacity:1; visibility:visible; }
.zz__veil{
  position:absolute; inset:0;
  background:radial-gradient(130% 96% at 50% 48%, rgba(58,42,22,.10), rgba(34,24,12,.36));
  opacity:0; transition:opacity .46s ease;
}
.zz[data-state="inset"] .zz__veil{ opacity:1; }

.zz__slip{
  position:relative;
  width:87%; height:82%;
  padding:3.2% 3.4%;
  display:grid; grid-template-columns:37% 1fr; gap:3.4%;
  background:
    radial-gradient(120% 80% at 30% 6%, rgba(255,253,246,.86), transparent 66%),
    linear-gradient(180deg, #f6efdb, #efe4c9 64%, #e6d9ba),
    url('../assets/paper-tile.png');
  background-size:auto, auto, 320px;
  background-blend-mode:normal, normal, multiply;
  border-radius:2px;
  box-shadow:
    0 30px 66px rgba(28,18,8,.46),
    0 2px 0 rgba(255,244,214,.5) inset,
    0 0 0 1px rgba(150,120,80,.28) inset,
    0 0 70px rgba(120,90,50,.16) inset;
  opacity:0;
  transform:translateX(22%) scale(.94) rotate(-1.8deg);
  transition:transform .64s cubic-bezier(.22,.78,.24,1), opacity .44s ease;
}
.zz[data-state="inset"] .zz__slip{ opacity:1; transform:none; }

.zz__left{
  display:flex; flex-direction:column; min-width:0;
  gap:calc(var(--su) * 2.6);
}
.zz__photo{ margin:0; display:flex; flex-direction:column; gap:.55em; }
.zz__photo img{
  width:100%; height:auto;
  filter:sepia(.22) saturate(.9) contrast(1.03) brightness(1.01);
  box-shadow:0 3px 12px rgba(58,38,16,.30), 0 0 0 1px rgba(120,96,60,.35);
}
.zz__cap{
  font-size:calc(var(--su) * 1.06); line-height:1.6;
  letter-spacing:.04em; color:var(--ink-3);
}
.zz__body{ position:relative; min-width:0; }

/* 六体小谱：夹页上留一份六字的名目与字形 */
.zz__legend-title{
  margin:0 0 .55em; font-family:var(--f-serif);
  font-size:calc(var(--su) * 1.1); letter-spacing:.26em;
  color:rgba(138,122,102,.95);
}
.zz__legend-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--su) * 1.5) calc(var(--su) * 1.0);
  justify-items:center;
}
.zz__lg{ display:flex; flex-direction:column; align-items:center; gap:.34em; }
.zz__lg i{
  /* 小谱上的字只需认得出来，故定高不定宽——让它撑满格子会压过正文 */
  display:block; height:calc(var(--su) * 4.6); width:auto; aspect-ratio:1 / 1;
  background:linear-gradient(158deg, #4c3c28, #241c12 52%, #3a2c1c);
  -webkit-mask-image:var(--mask); mask-image:var(--mask);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  filter:drop-shadow(0 1px 1px rgba(58,42,20,.28));
}
.zz__lg b{
  font-weight:400; font-size:calc(var(--su) * 1.0);
  letter-spacing:.02em; color:rgba(93,81,66,.88); white-space:nowrap;
}

.zz__slip-title{
  margin:0 0 .5em; font-family:var(--f-brush); font-weight:400;
  font-size:calc(var(--su) * 2.85); line-height:1.1;
  letter-spacing:.1em; color:#2a2118;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.zz__slip-cols p{
  margin:0 0 .58em;
  font-size:calc(var(--su) * 1.42); line-height:1.86;
  letter-spacing:.02em; text-align:justify;
  color:rgba(43,35,24,.88);
}
.zz__slip-src{
  margin:.5em 0 0; padding-top:.5em;
  border-top:1px solid rgba(150,120,80,.28);
  font-size:calc(var(--su) * 1.02); line-height:1.7;
  color:var(--ink-3);
}
/* 帖尾印：夹页左下再钤一枚书名印，与右上那一枚相照 */
.zz__slip-seal{
  position:absolute; right:3.6%; bottom:2.6%;
  height:15%; width:auto; aspect-ratio:246 / 600;
  opacity:.72;
}
.zz__slip-seal::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, #bc4436, #8d2a20 58%, #a63428);
  -webkit-mask-image:var(--seal); mask-image:var(--seal);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* 窄屏（直幅）：纸心方框随之收窄，字与批注都小一档，墨粒跟着稀 */
@media (max-aspect-ratio: 1 / 1){
  .zz__epi-col{ font-size:calc(var(--su) * 2.0); }
  .zz__slip{ width:92%; height:88%; grid-template-columns:31% 1fr; gap:2.8%; }
  .zz__slip-cols p{ font-size:calc(var(--su) * 1.24); line-height:1.82; }
}

/* 动效敏感者：不逐字生长、不浮起，直接给结果 */
@media (prefers-reduced-motion: reduce){
  .zz__gl,.zz__seal,.zz__slip,.zz__epi-col span{ transition-duration:.001s !important; }
  .zz__epi-col span{ transform:none; }
  /* 余烬与那点金光不闪，直接给一个静的亮度 */
  .zz[data-state="landed"] .zz__ash span,
  .zz[data-state="inset"] .zz__ash span{ animation:none !important; opacity:var(--a,.1); }
  .zz__au{ animation:none !important; }
}