/* ============================================================================
   共享 viewer 载入揭幕 —— 与首页 PageTransition 同源的斜切纸面翻页
   由 scripts/sync-sites.js 复制到 public/shared/，各静态子站 index.html 以
   <link href="/shared/viewer/loader.css"> 引用；改此一处即全站生效。
   默认整张暖纸盖住屏幕（承载层停在 0）；首帧就绪后 JS 加 .revealed，
   承载层同方向右移揭幕（--ease-wipe 与首页一致）；纸面与页面同色，靠边缘
   投影与先行线读作「翻过一页纸」。JS 未跑起来时 2.6s 纯 CSS 兜底自动揭幕。
   ========================================================================== */
.pt-veil { position: fixed; inset: 0; z-index: 80; overflow: hidden; }
/* 纯 CSS 兜底路径：脚本挂起时兜底揭幕后释放指针拦截，避免无形 veil 永远挡住点击；
   正常路径由 JS 在揭幕完成后把节点移出 DOM */
.pt-veil:not(.revealed) { animation: ptVeilRelease 1ms linear 3400ms forwards; }
@keyframes ptVeilRelease { to { pointer-events: none; } }
.pt-carriage {
  --veil-overflow: calc(12vw + 11vh);
  --rule-lead: 7vw;
  --pt-travel: calc(100% + var(--veil-overflow) + var(--rule-lead) + 12vh);
  position: absolute; inset: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.pt-veil:not(.revealed) .pt-carriage {
  animation: ptAutoLift 620ms cubic-bezier(0.62, 0, 0.3, 1) 2600ms forwards;
}
.pt-veil.revealed .pt-carriage {
  transform: translate3d(var(--pt-travel), 0, 0);
  transition: transform 600ms cubic-bezier(0.62, 0, 0.3, 1);
}
@keyframes ptAutoLift { to { transform: translate3d(var(--pt-travel), 0, 0); } }
.pt-sheet {
  position: absolute; top: -20vh; bottom: -20vh;
  left: calc(-1 * var(--veil-overflow)); right: calc(-1 * var(--veil-overflow));
  background: #FAFAF8;
  transform: skewX(-12deg);
  box-shadow: 0 0 70px 24px rgba(26, 26, 26, 0.14);
}
.pt-rule {
  position: absolute; top: -20vh; bottom: -20vh;
  right: calc(-1 * (var(--veil-overflow) + var(--rule-lead)));
  width: 2px; background: rgba(26, 26, 26, 0.45); transform: skewX(-12deg);
}
.pt-rule-lead { right: auto; left: calc(-1 * (var(--veil-overflow) + var(--rule-lead))); }
.pt-rule::after { content: ""; position: absolute; top: 22%; left: 0; width: 2px; height: 88px; background: #B33A2A; }
.pt-mark {
  position: absolute; top: 50%; left: calc(var(--veil-overflow) + 6vw);
  transform: translateY(-50%); white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(26, 26, 26, 0.45);
}
.pt-loading {
  position: absolute; top: calc(50% + 20px); left: calc(var(--veil-overflow) + 6vw);
  display: flex; align-items: center; gap: 12px;
}
.pt-loading-track { position: relative; width: 180px; height: 1px; overflow: hidden; background: rgba(26, 26, 26, 0.12); }
.pt-loading-bar { position: absolute; top: 0; bottom: 0; left: -25%; width: 25%; background: #B33A2A; animation: ptLoad 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
@keyframes ptLoad { to { left: 100%; } }
.pt-loading-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(26, 26, 26, 0.4); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .pt-veil:not(.revealed) .pt-carriage { animation-duration: 1ms; }
  .pt-veil.revealed .pt-carriage { transition: none; }
  .pt-loading-bar { animation: none; left: 30%; }
}