/**
 * Notification Bell Animation
 * Animación de vibración/shake para el icono de notificaciones
 */

/* Animación de shake/vibración */
@keyframes bell-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: rotate(-10deg);
    }
    20%, 40%, 60%, 80% {
        transform: rotate(10deg);
    }
}

/* Animación de swing (más suave) */
@keyframes bell-swing {
    0%, 100% {
        transform: rotate(0deg);
        transform-origin: top center;
    }
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
}

/* Animación de ring (combinación de shake y scale) */
@keyframes bell-ring {
    0% {
        transform: rotate(0deg) scale(1);
    }
    10%, 20% {
        transform: rotate(-12deg) scale(1.1);
    }
    30%, 50%, 70%, 90% {
        transform: rotate(12deg) scale(1.1);
    }
    40%, 60%, 80% {
        transform: rotate(-12deg) scale(1.1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* Clase para aplicar la animación de shake */
.bell-shake {
    animation: bell-shake 0.5s ease-in-out;
}

/* Clase para aplicar la animación de swing */
.bell-swing {
    animation: bell-swing 0.8s ease-in-out;
}

/* Clase para aplicar la animación de ring (recomendada) */
.bell-ring {
    animation: bell-ring 0.6s ease-in-out;
}

/* Prevenir que la animación se ejecute múltiples veces simultáneamente */
.bell-animating {
    animation-fill-mode: forwards;
}

/* Efecto de pulso en el badge cuando hay notificaciones */
@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }
}

.badge-pulse {
    animation: badge-pulse 2s ease-in-out infinite;
}