/* ==========================================================
   SweetLife UI Framework v2
   animation.css
   ========================================================== */

/* ---------------------------------
   Animation Speed
--------------------------------- */

:root{

    --ease-default:cubic-bezier(.22,.61,.36,1);

    --duration-fast:.25s;
    --duration-normal:.45s;
    --duration-slow:.8s;
    --duration-world:900ms;

}

/* ---------------------------------
   Base
--------------------------------- */

.sl-animated{

    animation-fill-mode:both;

    animation-duration:.8s;

    animation-timing-function:var(--ease-default);

}

/* ---------------------------------
   Fade
--------------------------------- */

.fade-in{

    animation-name:fadeIn;

}

.fade-out{

    animation-name:fadeOut;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

/* ---------------------------------
   Slide Up
--------------------------------- */

.slide-up{

    animation-name:slideUp;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:

            translateY(60px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/* ---------------------------------
   Slide Down
--------------------------------- */

.slide-down{

    animation-name:slideDown;

}

@keyframes slideDown{

    from{

        opacity:0;

        transform:

            translateY(-60px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/* ---------------------------------
   Slide Left
--------------------------------- */

.slide-left{

    animation-name:slideLeft;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:

            translateX(80px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

/* ---------------------------------
   Slide Right
--------------------------------- */

.slide-right{

    animation-name:slideRight;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:

            translateX(-80px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

/* ---------------------------------
   Scale
--------------------------------- */

.scale-in{

    animation-name:scaleIn;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:

            scale(.85);

    }

    to{

        opacity:1;

        transform:

            scale(1);

    }

}

/* ---------------------------------
   Blur
--------------------------------- */

.blur-in{

    animation-name:blurIn;

}

@keyframes blurIn{

    from{

        opacity:0;

        filter:blur(20px);

        transform:

            scale(.95);

    }

    to{

        opacity:1;

        filter:blur(0);

        transform:

            scale(1);

    }

}

/* ---------------------------------
   Float
--------------------------------- */

.float{

    animation:

        floatAnimation
        6s
        ease-in-out
        infinite;

}

@keyframes floatAnimation{

    0%{

        transform:

            translateY(0);

    }

    50%{

        transform:

            translateY(-16px);

    }

    100%{

        transform:

            translateY(0);

    }

}

/* ---------------------------------
   Rotate
--------------------------------- */

.rotate{

    animation:

        rotateAnimation
        18s
        linear
        infinite;

}

@keyframes rotateAnimation{

    from{

        transform:

            rotate(0deg);

    }

    to{

        transform:

            rotate(360deg);

    }

}

/* ---------------------------------
   Glow
--------------------------------- */

.glow{

    animation:

        glowAnimation
        4s
        ease-in-out
        infinite;

}

@keyframes glowAnimation{

    0%{

        box-shadow:

            0 0 0 rgba(89,194,138,0);

    }

    50%{

        box-shadow:

            0 0 50px rgba(89,194,138,.35);

    }

    100%{

        box-shadow:

            0 0 0 rgba(89,194,138,0);

    }

}

/* ---------------------------------
   Pulse
--------------------------------- */

.pulse{

    animation:

        pulseAnimation
        2.5s
        ease-in-out
        infinite;

}

@keyframes pulseAnimation{

    0%{

        transform:

            scale(1);

    }

    50%{

        transform:

            scale(1.05);

    }

    100%{

        transform:

            scale(1);

    }

}

/* ---------------------------------
   Journey Transition
--------------------------------- */

.world-enter{

    animation:

        worldEnter
        var(--duration-world)
        var(--ease-default);

}

.world-leave{

    animation:

        worldLeave
        .55s
        ease;

}

@keyframes worldEnter{

    from{

        opacity:0;

        transform:

            translateX(120px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:

            translateX(0)
            scale(1);

    }

}

@keyframes worldLeave{

    from{

        opacity:1;

    }

    to{

        opacity:0;

        transform:

            translateX(-60px);

    }

}

/* ---------------------------------
   Hover
--------------------------------- */

.hover-lift{

    transition:

        transform .35s,
        box-shadow .35s;

}

.hover-lift:hover{

    transform:

        translateY(-8px);

    box-shadow:

        0 24px 50px
        rgba(0,0,0,.12);

}

.hover-grow{

    transition:

        transform .3s;

}

.hover-grow:hover{

    transform:

        scale(1.05);

}

/* ---------------------------------
   Delay
--------------------------------- */

.delay-1{

    animation-delay:.15s;

}

.delay-2{

    animation-delay:.3s;

}

.delay-3{

    animation-delay:.45s;

}

.delay-4{

    animation-delay:.6s;

}

.delay-5{

    animation-delay:.75s;

}