/* =========================================================================
   CLICK MONSTER — CLICK ANIMATIONS (31 archetypes)
   Shared by the game arena (index.html) and the admin preview (admin.html).
   Apply one `anim-*` class to `.egg-container`, `.test-monster-target` or the
   generic `.click-anim-target` wrapper, then remove it to allow re-triggering.
   ========================================================================= */

/* Predefined Click Animation Classes per Object Type */
.egg-container.anim-squish,
.test-monster-target.anim-squish,
.click-anim-target.anim-squish {
  animation: anim-squish-kf 0.28s cubic-bezier(0.25, 1.6, 0.5, 1);
}

.egg-container.anim-metal-hit,
.test-monster-target.anim-metal-hit,
.click-anim-target.anim-metal-hit {
  animation: anim-metal-hit-kf 0.24s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.egg-container.anim-flame-burst,
.test-monster-target.anim-flame-burst,
.click-anim-target.anim-flame-burst {
  animation: anim-flame-burst-kf 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.egg-container.anim-chest-rattle,
.test-monster-target.anim-chest-rattle,
.click-anim-target.anim-chest-rattle {
  animation: anim-chest-rattle-kf 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.egg-container.anim-neon-pulse,
.test-monster-target.anim-neon-pulse,
.click-anim-target.anim-neon-pulse {
  animation: anim-neon-pulse-kf 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

.egg-container.anim-meteor-shock,
.test-monster-target.anim-meteor-shock,
.click-anim-target.anim-meteor-shock {
  animation: anim-meteor-shock-kf 0.34s cubic-bezier(0.15, 0.85, 0.35, 1.2);
}

.egg-container.anim-ghost-wobble,
.test-monster-target.anim-ghost-wobble,
.click-anim-target.anim-ghost-wobble {
  animation: anim-ghost-wobble-kf 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.egg-container.anim-golden-radiance,
.test-monster-target.anim-golden-radiance,
.click-anim-target.anim-golden-radiance {
  animation: anim-golden-radiance-kf 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.egg-container.anim-liquid-slosh,
.test-monster-target.anim-liquid-slosh,
.click-anim-target.anim-liquid-slosh {
  animation: anim-liquid-slosh-kf 0.35s cubic-bezier(0.4, 0, 0.2, 1.4);
}

.egg-container.anim-glyph-spin,
.test-monster-target.anim-glyph-spin,
.click-anim-target.anim-glyph-spin {
  animation: anim-glyph-spin-kf 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

.egg-container.anim-vortex-implode,
.test-monster-target.anim-vortex-implode,
.click-anim-target.anim-vortex-implode {
  animation: anim-vortex-implode-kf 0.36s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.egg-container.anim-thunder-smite,
.test-monster-target.anim-thunder-smite,
.click-anim-target.anim-thunder-smite {
  animation: anim-thunder-smite-kf 0.22s steps(2, start);
}

.egg-container.anim-bio-pulse,
.test-monster-target.anim-bio-pulse,
.click-anim-target.anim-bio-pulse {
  animation: anim-bio-pulse-kf 0.32s cubic-bezier(0.25, 1.8, 0.5, 1);
}

.egg-container.anim-bell-chime,
.test-monster-target.anim-bell-chime,
.click-anim-target.anim-bell-chime {
  animation: anim-bell-chime-kf 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.egg-container.anim-pixel-glitch,
.test-monster-target.anim-pixel-glitch,
.click-anim-target.anim-pixel-glitch {
  animation: anim-pixel-glitch-kf 0.2s steps(3, end);
}

.egg-container.anim-time-warp,
.test-monster-target.anim-time-warp,
.click-anim-target.anim-time-warp {
  animation: anim-time-warp-kf 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.egg-container.anim-eruption-quake,
.test-monster-target.anim-eruption-quake,
.click-anim-target.anim-eruption-quake {
  animation: anim-eruption-quake-kf 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.egg-container.anim-stone-crack,
.test-monster-target.anim-stone-crack,
.click-anim-target.anim-stone-crack {
  animation: anim-stone-crack-kf 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.egg-container.anim-signal-ping,
.test-monster-target.anim-signal-ping,
.click-anim-target.anim-signal-ping {
  animation: anim-signal-ping-kf 0.34s cubic-bezier(0, 0, 0.2, 1);
}

.egg-container.anim-nuclear-overload,
.test-monster-target.anim-nuclear-overload,
.click-anim-target.anim-nuclear-overload {
  animation: anim-nuclear-overload-kf 0.28s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.egg-container.anim-slice,
.test-monster-target.anim-slice,
.click-anim-target.anim-slice {
  animation: anim-slice-kf 0.26s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* ---- 10 additional archetype animations ---- */
.egg-container.anim-cosmic-rupture,
.test-monster-target.anim-cosmic-rupture,
.click-anim-target.anim-cosmic-rupture {
  animation: anim-cosmic-rupture-kf 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.egg-container.anim-earthquake-shake,
.test-monster-target.anim-earthquake-shake,
.click-anim-target.anim-earthquake-shake {
  animation: anim-earthquake-shake-kf 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.egg-container.anim-emp-blast,
.test-monster-target.anim-emp-blast,
.click-anim-target.anim-emp-blast {
  animation: anim-emp-blast-kf 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.egg-container.anim-glitch-scatter,
.test-monster-target.anim-glitch-scatter,
.click-anim-target.anim-glitch-scatter {
  animation: anim-glitch-scatter-kf 0.24s steps(4, end);
}

.egg-container.anim-graviton-implosion,
.test-monster-target.anim-graviton-implosion,
.click-anim-target.anim-graviton-implosion {
  animation: anim-graviton-implosion-kf 0.4s cubic-bezier(0.6, -0.4, 0.3, 1.4);
}

.egg-container.anim-heavy-hammer,
.test-monster-target.anim-heavy-hammer,
.click-anim-target.anim-heavy-hammer {
  animation: anim-heavy-hammer-kf 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.egg-container.anim-plasma-overload,
.test-monster-target.anim-plasma-overload,
.click-anim-target.anim-plasma-overload {
  animation: anim-plasma-overload-kf 0.32s cubic-bezier(0.25, 1.4, 0.5, 1);
}

.egg-container.anim-sand-dissolve,
.test-monster-target.anim-sand-dissolve,
.click-anim-target.anim-sand-dissolve {
  animation: anim-sand-dissolve-kf 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.egg-container.anim-sonic-resonance,
.test-monster-target.anim-sonic-resonance,
.click-anim-target.anim-sonic-resonance {
  animation: anim-sonic-resonance-kf 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.egg-container.anim-volcanic-eruption,
.test-monster-target.anim-volcanic-eruption,
.click-anim-target.anim-volcanic-eruption {
  animation: anim-volcanic-eruption-kf 0.36s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Predefined Click Animation Keyframes */
@keyframes anim-squish-kf {
  0% { transform: scale(1, 1); filter: brightness(1); }
  25% { transform: scale(1.2, 0.8) translateY(12px); filter: brightness(1.35) drop-shadow(0 0 28px rgba(245, 158, 11, 0.85)); }
  50% { transform: scale(0.86, 1.16) translateY(-10px); filter: brightness(1.2); }
  75% { transform: scale(1.06, 0.95) translateY(3px); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}

@keyframes anim-metal-hit-kf {
  0% { transform: scale(1); filter: brightness(1); }
  15% { transform: scale(0.95) translate(-7px, 5px); filter: brightness(1.8) drop-shadow(0 0 35px #06b6d4); }
  30% { transform: scale(0.98) translate(6px, -5px); filter: brightness(1.4); }
  50% { transform: scale(1.03) translate(-4px, 3px); }
  70% { transform: scale(0.99) translate(2px, -2px); }
  100% { transform: scale(1) translate(0, 0); filter: brightness(1); }
}

@keyframes anim-flame-burst-kf {
  0% { transform: scale(1) rotate(0); filter: brightness(1); }
  25% { transform: scale(1.2) rotate(-4deg); filter: brightness(1.7) drop-shadow(0 0 50px #ef4444) drop-shadow(0 0 25px #f97316); }
  55% { transform: scale(0.92) rotate(4deg); filter: brightness(1.3); }
  80% { transform: scale(1.05) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes anim-chest-rattle-kf {
  0% { transform: translateY(0) rotate(0); filter: brightness(1); }
  20% { transform: translateY(-12px) rotate(-6deg) scale(1.1); filter: brightness(1.6) drop-shadow(0 0 40px #eab308); }
  40% { transform: translateY(8px) rotate(6deg) scale(0.96); }
  60% { transform: translateY(-4px) rotate(-3deg) scale(1.03); }
  80% { transform: translateY(2px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0); filter: brightness(1); }
}

@keyframes anim-neon-pulse-kf {
  0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 15px #a855f7); }
  25% { transform: scale(1.22) rotate(7deg); filter: brightness(1.8) drop-shadow(0 0 55px #ec4899) drop-shadow(0 0 30px #a855f7); }
  55% { transform: scale(0.88) rotate(-4deg); filter: brightness(1.35); }
  80% { transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 15px #a855f7); }
}

@keyframes anim-meteor-shock-kf {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  20% { transform: translateY(16px) scale(1.18, 0.82); filter: brightness(1.9) drop-shadow(0 0 50px #10b981) drop-shadow(0 0 30px #34d399); }
  45% { transform: translateY(-12px) scale(0.9, 1.12); filter: brightness(1.35); }
  70% { transform: translateY(4px) scale(1.05, 0.97); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes anim-ghost-wobble-kf {
  0% { transform: translateY(0) scale(1) skewX(0deg); filter: brightness(1); }
  25% { transform: translateY(-16px) scale(1.15, 0.88) skewX(-7deg); filter: brightness(1.7) drop-shadow(0 0 45px #84cc16) drop-shadow(0 0 20px #a3e635); opacity: 0.85; }
  50% { transform: translateY(-8px) scale(0.92, 1.12) skewX(7deg); filter: brightness(1.4); opacity: 0.95; }
  75% { transform: translateY(4px) scale(1.04, 0.96) skewX(-2deg); }
  100% { transform: translateY(0) scale(1) skewX(0deg); filter: brightness(1); opacity: 1; }
}

@keyframes anim-golden-radiance-kf {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  20% { transform: scale(1.24) rotate(4deg); filter: brightness(1.9) drop-shadow(0 0 55px #f59e0b) drop-shadow(0 0 30px #fde047); }
  45% { transform: scale(0.92) rotate(-3deg); filter: brightness(1.4); }
  70% { transform: scale(1.08) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes anim-liquid-slosh-kf {
  0% { transform: rotate(0deg) scale(1); filter: brightness(1); }
  20% { transform: rotate(-14deg) scale(1.12, 0.92) translateY(5px); filter: brightness(1.8) drop-shadow(0 0 45px #d946ef); }
  45% { transform: rotate(12deg) scale(0.94, 1.1) translateY(-6px); filter: brightness(1.4); }
  70% { transform: rotate(-5deg) scale(1.03, 0.98); }
  100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
}

@keyframes anim-glyph-spin-kf {
  0% { transform: perspective(600px) rotateY(0deg) scale(1); filter: brightness(1); }
  30% { transform: perspective(600px) rotateY(180deg) scale(1.22); filter: brightness(2) drop-shadow(0 0 50px #0ea5e9); }
  65% { transform: perspective(600px) rotateY(330deg) scale(0.95); filter: brightness(1.3); }
  100% { transform: perspective(600px) rotateY(360deg) scale(1); filter: brightness(1); }
}

@keyframes anim-vortex-implode-kf {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  30% { transform: scale(0.68) rotate(-35deg); filter: brightness(2.2) drop-shadow(0 0 60px #6366f1) drop-shadow(0 0 30px #818cf8); }
  60% { transform: scale(1.26) rotate(20deg); filter: brightness(1.5); }
  80% { transform: scale(0.95) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes anim-thunder-smite-kf {
  0% { transform: translate(0, 0) scale(1); filter: brightness(1); }
  15% { transform: translate(-8px, 6px) scale(1.12); filter: brightness(2.5) drop-shadow(0 0 60px #38bdf8) drop-shadow(0 0 35px #ffffff); }
  30% { transform: translate(10px, -6px) scale(0.92); filter: brightness(1.8); }
  50% { transform: translate(-5px, -4px) scale(1.06); }
  70% { transform: translate(4px, 3px) scale(0.98); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}

@keyframes anim-bio-pulse-kf {
  0% { transform: scale(1); filter: brightness(1); }
  20% { transform: scale(1.26, 1.15); filter: brightness(1.8) drop-shadow(0 0 50px #22c55e); }
  40% { transform: scale(0.9, 0.94); filter: brightness(1.2); }
  60% { transform: scale(1.14, 1.08); filter: brightness(1.5); }
  80% { transform: scale(0.97, 0.98); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes anim-bell-chime-kf {
  0% { transform-origin: top center; transform: rotate(0deg); filter: brightness(1); }
  20% { transform-origin: top center; transform: rotate(-18deg) scale(1.08); filter: brightness(1.7) drop-shadow(0 0 45px #f97316); }
  40% { transform-origin: top center; transform: rotate(15deg) scale(1.04); filter: brightness(1.4); }
  60% { transform-origin: top center; transform: rotate(-8deg); }
  80% { transform-origin: top center; transform: rotate(4deg); }
  100% { transform-origin: top center; transform: rotate(0deg); filter: brightness(1); }
}

@keyframes anim-pixel-glitch-kf {
  0% { transform: translate(0, 0) skewX(0deg); filter: brightness(1); }
  20% { transform: translate(-12px, 4px) skewX(-14deg); filter: brightness(2) drop-shadow(-8px 0 0 #ec4899) drop-shadow(8px 0 0 #06b6d4); }
  40% { transform: translate(10px, -4px) skewX(12deg); filter: brightness(1.6) drop-shadow(6px 0 0 #f43f5e); }
  60% { transform: translate(-4px, 2px) skewX(-5deg); filter: brightness(1.3); }
  80% { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0) skewX(0deg); filter: brightness(1); }
}

@keyframes anim-time-warp-kf {
  0% { transform: rotate(0deg) scale(1); filter: brightness(1); }
  30% { transform: rotate(180deg) scale(0.8); filter: brightness(1.9) drop-shadow(0 0 50px #eab308); }
  60% { transform: rotate(360deg) scale(1.2); filter: brightness(1.5) drop-shadow(0 0 30px #facc15); }
  85% { transform: rotate(360deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); filter: brightness(1); }
}

@keyframes anim-eruption-quake-kf {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  15% { transform: translateY(12px) scale(1.15, 0.85); filter: brightness(1.5); }
  35% { transform: translateY(-20px) scale(0.88, 1.25); filter: brightness(2.2) drop-shadow(0 -10px 55px #dc2626) drop-shadow(0 0 35px #f97316); }
  60% { transform: translateY(6px) scale(1.08, 0.94); filter: brightness(1.4); }
  80% { transform: translateY(-3px); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes anim-stone-crack-kf {
  0% { transform: scale(1) translateY(0); filter: brightness(1); }
  15% { transform: scale(1.06, 0.92) translateY(8px); filter: brightness(1.8) drop-shadow(0 0 35px #94a3b8); }
  35% { transform: scale(0.96, 1.05) translateY(-4px); filter: brightness(1.3); }
  60% { transform: scale(1.02, 0.98) translateY(2px); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

@keyframes anim-signal-ping-kf {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  25% { transform: scale(1.22) rotate(-8deg); filter: brightness(1.9) drop-shadow(0 0 50px #0284c7) drop-shadow(0 0 30px #38bdf8); }
  55% { transform: scale(0.92) rotate(6deg); filter: brightness(1.4); }
  75% { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes anim-nuclear-overload-kf {
  0% { transform: scale(1) translate(0, 0); filter: brightness(1); }
  10% { transform: scale(1.18) translate(-8px, 4px); filter: brightness(2.4) drop-shadow(0 0 60px #e11d48) drop-shadow(0 0 35px #fb7185); }
  25% { transform: scale(1.2) translate(8px, -4px); filter: brightness(2.6); }
  40% { transform: scale(1.12) translate(-6px, -2px); filter: brightness(2); }
  60% { transform: scale(0.95) translate(4px, 2px); filter: brightness(1.5); }
  80% { transform: scale(1.04) translate(-2px, 0); }
  100% { transform: scale(1) translate(0, 0); filter: brightness(1); }
}

@keyframes anim-slice-kf {
  0% { transform: scale(1) rotate(0deg) translate(0, 0); filter: brightness(1); }
  25% { transform: scale(1.15) rotate(-12deg) translate(-10px, 8px); filter: brightness(2.2) drop-shadow(0 0 45px #38bdf8); }
  50% { transform: scale(0.92) rotate(8deg) translate(8px, -6px); filter: brightness(1.5); }
  75% { transform: scale(1.04) rotate(-3deg) translate(-2px, 2px); }
  100% { transform: scale(1) rotate(0deg) translate(0, 0); filter: brightness(1); }
}

/* ---- 10 additional archetype keyframes ---- */
@keyframes anim-cosmic-rupture-kf {
  0% { transform: scale(1) skew(0deg, 0deg); filter: brightness(1); }
  20% { transform: scale(1.06, 0.96) skew(-6deg, 2deg) translate(-4px, 3px); filter: brightness(1.9) drop-shadow(0 0 40px #a855f7) hue-rotate(-20deg); }
  45% { transform: scale(0.95, 1.08) skew(5deg, -2deg) translate(5px, -4px); filter: brightness(1.5) drop-shadow(0 0 26px #f59e0b); }
  70% { transform: scale(1.03, 0.98) skew(-2deg, 1deg) translate(-2px, 1px); filter: brightness(1.2); }
  100% { transform: scale(1) skew(0deg, 0deg) translate(0, 0); filter: brightness(1); }
}

@keyframes anim-earthquake-shake-kf {
  0% { transform: translate(0, 0) rotate(0deg); filter: brightness(1); }
  10% { transform: translate(-12px, 4px) rotate(-1.5deg); filter: brightness(1.3) drop-shadow(0 0 22px #fbbf24); }
  25% { transform: translate(11px, -3px) rotate(1.5deg); }
  40% { transform: translate(-9px, 5px) rotate(-1deg); filter: brightness(1.2); }
  55% { transform: translate(8px, -2px) rotate(1deg); }
  70% { transform: translate(-5px, 3px) rotate(-0.5deg); }
  85% { transform: translate(3px, -1px) rotate(0.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); filter: brightness(1); }
}

@keyframes anim-emp-blast-kf {
  0% { transform: scale(1); filter: brightness(1); }
  12% { transform: scale(0.94) translate(2px, -1px); filter: brightness(3) contrast(1.4) drop-shadow(0 0 60px #60a5fa) saturate(0.2); }
  24% { transform: scale(1.09) translate(-3px, 2px); filter: brightness(1.6) drop-shadow(0 0 45px #38bdf8) saturate(1.6); }
  40% { transform: scale(1.0) translate(1px, 0); filter: brightness(1.2) hue-rotate(15deg); }
  60% { transform: scale(1.02) translate(-1px, 1px); filter: brightness(1.1); }
  100% { transform: scale(1) translate(0, 0); filter: brightness(1); }
}

@keyframes anim-glitch-scatter-kf {
  0% { transform: translate(0, 0) scale(1); filter: none; clip-path: none; }
  20% { transform: translate(-10px, 2px) scale(1.04, 0.96); filter: drop-shadow(6px 0 0 #f0f) drop-shadow(-6px 0 0 #0ff) contrast(1.5); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 45%, 100% 45%, 100% 100%, 0 100%); }
  45% { transform: translate(9px, -3px) scale(0.97, 1.05); filter: drop-shadow(-5px 0 0 #f0f) drop-shadow(5px 0 0 #0ff) brightness(1.5); clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%, 0 72%, 100% 72%, 100% 100%, 0 100%); }
  70% { transform: translate(-4px, 1px) scale(1.02); filter: drop-shadow(3px 0 0 #f0f) drop-shadow(-3px 0 0 #0ff); clip-path: none; }
  100% { transform: translate(0, 0) scale(1); filter: none; clip-path: none; }
}

@keyframes anim-graviton-implosion-kf {
  0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  30% { transform: scale(0.78) rotate(-14deg); filter: brightness(0.5) contrast(1.6) drop-shadow(0 0 50px #7c3aed); }
  50% { transform: scale(1.14) rotate(8deg); filter: brightness(2.4) drop-shadow(0 0 70px #c084fc); }
  72% { transform: scale(0.96) rotate(-3deg); filter: brightness(1.3); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}

@keyframes anim-heavy-hammer-kf {
  0% { transform: scale(1) translateY(0); filter: brightness(1); }
  18% { transform: scale(1.18, 0.78) translateY(16px); filter: brightness(2) drop-shadow(0 0 45px #fb923c) drop-shadow(0 12px 18px rgba(0,0,0,0.6)); }
  42% { transform: scale(0.92, 1.1) translateY(-8px); filter: brightness(1.4) drop-shadow(0 0 30px #f59e0b); }
  65% { transform: scale(1.04, 0.97) translateY(3px); filter: brightness(1.15); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

@keyframes anim-plasma-overload-kf {
  0% { transform: scale(1); filter: brightness(1) saturate(1); }
  15% { transform: scale(1.08); filter: brightness(2.2) saturate(2.4) drop-shadow(0 0 50px #22d3ee) hue-rotate(0deg); }
  30% { transform: scale(0.96); filter: brightness(1.6) saturate(2) drop-shadow(0 0 40px #e879f9) hue-rotate(40deg); }
  45% { transform: scale(1.06); filter: brightness(2.4) saturate(2.6) drop-shadow(0 0 60px #ffffff) hue-rotate(-20deg); }
  65% { transform: scale(0.98); filter: brightness(1.3) saturate(1.5) hue-rotate(10deg); }
  100% { transform: scale(1); filter: brightness(1) saturate(1) hue-rotate(0deg); }
}

@keyframes anim-sand-dissolve-kf {
  0% { transform: scale(1) translateY(0); filter: brightness(1) blur(0); opacity: 1; }
  25% { transform: scale(1.03, 0.94) translateY(6px); filter: brightness(1.5) blur(1.5px) drop-shadow(0 0 36px #fbbf24) sepia(0.5); opacity: 0.85; }
  50% { transform: scale(0.97, 1.05) translateY(-5px); filter: brightness(1.3) blur(0.8px) drop-shadow(0 0 24px #f59e0b) sepia(0.2); opacity: 0.95; }
  75% { transform: scale(1.01, 0.99) translateY(2px); filter: brightness(1.1) blur(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); filter: brightness(1) blur(0); opacity: 1; }
}

@keyframes anim-sonic-resonance-kf {
  0% { transform: translate(0, 0) scale(1); filter: brightness(1); }
  8% { transform: translate(-4px, 0) scale(1.03); filter: brightness(1.6) drop-shadow(0 0 30px #fde047); }
  16% { transform: translate(4px, 0) scale(1.05); filter: brightness(1.9) drop-shadow(0 0 45px #facc15); }
  24% { transform: translate(-3px, 0) scale(1.04); }
  32% { transform: translate(3px, 0) scale(1.03); filter: brightness(1.5) drop-shadow(0 0 30px #fde047); }
  48% { transform: translate(-2px, 0) scale(1.02); }
  64% { transform: translate(1px, 0) scale(1.01); filter: brightness(1.2); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}

@keyframes anim-volcanic-eruption-kf {
  0% { transform: scale(1) translateY(0); filter: brightness(1); }
  15% { transform: scale(1.06, 0.92) translateY(8px) translateX(-4px); filter: brightness(1.4) drop-shadow(0 0 30px #ef4444); }
  35% { transform: scale(0.94, 1.14) translateY(-18px) translateX(3px); filter: brightness(2.2) drop-shadow(0 0 60px #f97316) drop-shadow(0 -20px 30px #fbbf24); }
  55% { transform: scale(1.04, 0.98) translateY(4px) translateX(-2px); filter: brightness(1.5) drop-shadow(0 0 35px #ef4444); }
  75% { transform: scale(0.99, 1.02) translateY(-3px) translateX(1px); filter: brightness(1.2); }
  100% { transform: scale(1) translateY(0) translateX(0); filter: brightness(1); }
}