/* ── Keyframes ──────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(196,145,92,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(196,145,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,145,92,0); }
}
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-8px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes meridian-flow {
  to { stroke-dashoffset: 0; }
}
@keyframes point-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(196,145,92,0.6)); }
  50%      { filter: drop-shadow(0 0 8px rgba(196,145,92,1)); }
}
@keyframes fire-flicker {
  0%,100% { transform: scaleY(1) scaleX(1) rotate(-2deg); }
  33%     { transform: scaleY(1.1) scaleX(0.95) rotate(1deg); }
  66%     { transform: scaleY(0.95) scaleX(1.05) rotate(-1deg); }
}
@keyframes water-wave {
  0%   { transform: translateX(0) scaleY(1); }
  50%  { transform: translateX(-8px) scaleY(0.9); }
  100% { transform: translateX(0) scaleY(1); }
}
@keyframes wind-drift {
  0%   { transform: translateX(0); opacity: 0.8; }
  50%  { transform: translateX(12px); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 0.8; }
}
@keyframes earth-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}
@keyframes splash-logo {
  0%   { opacity: 0; transform: scale(0.9) translateY(15px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ink-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── Utility Classes ────────────────────────── */
.animate-fade-in     { animation: fadeIn 0.4s ease forwards; }
.animate-fade-in-up  { animation: fadeInUp 0.5s ease forwards; }
.animate-scale-in    { animation: scaleIn 0.3s ease forwards; }
.animate-bounce      { animation: bounce 0.8s ease-in-out infinite; }
.animate-pulse-ring  { animation: pulse-ring 1.5s ease-out infinite; }
.animate-point-glow  { animation: point-glow 2s ease-in-out infinite; }

/* ── Stagger delay helpers ──────────────────── */
.delay-1  { animation-delay: 0.1s; }
.delay-2  { animation-delay: 0.2s; }
.delay-3  { animation-delay: 0.3s; }
.delay-4  { animation-delay: 0.4s; }
.delay-5  { animation-delay: 0.5s; }

/* ── Transition utilities ───────────────────── */
.transition-all    { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.transition-transform { transition: transform 0.2s ease; }

/* ── SVG meridian path animation ───────────── */
.meridian-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.meridian-path.flowing {
  animation: meridian-flow 1.8s ease-out forwards;
}
.meridian-path.glow-path {
  filter: drop-shadow(0 0 4px currentColor);
}

/* ── Element animations (Dai Medicine) ─────── */

/* 风塔：三条波浪线依次飘动 */
.wind-element .wind-p1 { animation: wind-drift 2.8s ease-in-out infinite; }
.wind-element .wind-p2 { animation: wind-drift 2.8s ease-in-out 0.6s infinite; }
.wind-element .wind-p3 { animation: wind-drift 2.8s ease-in-out 1.2s infinite; }

/* 火塔：外焰与内焰交错闪烁 */
.fire-element .fire-outer { animation: fire-flicker 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.fire-element .fire-inner { animation: fire-flicker 0.9s ease-in-out 0.15s infinite; transform-box: fill-box; transform-origin: bottom center; }

/* 水塔：水滴浮动 + 两条波纹错相 */
.water-element .water-drop  { animation: water-wave 2.4s ease-in-out infinite; }
.water-element .water-wave1 { animation: water-wave 2.4s ease-in-out 0.4s infinite; }
.water-element .water-wave2 { animation: water-wave 2.4s ease-in-out 0.9s infinite; }

/* 土塔：三层矩形交替呼吸 */
.earth-element .earth-base { animation: earth-pulse 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.earth-element .earth-mid  { animation: earth-pulse 3.5s ease-in-out 0.8s infinite; transform-box: fill-box; transform-origin: center; }
.earth-element .earth-top  { animation: earth-pulse 3.5s ease-in-out 1.6s infinite; transform-box: fill-box; transform-origin: center; }