/* Explain: CSS animations for subtle effects like vibration and glowing badges. - */
@keyframes emergency-glow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.5), inset 0 0 8px rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.8);
    }
    50% {
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.5), inset 0 0 8px rgba(59, 130, 246, 0.2);
        border-color: rgba(59, 130, 246, 0.8);
    }
}

.emergency-badge {
    animation: emergency-glow 1.8s infinite ease-in-out;
}

@keyframes subtle-vibrate {
    0%, 80%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    82%, 86%, 90%, 94% {
        transform: translate(-1px, 0.5px) rotate(-0.5deg);
    }
    84%, 88%, 92%, 96% {
        transform: translate(1px, -0.5px) rotate(0.5deg);
    }
}

.subtle-vibrate {
    display: inline-block;
    animation: subtle-vibrate 3s infinite ease-in-out;
}

.subtle-vibrate:hover {
    animation-play-state: paused;
}