/* ==========================================================================
   animations.css - 動畫定義(打卡回饋、獎章解鎖、頁面切換)
   ========================================================================== */

/* === 淡入 === */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-fade-in { animation: fadeIn 0.3s ease-out; }

/* === 由下滑入(主畫面卡片) === */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-slide-up { animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* === 彈跳(打卡完成) === */
@keyframes pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.anim-pop { animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* === 點數增加(數字躍動) === */
@keyframes pointBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); color: var(--color-success); }
  100% { transform: scale(1); }
}
.anim-point-bump { animation: pointBump 0.5s ease-out; }

/* === 獎章解鎖(發光) === */
@keyframes medalGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(83, 74, 183, 0.5); }
  50%      { box-shadow: 0 0 0 12px rgba(83, 74, 183, 0); }
}
.anim-medal-glow { animation: medalGlow 1.4s ease-out 2; }

/* === 旋轉(載入中) === */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.anim-spin { animation: spin 0.8s linear infinite; }

/* === 抖動(錯誤回饋) === */
@keyframes shake {
  0%, 100%             { transform: translateX(0); }
  20%, 60%             { transform: translateX(-6px); }
  40%, 80%             { transform: translateX(6px); }
}
.anim-shake { animation: shake 0.4s; }

/* === 撒花粒子(後續以 JS 動態插入) === */
@keyframes confettiFall {
  0%   { transform: translateY(-100vh) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(100vh)  rotate(720deg); opacity: 0; }
}
.confetti-particle {
  position: fixed;
  top: 0;
  width: 10px;
  height: 10px;
  pointer-events: none;
  animation: confettiFall 1.6s ease-out forwards;
}

/* === 火焰呼吸(連勝指示) === */
@keyframes breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%       { transform: scale(1.2); filter: brightness(1.25); }
}
.anim-breathe { animation: breathe 2s ease-in-out infinite; display: inline-block; }

/* === 點數浮起(完成任務) === */
@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(-56px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.9); }
}
.anim-float-up { animation: floatUp 0.85s ease-out forwards; }

/* === 進度條光澤 === */
@keyframes shine {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.anim-shine {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shine 1.4s ease-in-out;
}

/* === 任務按壓(3D 回饋) === */
@keyframes taskPress {
  0%   { transform: scale(1)    translateY(0);  }
  45%  { transform: scale(0.95) translateY(3px); }
  100% { transform: scale(1)    translateY(0);  }
}
.anim-task-press { animation: taskPress 0.22s ease; }

/* === 獎章晃動 === */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-9deg); }
  75%       { transform: rotate(9deg); }
}
.anim-wiggle { animation: wiggle 0.5s ease-in-out 2; }

/* === 驚喜任務彈入 === */
@keyframes bounce {
  0%   { transform: translateY(-18px) scale(0.82); opacity: 0; }
  55%  { transform: translateY(5px)   scale(1.06); opacity: 1; }
  78%  { transform: translateY(-3px)  scale(0.97); }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}
.anim-bounce { animation: bounce 0.52s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* === 時段切換淡入 === */
@keyframes fadeMode {
  0%   { opacity: 0; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}
.anim-fade-mode { animation: fadeMode 0.45s ease-out; }

/* === 減少動畫(尊重使用者偏好) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}