/* ================================================================
   考试急 PWA — Animations v3.0
   GSAP 钩子类 + 残余 CSS 动画 (loading/skeleton/fade)
   原则：无弹性缓动，所有动画尊重 prefers-reduced-motion
   ================================================================ */

/* ================================================================
   GSAP 动画钩子类
   这些类在 GSAP 动画开始前被添加，结束后被移除
   用于确保无 JS 时内容仍然可见
   ================================================================ */

/* 初始状态：动画元素默认可见（无 JS 或 GSAP 失败时降级） */
.gsap-reveal {
  opacity: 1;
  transform: none;
}

/* 入场动画的初始隐藏状态（由 JS 设置后触发 GSAP） */
.gsap-entering {
  opacity: 0;
  transform: translateY(12px);
}

/* 页面切换 — fade 降级方案（GSAP 不可用时的 CSS fallback） */
#app {
  transition: opacity var(--duration-normal) var(--ease-default);
}

#app.fade-out {
  opacity: 0;
}

/* ================================================================
   通用关键帧动画
   仅保留必要的基础动画：淡入、滑入、旋转
   ================================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ================================================================
   页面特定动画
   ================================================================ */

/* 答题卡片入场 */
.quiz-card-wrap {
  animation: slideIn var(--duration-normal) var(--ease-decelerate);
}

/* 答案揭晓 */
.answer-reveal {
  animation: slideUp var(--duration-normal) var(--ease-decelerate);
}

/* 答题卡 */
.answer-sheet {
  animation: slideUp var(--duration-normal) var(--ease-decelerate);
}

/* 回顾精讲区块 */
.review-detail-section {
  animation: slideUp var(--duration-normal) var(--ease-decelerate);
}

/* Toast 入场 — 在 components.css 中定义 @keyframes toastIn */

/* ================================================================
   答题反馈粒子（纯 CSS，保留但简化）
   不使用 box-shadow 发光，仅用微型色块模拟粒子
   ================================================================ */

/* 正确答案微脉冲 */
.answer-reveal:not(.wrong-answer) {
  animation: slideUp var(--duration-normal) var(--ease-decelerate),
             correctPulse 0.6s var(--ease-decelerate) 0.15s;
}

@keyframes correctPulse {
  0%   { background: var(--ok-dim); }
  50%  { background: rgba(91, 158, 122, 0.20); }
  100% { background: var(--ok-dim); }
}

/* ================================================================
   Loading / Skeleton — 在 components.css 中定义
   此处仅保留全局引用
   ================================================================ */

/* ================================================================
   milestones — 缩放入场（GSAP 优先，CSS 作为 fallback）
   ================================================================ */

.milestone-icon {
  animation: scaleIn 0.5s var(--ease-emphasized);
}

.milestone-stat {
  animation: slideUp 0.3s var(--ease-decelerate) both;
}

.milestone-stat:nth-child(2) {
  animation-delay: 0.1s;
}

.milestone-stat:nth-child(3) {
  animation-delay: 0.2s;
}

/* ================================================================
   reduced-motion 覆盖 — 在 reset.css 中已有全局规则
   此处针对特定场景补充
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .quiz-card-wrap,
  .answer-reveal,
  .answer-sheet,
  .review-detail-section,
  .milestone-icon,
  .milestone-stat {
    animation: none;
  }
}