/* animation.css — 全站动画（漂浮、旋转、渐入渐出、进度切换）
   还原 PPT 交互说明：彩带/图案上下漂浮、渐隐到下一页、图案 360°旋转。 */

/* —— 360° 旋转（音乐盘 / 装饰图案） —— */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* —— 上下漂浮（彩带/图案小幅） —— */
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* 漂浮 + 渐隐交替（开屏彩带"上下漂浮再消失"） */
@keyframes floatFade {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  45% {
    opacity: 1;
    transform: translateY(-10px);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* —— 缩放淡入（题目页：底图>题目>选项渐出） —— */
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* —— 上滑淡入 —— */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* —— 进度点选中弹一下 —— */
@keyframes dotPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/* —— 结果页入场（长图自下而上铺开） —— */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 工具类 */
.spin {
  animation: spin 16s linear infinite;
}
.spin-fast {
  animation: spin 8s linear infinite;
}
.float {
  animation: floatY 3.2s ease-in-out infinite;
}
.float-slow {
  animation: floatY 4.8s ease-in-out infinite;
}

/* 选项入场：逐个延迟 */
.opt-enter {
  opacity: 0;
  animation: slideUp 0.45s ease forwards;
}

/* 进度点动画 */
.dot.is-current {
  animation: dotPulse 0.4s ease;
}

/* 尊重用户减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* 音乐旋转是播放状态反馈：真实播放时保留，其他动效仍按系统偏好减弱。 */
  .music-toggle.is-playing .music-icon {
    animation: musicSpin 6s linear infinite !important;
  }
  .music-toggle.is-muted .music-icon {
    animation: none !important;
  }
}