/* =====================================================================
   动效：关键帧、错峰入场、视图过渡、reduced-motion
   ===================================================================== */

/* ================= 关键帧 ================= */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px) scale(.97); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes lotusBloom {
  0%, 100% { transform: scale(1)    rotate(0deg);   opacity: .82; }
  50%      { transform: scale(1.14) rotate(180deg); opacity: 1; }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes rippleOut {
  to { transform: scale(2.6); opacity: 0; }
}

/* 错峰入场 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 墨点晕开（答对） */
@keyframes inkSpread {
  0%   { transform: scale(.2); opacity: .55; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* 金光扩散（完成） */
@keyframes goldBurst {
  0%   { transform: scale(.4); opacity: .7; }
  70%  { opacity: .25; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* 卡片翻转 */
@keyframes flipIn {
  from { transform: rotateY(-90deg); opacity: 0; }
  to   { transform: rotateY(0);      opacity: 1; }
}

/* 笔画书写（用于标题装饰） */
@keyframes drawLine {
  from { stroke-dashoffset: var(--dash, 200); }
  to   { stroke-dashoffset: 0; }
}

/* 呼吸（深色下的微光） */
@keyframes breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ================= 错峰入场工具类 ================= */
.stagger > * {
  animation: riseIn var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* ================= 视图过渡 API ================= */
@view-transition { navigation: none; }

::view-transition-old(root) {
  animation: fadeOutUp 200ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: fadeInDown 320ms var(--ease-out) both;
}

@keyframes fadeOutUp {
  to { opacity: 0; transform: translateY(-8px); }
}

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

/* ================= 打印：关掉一切动效 ================= */
@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ================= 尊重系统偏好 + 用户开关 ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:root[data-motion='reduced'] *,
:root[data-motion='reduced'] *::before,
:root[data-motion='reduced'] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}