/* ===========================================================
   transition.css · 云雾扩散 + 橡皮擦擦除
   =========================================================== */

/* 封面橡皮擦动画：clip-path 圆形从 0% 生长到 150%，覆盖整张 */
.view-cover.is-erasing {
  animation: coverErase 1100ms cubic-bezier(.55, 0, .35, 1) forwards;
}
@keyframes coverErase {
  0%   { clip-path: circle(0%   at 50% 55%); opacity: 1; }
  60%  { opacity: 1; }
  100% { clip-path: circle(150% at 50% 55%); opacity: 0; }
}
.view-cover.is-hidden-after-erase {
  visibility: hidden;
  pointer-events: none;
}

/* 保留旧的 eraser SVG（兼容 fallback），但默认隐藏 */
.view-transition {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  display: none;
}
.view-transition.is-active {
  display: block;
}

.eraser {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- 按钮云雾粒子（由 JS 注入 .mist-particle） ---- */
.mist-particle {
  position: fixed;
  z-index: 250;
  pointer-events: none;
  background: rgba(255, 252, 240, 0.95);
  border-radius: 50%;
  filter: blur(2px);
  box-shadow:
    16px 6px 0 -4px rgba(255, 252, 240, 0.9),
    -14px 4px 0 -6px rgba(255, 252, 240, 0.85);
  opacity: 1;
  will-change: transform, opacity;
}
.mist-particle.p-tiny   { width: 18px; height: 14px; }
.mist-particle.p-small  { width: 26px; height: 18px; }
.mist-particle.p-medium { width: 36px; height: 22px; }
.mist-particle.p-large  { width: 48px; height: 28px; }

.mist-particle.is-fading {
  animation: mistDrift var(--dur, 1100ms) var(--ease) forwards;
}

@keyframes mistDrift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  60%  { opacity: 0.85; }
  100% {
    transform: translate(var(--dx, 0), var(--dy, -120px)) rotate(var(--rot, 24deg)) scale(var(--s, 1.4));
    opacity: 0;
  }
}