/* 标题微光闪动 —— 像快要熄灭的光 */
@keyframes flicker {
  0%, 100%   { text-shadow: 0 0 24px var(--glow); opacity: 1; }
  42%        { text-shadow: 0 0 12px var(--glow); opacity: 0.92; }
  43%        { text-shadow: 0 0 4px var(--glow);  opacity: 0.6; }
  44%        { text-shadow: 0 0 20px var(--glow); opacity: 0.95; }
  70%        { text-shadow: 0 0 28px var(--glow); opacity: 1; }
  71%        { text-shadow: 0 0 6px var(--glow);  opacity: 0.7; }
  72%        { text-shadow: 0 0 22px var(--glow); opacity: 1; }
}

/* 提示文字呼吸 */
@keyframes breathe {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.7; }
}

/* 终幕:整页缓缓熄灭 */
@keyframes fade-to-black {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* 灰烬飘落(装饰) */
@keyframes ash-fall {
  0%   { transform: translateY(-10vh) translateX(0);      opacity: 0; }
  10%  { opacity: 0.5; }
  100% { transform: translateY(110vh) translateX(30px);   opacity: 0; }
}

.ash {
  position: fixed;
  top: -10vh;
  width: 2px;
  height: 2px;
  background: rgba(200,180,140,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 998;
  animation: ash-fall linear infinite;
}

/* 最终幕整页熄灭 */
body.extinguish #vignette {
  animation: fade-to-black 6s ease forwards;
}
body.extinguish #story,
body.extinguish #intro {
  animation: fade-to-black 6s ease forwards;
}
body.extinguish .endline {
  opacity: 1 !important;
  animation: none;
}

/* 尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .title, .hint, .ash { animation: none !important; }
  .act p { transition: none; opacity: 1; transform: none; }
}


/* ---------- 旁白逐字蹦入 ---------- */
@keyframes char-drop {
  0%   { opacity: 0; transform: translateY(22px) scale(0.9); }
  68%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ---------- 旁白逐字消散 ---------- */
@keyframes char-dissolve {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.94); filter: blur(2px); }
}