/* ============================================================
 * anim.css — 全部动效
 * 拟真翻页 · 层级缩放 · 橡皮筋 · 墨点/心跳/流光/印章 关键帧
 * ============================================================ */

/* ================= 拟真翻页 ================= */
.flip-leaf {
  transform-style: preserve-3d;
  transform-origin: left center;
  z-index: 10;
  will-change: transform;
}
.flip-leaf.animating {
  transition: transform .74s cubic-bezier(.4, .04, .24, 1);
}
.leaf-front, .leaf-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px;
}
.leaf-front { z-index: 2; }
.flip-leaf .page {
  position: absolute;
  inset: 0;
  top: 0; bottom: 0; left: 0; right: 0;
}
.leaf-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right, rgba(30, 22, 8, .30), rgba(30, 22, 8, .06) 46%, transparent 72%);
  opacity: 0;
  transition: opacity .74s ease;
  border-radius: 3px;
}
.flip-leaf.animating .leaf-shade { transition: opacity .74s ease; }

/* 纸背 */
.leaf-back {
  transform: rotateY(180deg);
  background: var(--paper-deep);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .5), transparent 50%),
    repeating-linear-gradient(88deg, transparent 0 26px, rgba(120, 105, 80, .035) 26px 27px),
    repeating-linear-gradient(-2deg, transparent 0 30px, rgba(120, 105, 80, .028) 30px 31px);
  border: 1px solid var(--ink-25);
  box-shadow: inset 0 0 40px rgba(120, 100, 60, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaf-back-mark {
  font-size: 64px;
  color: rgba(43, 43, 43, .06);
  transform: rotate(-8deg);
  letter-spacing: 0;
  user-select: none;
}

/* ================= 层级缩放(日/周/月) ================= */
.layer.zoom-active,
.layer.zoom-to-in,
.layer.zoom-to-out {
  transition: transform .52s cubic-bezier(.22, .9, .3, 1), opacity .5s ease;
}
.layer.zoom-from-out { transform: scale(1.13); opacity: 0; }
.layer.zoom-from-in { transform: scale(.87); opacity: 0; }
.layer.zoom-to-in { transform: scale(.87); opacity: 0; pointer-events: none; }
.layer.zoom-to-out { transform: scale(1.13); opacity: 0; pointer-events: none; }

/* ================= 橡皮筋(到达日期边界) ================= */
.page.rubber-l { animation: rubberL .45s cubic-bezier(.3, .8, .4, 1); }
.page.rubber-r { animation: rubberR .45s cubic-bezier(.3, .8, .4, 1); }
@keyframes rubberL {
  30% { transform: translateX(-24px); }
  100% { transform: translateX(0); }
}
@keyframes rubberR {
  30% { transform: translateX(24px); }
  100% { transform: translateX(0); }
}

/* ================= 关键帧 ================= */

/* 勾选墨点绽放 */
.ink-pop {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  animation: inkPop .6s ease-out both;
  pointer-events: none;
}
@keyframes inkPop {
  from { transform: scale(.6); opacity: .8; }
  to { transform: scale(1.7); opacity: 0; }
}

/* 点赞心跳 */
@keyframes heartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  60% { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* 赠语复制闪色 */
@keyframes blessCopied {
  0% { color: var(--cinnabar); }
  100% { color: var(--ink); }
}

/* 未完成警报呼吸 */
@keyframes alarmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 164, 11, .35); }
  50% { box-shadow: 0 0 0 5px rgba(217, 164, 11, 0); }
}

/* 流光扫过(免除) */
@keyframes flowLight {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

/* 彩虹划线流动 */
@keyframes rainbowSlide {
  from { background-position: 0% 0; }
  to { background-position: 300% 0; }
}

/* 印章落下 */
@keyframes stampIn {
  0% { transform: rotate(-5deg) scale(1.9); opacity: 0; }
  55% { transform: rotate(-5deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-5deg) scale(1); opacity: 1; }
}

/* 卡片浮入 */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* 条形生长 */
@keyframes barIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 转盘彩屑 */
@keyframes confettiFly {
  0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot));
    opacity: 0;
  }
}

/* ================= 减弱动态 ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}