/*==============================================================
    PREMIUM GYM WEBSITE
    ------------------------------------------------------------
    Motion Library
==============================================================*/

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

.fade-up{

    animation:fadeUp .9s ease forwards;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================================================
    FADE DOWN
==============================================================*/

.fade-down{

    animation:fadeDown .9s ease forwards;

}



@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================================================
    FADE LEFT
==============================================================*/

.fade-left{

    animation:fadeLeft .9s ease forwards;

}



@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-45px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==============================================================
    FADE RIGHT
==============================================================*/

.fade-right{

    animation:fadeRight .9s ease forwards;

}



@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(45px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==============================================================
    ZOOM IN
==============================================================*/

.zoom-in{

    animation:zoomIn .7s ease forwards;

}



@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.82);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==============================================================
    FLOATING
==============================================================*/

.float{
    transform-origin:center bottom;
    animation:float 6s ease-in-out infinite;
}



@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==============================================================
    PULSE GLOW
==============================================================*/

.pulse-glow{

    animation:pulseGlow 3s ease-in-out infinite;

}



@keyframes pulseGlow{

    50%{

        box-shadow:

        0 0 40px rgba(214,40,57,.45);

    }

}

/*==============================================================
    ROTATE SLOW
==============================================================*/

.rotate-slow{

    animation:rotateSlow 20s linear infinite;

}



@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==============================================================
    ANIMATION DELAYS
==============================================================*/

.delay-1{

    animation-delay:.15s;

}

.delay-2{

    animation-delay:.30s;

}

.delay-3{

    animation-delay:.45s;

}

.delay-4{

    animation-delay:.60s;

}

.delay-5{

    animation-delay:.75s;

}


/*==============================================================
    GLOW FLOATING
==============================================================*/

@keyframes glowBlueFloat{

    0%{

        transform:
            translate(0,0)
            scale(1);

    }

    50%{

        transform:
            translate(40px,-30px)
            scale(1.08);

    }

    100%{

        transform:
            translate(0,0)
            scale(1);

    }

}



@keyframes glowRedFloat{

    0%{

        transform:
            translate(0,0)
            scale(1);

    }

    50%{

        transform:
            translate(-40px,25px)
            scale(1.06);

    }

    100%{

        transform:
            translate(0,0)
            scale(1);

    }

}

/*==============================================================
    GRID MOTION
==============================================================*/

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(70px);

    }

}


/*==============================================================
    PARTICLES
==============================================================*/

@keyframes particleFloat{

    from{

        transform:

            translateY(0)

            scale(1);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        transform:

            translateY(-900px)

            scale(1.4);

        opacity:0;

    }

}

@keyframes gentleFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==============================================================
    TIMELINE PULSE
==============================================================*/

@keyframes timelinePulse{

    0%{

        box-shadow:

            0 0 0 0 rgba(214,40,57,.45);

    }

    70%{

        box-shadow:

            0 0 0 18px rgba(214,40,57,0);

    }

    100%{

        box-shadow:

            0 0 0 0 rgba(214,40,57,0);

    }

}

@keyframes kenBurns{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.08) translate(-2%, -2%);

    }

}

@keyframes lightSweep{

    from{

        transform:translateX(-140%);

    }

    to{

        transform:translateX(140%);

    }

}

@keyframes membershipPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes badgeShine{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}

@keyframes featureReveal{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes locationPulse{

    0%{

        transform:scale(.8);

        opacity:1;

    }

    100%{

        transform:scale(1.8);

        opacity:0;

    }

}

/*==============================================================
    ROUTE FLOW
==============================================================*/

@keyframes routeFlow{

    from{

        stroke-dashoffset:65;

    }

    to{

        stroke-dashoffset:0;

    }

}

@keyframes panelReflection{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(140%);

    }

}

@keyframes pinLabelFloat{

    0%{

        transform:

            translateX(-50%)

            translateY(0);

    }

    50%{

        transform:

            translateX(-50%)

            translateY(-6px);

    }

    100%{

        transform:

            translateX(-50%)

            translateY(0);

    }

}

/*==============================================================
    FAQ ICON GLOW
==============================================================*/

@keyframes faqGlow{

    0%{

        box-shadow:

            0 0 10px rgba(214,40,57,.18);

    }

    50%{

        box-shadow:

            0 0 25px rgba(214,40,57,.35),

            0 0 45px rgba(15,76,129,.22);

    }

    100%{

        box-shadow:

            0 0 10px rgba(214,40,57,.18);

    }

}

/*==============================================================
    LIVE STATUS DOT
==============================================================*/

@keyframes livePulse{

    0%{

        transform:scale(.9);

        opacity:.7;

    }

    50%{

        transform:scale(1.35);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.7;

    }

}

/*==============================================================
    FOOTER GLOW
==============================================================*/

@keyframes footerGlow{

    0%{

        transform:

            translateY(0)

            scale(1);

    }

    50%{

        transform:

            translateY(-20px)

            scale(1.08);

    }

    100%{

        transform:

            translateY(0)

            scale(1);

    }

}




@keyframes accountLoader{

    0%,
    80%,
    100%{

        transform:scale(.65);

        opacity:.45;

    }

    40%{

        transform:scale(1);

        opacity:1;

    }

}