/* ==========================================================
   GhOsT Labs
   Global Animations
   Version 1.0
========================================================== */


/* ==========================================================
   Fade Up
========================================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================================
   Fade Down
========================================================== */

@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================================
   Fade Left
========================================================== */

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/* ==========================================================
   Fade Right
========================================================== */

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(-40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/* ==========================================================
   Scale In
========================================================== */

@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(.92);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/* ==========================================================
   Floating
========================================================== */

@keyframes floating {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0px);

    }

}


/* ==========================================================
   Glow Pulse
========================================================== */

@keyframes glow {

    0% {

        box-shadow: 0 0 0 rgba(255,32,45,.0);

    }

    50% {

        box-shadow: 0 0 35px rgba(255,32,45,.25);

    }

    100% {

        box-shadow: 0 0 0 rgba(255,32,45,.0);

    }

}


/* ==========================================================
   Rotate
========================================================== */

@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* ==========================================================
   Background Gradient
========================================================== */

@keyframes gradientMove {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}


/* ==========================================================
   Utilities
========================================================== */

.fade-up {

    animation: fadeUp .8s ease both;

}

.fade-down {

    animation: fadeDown .8s ease both;

}

.fade-left {

    animation: fadeLeft .8s ease both;

}

.fade-right {

    animation: fadeRight .8s ease both;

}

.scale-in {

    animation: scaleIn .6s ease both;

}

.float {

    animation: floating 6s ease-in-out infinite;

}

.glow {

    animation: glow 3s infinite;

}

.rotate {

    animation: rotate 30s linear infinite;

}


/* ==========================================================
   Hover Animations
========================================================== */

.hover-lift {

    transition: .35s ease;

}

.hover-lift:hover {

    transform: translateY(-8px);

}


.hover-scale {

    transition: .35s ease;

}

.hover-scale:hover {

    transform: scale(1.03);

}


.hover-glow {

    transition: .35s ease;

}

.hover-glow:hover {

    box-shadow: 0 20px 50px rgba(255,32,45,.15);

}


/* ==========================================================
   Reveal
========================================================== */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}