/* ========================================
   animations.css — 动画库
   粒子、脉冲、弹跳、发光效果
   ======================================== */

/* ---- 粒子飘浮 ---- */
@keyframes particle-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

/* ---- 图标弹跳 ---- */
@keyframes icon-bounce {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

/* ---- 勋章发光 ---- */
@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.8;
  }
}

/* ---- HP低血脉冲 ---- */
.progress-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  animation: hp-pulse 1s ease-in-out infinite;
}

@keyframes hp-pulse {
  0%, 100% {
    box-shadow: 0 0 4px var(--hp-low);
    opacity: 0.6;
  }
  50% {
    box-shadow: 0 0 12px var(--hp-low);
    opacity: 1;
  }
}

/* ---- 打卡卡片动画 ---- */
.habit-card {
  animation: card-in 0.3s ease-out;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---- 页面切换 ---- */
#page-container {
  animation: page-fade 0.15s ease-out;
}

@keyframes page-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- 成就解锁闪光 ---- */
.achievement-card.unlocked {
  animation: unlock-shine 1s ease-out;
}

@keyframes unlock-shine {
  0% {
    box-shadow: 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  100% {
    box-shadow: none;
  }
}

/* ---- 传说品质爆炸粒子 ---- */
.legendary_explosion::before,
.legendary_explosion::after {
  content: '🔥';
  animation: explode 1.5s ease-out infinite;
}

.legendary_explosion::before {
  top: 30%;
  left: 20%;
  animation-delay: 0.2s;
}

.legendary_explosion::after {
  bottom: 30%;
  right: 20%;
  animation-delay: 0.7s;
}

@keyframes explode {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  30% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(2) translateY(-30px);
    opacity: 0;
  }
}

/* ---- 特殊品质彩虹 ---- */
.special_rainbow::before {
  content: '✨';
  animation: rainbow-spin 3s linear infinite;
}

@keyframes rainbow-spin {
  0% {
    filter: hue-rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ---- Toast滑入 ---- */
.toast-notification {
  animation: none;  /* 由JS控制 */
}

/* ---- 日历格子悬停 ---- */
.cal-day:not(.empty):hover {
  background: rgba(79, 195, 247, 0.15) !important;
  transition: background var(--transition-fast);
}

/* ---- 减弱动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .progress-fill.animated {
    transition: none;
  }
}