@keyframes impactFxShake {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-1px, 1px) rotate(-0.6deg); }
    40% { transform: translate(2px, -1px) rotate(0.6deg); }
    60% { transform: translate(-2px, 1px) rotate(-0.5deg); }
    80% { transform: translate(1px, -1px) rotate(0.4deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes impactFxParticle {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .impact-fx-active,
    .impact-fx-particle {
        animation: none !important;
    }
}