/* ============================================================
   ADHD Test 装饰动画 (transform/opacity only)
   - 仅 transform + opacity, 全程 GPU 合成
   - prefers-reduced-motion: 全部禁用
   - 移动端 (max-width: 800px): 粒子数减半, 呼吸幅度再降
   - 适用范围: index.html (hero/CTA 满档) + answer.html (入口分流, hover 增强) + quiz.html (仅入场, 答题区无循环)
   ============================================================ */

/* ---------- A1. 呼吸浮动 (hero 插画 + 背景极慢呼吸) ---------- */
@keyframes fm-breath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes fm-breath-bg {
  0%, 100% { opacity: 0.02; transform: scale(1); }
  50%      { opacity: 0.06; transform: scale(1.04); }
}
.hero-slot {
  animation: fm-breath 5s ease-in-out infinite;
  will-change: transform;
}
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(60% 50% at 50% 30%, rgba(46,196,160,0.55) 0%, rgba(46,196,160,0) 70%);
  pointer-events: none;
  animation: fm-breath-bg 8s ease-in-out infinite;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* ---------- A1b. 入口页极淡光晕 (answer.html 头部分流页) ---------- */
@keyframes fm-head-glow {
  0%, 100% { opacity: 0.025; transform: scale(1); }
  50%      { opacity: 0.07;  transform: scale(1.06); }
}
.head--glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.head--glow::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(55% 45% at 50% 0%, rgba(46,196,160,0.55) 0%, rgba(46,196,160,0) 70%);
  pointer-events: none;
  animation: fm-head-glow 7s ease-in-out infinite;
  z-index: -1;
}

/* ---------- A1c. 答题页极淡光晕 (quiz.html body 极弱呼吸) ---------- */
@keyframes fm-body-glow {
  0%, 100% { opacity: 0.015; }
  50%      { opacity: 0.04;  }
}
body.fm-quiz {
  position: relative;
  overflow-x: hidden;
}
body.fm-quiz::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(46,196,160,0.40) 0%, rgba(46,196,160,0) 70%);
  pointer-events: none;
  animation: fm-body-glow 9s ease-in-out infinite;
  z-index: 0;
}
body.fm-quiz > * { position: relative; z-index: 1; }

/* ---------- A2. 渐入 (scroll fade-in) ---------- */
.fm-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  will-change: opacity, transform;
}
.fm-fade.is-in {
  opacity: 1;
  transform: translateY(0);
}
.fm-fade.fm-fade--head { transition-duration: 0.45s; }

/* ---------- A4. 漂浮粒子 (floating dots, 仅 hero 范围) ---------- */
.fm-particle {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: rgba(46,196,160,0.18);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}
@keyframes fm-float-up {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--fm-dx, 0px), -180px, 0); opacity: 0; }
}

/* ---------- B5. CTA 微脉冲 (仅首页 hero 内的主按钮) ---------- */
@keyframes fm-pulse-cta {
  0%, 100% { transform: translateY(0) scale(1);    box-shadow: 0 2px 8px rgba(30,168,135,.18); }
  50%      { transform: translateY(0) scale(1.015); box-shadow: 0 6px 18px rgba(30,168,135,.30); }
}
.hero .btn-primary,
.cta-band .btn-primary {
  animation: fm-pulse-cta 2.5s ease-in-out infinite;
}
.hero .btn-primary:hover,
.cta-band .btn-primary:hover {
  animation-play-state: paused;
}

/* ---------- B7. 卡片悬停增强 (首页 + 入口页) ---------- */
.step, .receive, .choice {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
  will-change: transform;
}
.step:hover, .receive:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(34,48,58,.08), 0 20px 40px rgba(34,48,58,.12);
}
.choice:hover {
  /* 入口页 .choice:hover 已有 translateY(-2px) + box-shadow, 这里只追加柔和过渡, 不覆盖原值 */
  border-color: var(--brand-200);
  box-shadow: 0 4px 12px rgba(46,196,160,.12), 0 16px 40px rgba(34,48,58,.08);
}
.step .img-real, .receive .img-real {
  transition: transform 0.25s ease-out;
}
.step:hover .img-real, .receive:hover .img-real {
  transform: scale(1.02);
}

