/* Attention Effects CSS Animations */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

@keyframes swing {
    20% { transform: rotate3d(0, 0, 1, 15deg); }
    40% { transform: rotate3d(0, 0, 1, -10deg); }
    60% { transform: rotate3d(0, 0, 1, 5deg); }
    80% { transform: rotate3d(0, 0, 1, -5deg); }
    100% { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes tada {
    0%, 100% { transform: scale(1) rotate(0deg); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}

@keyframes wobble {
    0%, 100% { transform: translateX(0%) rotate(0deg); }
    15% { transform: translateX(-25px) rotate(-5deg); }
    30% { transform: translateX(20px) rotate(3deg); }
    45% { transform: translateX(-15px) rotate(-3deg); }
    60% { transform: translateX(10px) rotate(2deg); }
    75% { transform: translateX(-5px) rotate(-1deg); }
}

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

@keyframes jello {
    0%, 100% { transform: skewX(0deg) skewY(0deg); }
    30% { transform: skewX(25deg) skewY(25deg); }
    40% { transform: skewX(-15deg) skewY(-15deg); }
    50% { transform: skewX(15deg) skewY(15deg); }
    65% { transform: skewX(-5deg) skewY(-5deg); }
    75% { transform: skewX(5deg) skewY(5deg); }
}

/* Animation classes */
.attention-effect-shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.attention-effect-pulse {
    animation: pulse 1s ease-in-out both;
}

.attention-effect-bounce {
    animation: bounce 1s ease both;
}

.attention-effect-swing {
    animation: swing 1s ease both;
    transform-origin: top center;
}

.attention-effect-tada {
    animation: tada 1s ease both;
}

.attention-effect-wobble {
    animation: wobble 1s ease both;
}

.attention-effect-flash {
    animation: flash 1s ease both;
}

.attention-effect-jello {
    animation: jello 1s ease both;
}