/* ================================================================
   考试急 PWA — Animations v4.0 「排版 Editorial」
   ----------------------------------------------------------------
   本方案的动效语言只有四类（全部围绕"纸面排版"的物理直觉）：

   ① 揭示 Reveal  — clip-path 从一侧掀开（像翻页/擦拭）
   ② 生长 Grow    — scaleX 从一侧展开（像画线）
   ③ 扫过 Sweep   — 填充从左扫到右（像刷色）  → 定义在 components.css 的按钮/上传区
   ④ 位移 Slide   — translateY/X 小幅位移（像纸张轻推）

   时长规范：200ms(微反馈) / 320ms(常规) / 460ms(块级) / 620ms(大揭示)
   一律尊重 prefers-reduced-motion（已在 design-tokens.css 全局处理）
   ================================================================ */

/* ================================================================
   ① 揭示 Reveal — clip-path 上/右侧掀开
   ================================================================ */

@keyframes revealUp {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(10px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
}

@keyframes revealRight {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes revealDown {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 通用揭示类 —— 由 JS 添加 .rv 触发，或页面渲染后自动播放 */
.rv {
  animation: revealUp var(--duration-slow) var(--ease-default) both;
}
/* 逐块级联（最多支持 8 块，间隔 50ms） */
.rv:nth-child(1) { animation-delay: 0ms; }
.rv:nth-child(2) { animation-delay: 50ms; }
.rv:nth-child(3) { animation-delay: 100ms; }
.rv:nth-child(4) { animation-delay: 150ms; }
.rv:nth-child(5) { animation-delay: 200ms; }
.rv:nth-child(6) { animation-delay: 250ms; }
.rv:nth-child(7) { animation-delay: 300ms; }
.rv:nth-child(8) { animation-delay: 350ms; }

/* ----------------------------------------------------------------
   无遮罩揭示 —— 专供「字形会溢出行盒」的元素
   ----------------------------------------------------------------
   revealUp 的终态是 clip-path: inset(0)，等效于按 border-box 裁切。
   成绩页那个 92px 衬线大数字用了 line-height: 0.84（大字号紧排的常见手法），
   行盒只有 92 × 0.84 ≈ 77px，而衬线数字的字形约需 108px，下缘会溢出行盒
   约 15px —— 被这个常驻的 clip-path 一刀切掉，看到的就是"数字下面少了一截"。
   这类元素改用不带遮罩的揭示（位移 + 淡入）。
   ---------------------------------------------------------------- */
@keyframes revealUpSoft {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-masthead.rv {
  animation-name: revealUpSoft;
}

/* ================================================================
   ② 生长 Grow — scaleX 从左侧展开
   ================================================================ */

@keyframes growLineX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.grow-x {
  transform-origin: left center;
  animation: growLineX var(--duration-reveal) var(--ease-default) both;
}

/* ================================================================
   ④ 位移 Slide
   ================================================================ */

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

@keyframes slideRightIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

/* ================================================================
   页面切换 — 内容逐块揭示（替代整页转场）
   #app 本身只做淡出，新内容由 .rv 逐块揭示
   ================================================================ */

#app {
  transition: opacity var(--duration-fast) var(--ease-accelerate);
}
#app.fade-out { opacity: 0; }

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

/* 答题卡片：右侧滑入 */
.quiz-card-wrap {
  animation: revealRight var(--duration-normal) var(--ease-default);
}

/* 答案揭晓：向下展开 */
.answer-reveal {
  animation: revealDown var(--duration-slow) var(--ease-default);
}

/* 答题卡：向下展开 */
.answer-sheet {
  animation: revealDown var(--duration-normal) var(--ease-default);
}

/* 回顾精讲区块：上移揭示 + 级联 */
.review-detail-section {
  animation: revealUp var(--duration-slow) var(--ease-default) both;
}
.review-detail-section:nth-child(1) { animation-delay: 0ms; }
.review-detail-section:nth-child(2) { animation-delay: 60ms; }
.review-detail-section:nth-child(3) { animation-delay: 120ms; }
.review-detail-section:nth-child(4) { animation-delay: 180ms; }
.review-detail-section:nth-child(5) { animation-delay: 240ms; }

/* 里程碑（首次分析完成）— 数字用衬线 + 从下方推入 */
.milestone-icon {
  animation: revealUp var(--duration-slow) var(--ease-default) both;
}
.milestone-stat {
  animation: slideUpIn var(--duration-slow) var(--ease-default) both;
}
.milestone-stat:nth-child(1) { animation-delay: 120ms; }
.milestone-stat:nth-child(2) { animation-delay: 180ms; }
.milestone-stat:nth-child(3) { animation-delay: 240ms; }

/* 答题正确：选项竖条生长（配合 components.css 的竖条） */
.option-item.correct::before {
  animation: growLineY var(--duration-normal) var(--ease-default);
}
@keyframes growLineY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* 结果环：轻微放大落定 */
.result-ring {
  animation: ringSettle var(--duration-reveal) var(--ease-default);
}
@keyframes ringSettle {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* 列表行入场（资料列表、知识点列表） */
.entry-row {
  animation: slideRightIn var(--duration-normal) var(--ease-default) both;
}
.entry-row:nth-child(1) { animation-delay: 0ms; }
.entry-row:nth-child(2) { animation-delay: 45ms; }
.entry-row:nth-child(3) { animation-delay: 90ms; }
.entry-row:nth-child(4) { animation-delay: 135ms; }
.entry-row:nth-child(5) { animation-delay: 180ms; }

/* ================================================================
   降级 — 系统偏好"减少动效"时，只保留透明度变化
   （design-tokens.css 已做全局兜底，此处对特定场景收敛）
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .rv,
  .quiz-card-wrap,
  .answer-reveal,
  .answer-sheet,
  .review-detail-section,
  .milestone-icon,
  .milestone-stat,
  .entry-row,
  .result-ring,
  .grow-x {
    animation: fadeIn 1ms linear both !important;
  }
}