/* =====================================================================
   动效：关键帧、错峰入场、视图过渡、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) * 55ms);
}

/* =====================================================================
   辞书体的四个核心动作
   ===================================================================== */

/* 1. 刻线画出来 —— 每次换页，页面标题上那条横线从左向右刻过去 */
@keyframes ruleIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 2. 词从线下升起 —— 天城体头字入场，先淡、再落定 */
@keyframes headRise {
  from { opacity: 0; transform: translateY(16px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* 3. 翻页 —— 复习卡沿中线转过来，不是整块淡入 */
@keyframes cardTurn {
  from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 4. 落印 —— 成就与完成页的朱砂印，带一点回弹 */
@keyframes sealPress {
  0%   { opacity: 0; transform: scale(1.6) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(.94) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* 墨在纸上洇开（评分反馈） */
@keyframes inkBloom {
  0%   { opacity: .5; transform: scale(.3); }
  100% { opacity: 0;  transform: scale(2.2); }
}

/* 数字滚动入位（统计数字） */
@keyframes tickUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* 细线在条目间生长（词库列表） */
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 入场编排：页面标题 → 正文 */
.view > .section-head { animation: none; }

.headword-anim {
  display: inline-block;
  animation: headRise 720ms var(--ease-out) 80ms both;
}

.seal-anim { animation: sealPress 520ms var(--ease-spring) both; }

.tick-anim { animation: tickUp 420ms var(--ease-out) both; }

/* ================= 视图过渡 =================
   不用 View Transition API —— 它和字体加载、视口变化会互相打断，
   这里用一条纯粹的入场编排替代：标题刻线先画，正文再升起来。 */
.view { position: relative; }

.view > * { animation: riseIn var(--dur) var(--ease-out) both; }
.view > *:nth-child(2) { animation-delay: 40ms; }
.view > *:nth-child(3) { animation-delay: 80ms; }
.view > *:nth-child(4) { animation-delay: 120ms; }
.view > *:nth-child(n + 5) { animation-delay: 150ms; }
.view.no-anim > * { animation: 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;
}