/* ============================================================
   KEYFRAME ANIMATIONS
   Tip: pair with will-change: transform, opacity on the element
   ============================================================ */

/* --- Entry / Exit ----------------------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* --- Attention -------------------------------------------- */
@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bellShake {
    0% {
        transform: rotate(0);
    }

    15% {
        transform: rotate(20deg);
    }

    30% {
        transform: rotate(-20deg);
    }

    45% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes buttonGlitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* --- Highlight -------------------------------------------- */
@keyframes flashMention {
    from {
        background: rgba(218, 55, 60, 0.8);
    }

    to {
        background: transparent;
    }
}

/* --- Texture / Noise -------------------------------------- */
@keyframes noiseAnim {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -5%);
    }

    20% {
        transform: translate(-10%, 5%);
    }

    30% {
        transform: translate(5%, -10%);
    }

    40% {
        transform: translate(-5%, 15%);
    }

    50% {
        transform: translate(-10%, 5%);
    }

    60% {
        transform: translate(15%, 0);
    }

    70% {
        transform: translate(0, 10%);
    }

    80% {
        transform: translate(-15%, 0);
    }

    90% {
        transform: translate(10%, 5%);
    }

    100% {
        transform: translate(5%, 0);
    }
}