/* ---------- 移动端减量 ---------- */
@media (max-width: 800px) {
  .hero-slot { animation-duration: 6s; }
  .hero::before { animation-duration: 10s; }
  @keyframes fm-breath {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
  .hero .btn-primary,
  .cta-band .btn-primary { animation-duration: 3.2s; }
  .step:hover, .receive:hover { transform: translateY(-2px); }
  .step:hover .img-real, .receive:hover .img-real { transform: scale(1.01); }
  .head--glow::before { animation-duration: 9s; }
  body.fm-quiz::before { animation-duration: 11s; }
}

/* ============================================================
   答题页交互动画 (transform/opacity only, ≤0.3s, 一次性)
   - A1. 选项选中: ✓ 弹入 + 缩放回弹
   - A2. 翻页过渡: 旧页向左淡出 / 新页从右淡入
   - A3. 必答校验: 一次性轻抖 + 滚动到首末答
   - B1. 按钮 :active 压感
   - B2. 进度数字/条过渡增强
   - B3. 完成跳转: 整页淡出 + 完成态再跳转
   - C1. 选后下滑: scroll-margin-top / scrollIntoView
   ============================================================ */

/* ---------- A1. 选项选中 (scale + check 弹入) ---------- */
.choice .check {
  display: none;
  transform: scale(0.4);
  transform-origin: center;
}
.choice.is-on .check {
  display: inline-block;
  animation: fm-check-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes fm-check-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
/* 选中按钮本体一次性回弹 (JS 触发) */
.choice.is-pick {
  animation: fm-choice-pick 0.18s ease-out 1;
}
@keyframes fm-choice-pick {
  0%   { transform: scale(1);    }
  45%  { transform: scale(1.04); }
  100% { transform: scale(1);    }
}

/* ---------- A2. 翻页过渡 (JS 切换 .page-leave / .page-enter) ---------- */
@keyframes fm-page-leave {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-18px); }
}
@keyframes fm-page-enter {
  0%   { opacity: 0; transform: translateX(18px); }
  100% { opacity: 1; transform: translateX(0); }
}
#q-list.is-leaving > .q-card { animation: fm-page-leave 0.12s ease-out both; }
#q-list.is-entering > .q-card { animation: fm-page-enter 0.18s ease-out both; }

/* ---------- A3. 必答校验 - 一次性轻抖 ---------- */
@keyframes fm-shake-x {
  0%, 100% { transform: translateX(0);    }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px);  }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px);  }
}
.q-card.is-shake { animation: fm-shake-x 0.3s ease-out 1; }

/* ---------- B1. 按钮压感 (不含 .choice 自身) ---------- */
.btn:not(.choice):active,
.btn-primary:not(.choice):active,
.btn-ghost:active,
.btn-prev:not(:disabled):active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(34, 48, 58, 0.08) inset;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* ---------- B2. 进度数字/条过渡增强 (不循环) ---------- */
.quiz-pct {
  display: inline-block;
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.quiz-pct.is-bump {
  opacity: 0.4;
  transform: translateY(-3px);
}
.quiz-bar > i {
  transition: width 0.3s ease, background 0.3s ease;
  will-change: width;
}

/* ---------- B3. 完成跳转 - 整页淡出 + 完成态 ---------- */
#stage-quiz.is-finishing {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.quiz-done {
  display: none;
  text-align: center;
  padding: 56px 16px;
  color: var(--brand-700);
  font-weight: 800;
  font-size: 18px;
}
.quiz-done.is-on { display: block; animation: fm-page-enter 0.3s ease-out both; }
.quiz-done svg {
  display: block; margin: 0 auto 10px;
  width: 40px; height: 40px;
  color: var(--brand-600);
  animation: fm-choice-pick 0.3s ease-out 1;
}

/* ---------- C1. 选后下滑 - scroll-margin-top (避开顶部进度区) ---------- */
.q-card {
  scroll-margin-top: 140px;
}

/* ---------- 移动端减量 ---------- */
@media (max-width: 560px) {
  .q-card { scroll-margin-top: 120px; }
  #q-list.is-leaving > .q-card { animation-duration: 0.1s; }
  #q-list.is-entering > .q-card { animation-duration: 0.14s; }
  .q-card.is-shake { animation-duration: 0.25s; }
  .choice.is-pick { animation-duration: 0.15s; }
}

/* ---------- 无障碍: 关闭一切 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slot,
  .hero::before,
  .hero .btn-primary,
  .cta-band .btn-primary,
  .head--glow,
  .head--glow::before,
  body.fm-quiz,
  body.fm-quiz::before,
  .fm-particle,
  .fm-fade,
  .fm-fade.is-in,
  .step, .receive, .choice,
  .step .img-real, .receive .img-real,
  .choice .check,
  .choice.is-on .check,
  .choice.is-pick,
  #q-list.is-leaving > .q-card,
  #q-list.is-entering > .q-card,
  .q-card.is-shake,
  .quiz-pct,
  .quiz-pct.is-bump,
  .quiz-bar > i,
  #stage-quiz.is-finishing,
  .quiz-done,
  .quiz-done.is-on,
  .quiz-done svg {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .fm-fade { opacity: 1 !important; }
}