/* ============================================================
 * animations.css  —  关键帧动画（60fps 友好，用 transform/opacity）
 * ============================================================ */

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes pop {
  0% { transform: scale(.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 怪物被击中：轻微抖动 */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-4deg); }
  40% { transform: translateX(7px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-2deg); }
  80% { transform: translateX(4px) rotate(1deg); }
  100% { transform: translateX(0); }
}
.monster-icon.shake { animation: shake .35s ease; }

/* 怪物被暴击：放大抖动 + 红色闪光 */
@keyframes crit {
  0% { transform: scale(1); filter: none; }
  30% { transform: scale(1.35) rotate(-8deg); filter: drop-shadow(0 0 18px #fb7185) brightness(1.4); }
  60% { transform: scale(.9) rotate(6deg); }
  100% { transform: scale(1); filter: none; }
}
.monster-icon.crit { animation: crit .5s ease; }

/* 玩家被反击：红闪 + 抖动 */
@keyframes hurt {
  0% { transform: translateX(0); filter: none; }
  25% { transform: translateX(-6px); filter: drop-shadow(0 0 12px #f87171) brightness(1.3); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); filter: none; }
}
.player-icon.hurt { animation: hurt .4s ease; }

/* 进入页面淡入 */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.app > * { animation: fadeUp .4s ease both; }
.app > *:nth-child(2) { animation-delay: .05s; }
.app > *:nth-child(3) { animation-delay: .1s; }

/* 按钮按下反馈 */
.btn-primary:active, .btn-ghost:active, .btn-small:active { transform: scale(.96); }

/* 进度条流动光效（装饰） */
.week-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%); animation: shimmer 2.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* 战斗场景背景微动 */
.battle { animation: fadeUp .35s ease both; }