/* ==========================================================
   FLOAT ANIMATION
========================================================== */

@keyframes float {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-20px);

    }

    100% {

        transform: translateY(0px);

    }

}


/* ==========================================================
   FADE UP
========================================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ==========================================================
   SUBTLE BACKGROUND FLOAT
========================================================== */

@keyframes backgroundFloat {

    0%,
    100% {
        transform: translateY(-50%) rotate(12deg);
    }

    50% {
        transform: translateY(calc(-50% - 12px)) rotate(14deg);
    }

}