/* ============================================================
 * animations.css — 鼓励/反馈动画关键帧
 * ============================================================ */

/* 彩屑/星星粒子 */
.fx-particle {
  position: absolute; left: 50%; top: 40%;
  pointer-events: none; will-change: transform, opacity;
  animation: fx-fly 1.6s ease-out forwards;
}
.fx-confetti { border-radius: 3px; }
.fx-star { line-height: 1; }
@keyframes fx-fly {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(.4); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); opacity: 0; }
}

/* 鼓励气泡 */
.fx-praise {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%) scale(.4); opacity: 0;
  background: var(--c-accent, #ffd23f); color: #7a5b00;
  font-size: clamp(34px, 9vw, 68px); font-weight: 900;
  padding: 18px 40px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.2);
  pointer-events: none; white-space: nowrap;
}
.fx-praise.show { animation: praise-pop 1.5s ease forwards; }
.fx-praise.hide { animation: praise-out .4s ease forwards; }
@keyframes praise-pop {
  0% { transform: translate(-50%,-50%) scale(.4); opacity: 0; }
  25% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.05); opacity: 0; }
}
@keyframes praise-out { to { opacity: 0; transform: translate(-50%,-50%) scale(.9); } }

/* toast 小提示 */
.fx-toast {
  position: absolute; left: 50%; bottom: 12%;
  transform: translate(-50%, 20px); opacity: 0;
  background: rgba(58,46,63,.92); color: #fff;
  font-size: 26px; font-weight: 700; padding: 14px 26px; border-radius: 999px;
  pointer-events: none; transition: opacity .25s, transform .25s; max-width: 90vw; text-align:center;
}
.fx-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 错误轻摇 */
.shake { animation: shake .5s; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* 星星徽章弹跳 */
@keyframes badge-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.4) rotate(-6deg); }
  100% { transform: scale(1); }
}

/* 漂浮（跟读大图） */
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* 录音脉冲 */
@keyframes pulse-red {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,94,94,.6), var(--shadow); }
  50% { box-shadow: 0 0 0 18px rgba(255,94,94,0), var(--shadow); }
}

/* 详情/卡片入场 */
.pop-in { animation: pop-in .35s ease; }
@keyframes pop-in {
  0% { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 正确配对弹一下 */
.bounce-in { animation: bounce-in .45s ease; }
@keyframes bounce-in {
  0% { transform: scale(.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; }
}