/* ==========================================================
   ANIMATIONS
   Global animation library
========================================================== */

/* ==========================================================
   Keyframes
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.15);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatingSlow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-26px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:

            0 0 0 rgba(37,99,235,0);

    }

    50%{

        box-shadow:

            0 0 40px rgba(37,99,235,.35);

    }

    100%{

        box-shadow:

            0 0 0 rgba(37,99,235,0);

    }

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

@keyframes shimmer{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(150%);

    }

}

@keyframes blink{

    0%{

        opacity:1;

    }

    50%{

        opacity:.4;

    }

    100%{

        opacity:1;

    }

}

@keyframes scrollIndicator{

    0%{

        opacity:.2;

        transform:translateY(0);

    }

    50%{

        opacity:1;

        transform:translateY(10px);

    }

    100%{

        opacity:.2;

        transform:translateY(20px);

    }

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

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

.fade-up{

    opacity:0;

    transform:translateY(50px);

}

.fade-down{

    opacity:0;

    transform:translateY(-50px);

}

.fade-left{

    opacity:0;

    transform:translateX(60px);

}

.fade-right{

    opacity:0;

    transform:translateX(-60px);

}

.zoom-in{

    opacity:0;

    transform:scale(.9);

}

.zoom-out{

    opacity:0;

    transform:scale(1.08);

}

.reveal{

    transition:

        opacity .8s cubic-bezier(.22,1,.36,1),

        transform .8s cubic-bezier(.22,1,.36,1);

}

.reveal.active{

    opacity:1;

    transform:none;

}

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

.float{

    animation:

        floating

        5s

        ease-in-out

        infinite;

}

.float-slow{

    animation:

        floatingSlow

        8s

        ease-in-out

        infinite;

}

/* ==========================================================
   Rotation
========================================================== */

.rotate{

    animation:

        rotateSlow

        24s

        linear

        infinite;

}

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

.glow{

    animation:

        pulseGlow

        4s

        ease-in-out

        infinite;

}

/* ==========================================================
   Gradient Animation
========================================================== */

.gradient-animate{

    background-size:300% 300%;

    animation:

        gradientMove

        10s

        ease

        infinite;

}

/* ==========================================================
   Shine Effect
========================================================== */

.shine{

    position:relative;

    overflow:hidden;

}

.shine::after{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:skewX(-25deg);

}

.shine:hover::after{

    animation:

        shimmer

        1s

        forwards;

}

/* ==========================================================
   Hover Lift
========================================================== */

.hover-lift{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.hover-lift:hover{

    transform:

        translateY(-10px);

}

/* ==========================================================
   Hover Scale
========================================================== */

.hover-scale{

    transition:

        transform .35s ease;

}

.hover-scale:hover{

    transform:scale(1.04);

}

/* ==========================================================
   Blur In
========================================================== */

.blur-in{

    opacity:0;

    filter:blur(20px);

    transition:

        opacity .9s,

        filter .9s;

}

.blur-in.active{

    opacity:1;

    filter:none;

}

/* ==========================================================
   Loading Spinner
========================================================== */

.spinner{

    width:36px;

    height:36px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.15);

    border-top-color:#fff;

    animation:

        spin

        .8s

        linear

        infinite;

}

/* ==========================================================
   Scroll Indicator
========================================================== */

.scroll-indicator{

    animation:

        scrollIndicator

        2s

        infinite;

}

.scroll-indicator img{

    width:38px;

    height:auto;

}

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

.delay-1{

    transition-delay:.1s;

}

.delay-2{

    transition-delay:.2s;

}

.delay-3{

    transition-delay:.3s;

}

.delay-4{

    transition-delay:.4s;

}

.delay-5{

    transition-delay:.5s;

}

.delay-6{

    transition-delay:.6s;

}

.delay-7{

    transition-delay:.7s;

}

.delay-8{

    transition-delay:.8s;

}

/* ==========================================================
   Reduced Motion
========================================================== */

@media(prefers-reduced-motion:reduce){

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}