/* === 老天奶有话说 — 动画系统 === */

/* — 基础 — */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in     { animation: fadeInUp 1s ease both; }
.delay-1     { animation-delay: 0.3s; }
.delay-2     { animation-delay: 0.6s; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes cursorSlow {
  0%, 100% { caret-color: var(--accent-gold); }
  50%      { caret-color: rgba(183,157,116,0.3); }
}

/* — Step 1 卡片呼吸 — */
@keyframes cardBreathe {
  0%, 100% { box-shadow: 0 2px 24px rgba(47,62,52,0.04), inset 0 1px 0 rgba(255,255,255,0.5); }
  50%      { box-shadow: 0 2px 28px rgba(47,62,52,0.06), inset 0 1px 0 rgba(255,255,255,0.6); }
}
.wish-card { animation: cardBreathe 5s ease-in-out infinite; }

/* — Step 2 八卦旋转 — */
@keyframes baguaSpin {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(95deg); }
  60%  { transform: rotate(100deg); }
  100% { transform: rotate(105deg); }
}

@keyframes baguaSpinSlow {
  0%   { transform: rotate(105deg); }
  30%  { transform: rotate(180deg); }
  50%  { transform: rotate(182deg); }
  70%  { transform: rotate(260deg); }
  100% { transform: rotate(265deg); }
}

.bagua-orbit.spinning {
  animation: baguaSpin 4s cubic-bezier(0.4, 0, 0.6, 1) forwards,
             baguaSpinSlow 10s cubic-bezier(0.45, 0, 0.55, 1) 4s infinite;
}

/* 八卦呼吸明暗 */
@keyframes baguaGlow {
  0%, 100% { opacity: 0.6; filter: brightness(1); }
  40%      { opacity: 1; filter: brightness(1.2); }
  60%      { opacity: 0.85; filter: brightness(1.05); }
}
.bagua-orbit.spinning .bagua-svg {
  animation: baguaGlow 4s ease-in-out infinite;
}

/* — 水滴 — */
@keyframes dropForm {
  0%   { transform: translateX(-50%) scale(0); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1); opacity: 0.8; }
  80%  { transform: translateX(-50%) scale(1.1); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
}

@keyframes dropFall {
  0%   { top: -20px; opacity: 0.85; transform: translateX(-50%) scale(1); }
  20%  { top: 38%; opacity: 0.9; transform: translateX(-50%) scale(0.9); }
  60%  { top: 50%; opacity: 1; transform: translateX(-50%) scale(0.7); }
  100% { top: 50%; opacity: 0; transform: translateX(-50%) scale(0); }
}

.water-drop.forming {
  animation: dropForm 3s ease-out forwards;
}
.water-drop.falling {
  animation: dropFall 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* — 涟漪 — */
@keyframes rippleOut {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.ripple-dot.active {
  animation: rippleOut 2.5s ease-out forwards;
}

/* — 粒子 — */
@keyframes particleFloat {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.4; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

.mist-particle.active {
  animation: particleFloat var(--dur) ease-out forwards;
  animation-delay: var(--delay);
}

/* — 雾霭漂移 — */
@keyframes mistDrift {
  0%   { transform: scale(1) translate(0, 0); opacity: 0.6; }
  50%  { transform: scale(1.05) translate(2px, -4px); opacity: 0.8; }
  100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
}
.ritual-mist.active {
  animation: mistDrift 8s ease-in-out infinite;
}

/* — 文字淡入 — */
.ritual-line-1.visible { opacity: 1; transition: opacity 1.8s ease; }
.ritual-line-2.visible { opacity: 1; transition: opacity 1.8s ease 1.2s; }
.ritual-line-3.visible { opacity: 1; transition: opacity 2.4s ease; }

/* — 墨迹扩散 — */
@keyframes inkSpread {
  0%   { clip-path: circle(0% at 50% 50%); opacity: 0; }
  100% { clip-path: circle(100% at 50% 50%); opacity: 1; }
}
.ink-reveal { animation: inkSpread 1s ease-out both; }

/* — 时辰低语 — */
.time-whisper.visible { opacity: 1; transition: opacity 1.5s ease 1s; }

/* — Step 5 段落出入 — */
@keyframes paraIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.typing-paragraph { animation: paraIn 0.5s ease both; margin-bottom: 18px; }