/* =========================================================
   NAVIGATION
========================================================= */

@keyframes navigation-pop {

    0% {
        transform:
            translateY(0)
            rotate(0deg)
            scale(1);
    }

    30% {
        transform:
            translateY(-6px)
            rotate(-2deg)
            scale(1.06, 0.94);
    }

    55% {
        transform:
            translateY(-3px)
            rotate(2deg)
            scale(0.97, 1.05);
    }

    78% {
        transform:
            translateY(-5px)
            rotate(-1deg)
            scale(1.02, 0.98);
    }

    100% {
        transform:
            translateY(-4px)
            rotate(-1deg)
            scale(1);
    }
}


/* =========================================================
   LOGO
========================================================= */

@keyframes logo-rubber-bounce {

    0% {
        transform:
            scale(1)
            rotate(0deg);
    }

    25% {
        transform:
            scale(1.07, 0.93)
            rotate(-5deg);
    }

    48% {
        transform:
            scale(0.95, 1.07)
            rotate(4deg);
    }

    70% {
        transform:
            scale(1.03, 0.98)
            rotate(-2deg);
    }

    100% {
        transform:
            scale(1)
            rotate(0deg);
    }
}


/* =========================================================
   OPEN SIGN
========================================================= */

@keyframes open-sign-pop {

    0% {
        transform:
            scale(1)
            rotate(0deg);
    }

    20% {
        transform:
            scale(1.04, 0.95)
            rotate(-1deg);
    }

    45% {
        transform:
            scale(0.98, 1.05)
            rotate(1deg);
    }

    70% {
        transform:
            scale(1.02, 0.98)
            rotate(-0.5deg);
    }

    100% {
        transform:
            scale(1)
            rotate(0deg);
    }
}


/* =========================================================
   GET FOAMED BUBBLE
========================================================= */

@keyframes foam-bubble-pop {

    0% {
        opacity: 0;

        transform:
            translate(0, 6px)
            scale(0.4);
    }

    20% {
        opacity: 1;

        transform:
            translate(3px, 0)
            scale(1);
    }

    55% {
        opacity: 0.9;

        transform:
            translate(8px, -13px)
            scale(1.15);
    }

    100% {
        opacity: 0;

        transform:
            translate(13px, -27px)
            scale(0.7);
    }
}