/* ============================================================
   ink-transition.css — 水墨扩散转场（精简版）
   仅含必要样式，animation-fill-mode: forwards 确保末帧定格
   ============================================================ */

/* ── Transition Layer ─────────────────────────────────── */
.cd-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}

.cd-transition-layer .bg-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-2%);
  height: 100%;
  width: 2500%;
  background: url('../pic/ink2.png') no-repeat 0 0; 
  background-size: 100% 100%;
}

/* ── Opening：水墨铺满（-2% → -98%）────────────────────── */
.cd-transition-layer.opening .bg-layer {
  animation: cd-sequence 0.8s steps(24) forwards;
}

/* ── Closing：水墨散开（-98% → -2%）───────────────────── */
.cd-transition-layer.closing .bg-layer {
  animation: cd-sequence-reverse 0.8s steps(24) forwards;
}

/* ── 动画序列 ──────────────────────────────────────────── */
@keyframes cd-sequence {
  0%   { transform: translateY(-50%) translateX(-2%); }
  100% { transform: translateY(-50%) translateX(-98%); }
}

@keyframes cd-sequence-reverse {
  0%   { transform: translateY(-50%) translateX(-98%); }
  100% { transform: translateY(-50%) translateX(-2%); }
}

/* ── Ink Veil：纯色黑层（跳转瞬间遮屏用）────────────────── */
.ink-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 遮住一切（包括 body 内容） */
.ink-veil.on {
  opacity: 1;
  visibility: visible;
}

.ink-veil.init-shutter {
  opacity: 1;
  visibility: visible;
  background: #1a1a1a;
  transition: opacity 0.4s ease-out; /* 增加平滑度 */
}