/* =========================
   ANIMATIONS
========================= */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes bellShake {
    0%, 100% { transform: rotate(0deg); }
    5% { transform: rotate(15deg); }
    10% { transform: rotate(-15deg); }
    15% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    25% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    35%, 95% { transform: rotate(0deg); }
}

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
    30%            { transform: translateY(-6px); opacity: 1;   }
}

@keyframes pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
    50%  { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(18px, -24px) scale(1.12);
        opacity: 0.9;
    }
    100% {
        transform: translate(-10px, 20px) scale(0.95);
        opacity: 0.6;
    }
}