/*==========================================================
YAYA SPORTS
Animations
==========================================================*/


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



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

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/*============================
Zoom In
============================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.6);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}



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

@keyframes glow{

    0%{

        filter:drop-shadow(0 0 10px rgba(255,212,0,.2));

    }

    50%{

        filter:drop-shadow(0 0 35px rgba(255,212,0,.8));

    }

    100%{

        filter:drop-shadow(0 0 10px rgba(255,212,0,.2));

    }

}



/*============================
Button Pulse
============================*/

@keyframes pulse{

    0%{

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

    }

    70%{

        box-shadow:0 0 0 22px rgba(255,212,0,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,212,0,0);

    }

}



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

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*============================
Background Moving
============================*/

@keyframes bgMove{

    0%{

        background-position:center top;

    }

    50%{

        background-position:center center;

    }

    100%{

        background-position:center bottom;

    }

}



/*============================
Text Shine
============================*/

@keyframes textShine{

    0%{

        background-position:-200%;

    }

    100%{

        background-position:200%;

    }

}



/*============================
Blink
============================*/

@keyframes blink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.3;

    }

}



/*============================
Loader
============================*/

@keyframes loaderHide{

    0%{

        opacity:1;

        visibility:visible;

    }

    100%{

        opacity:0;

        visibility:hidden;

    }

}



/*============================
Hero
============================*/

.logo{

    animation:

    zoomIn 1.2s ease,

    floating 5s ease-in-out infinite,

    glow 3s infinite;

}


.company{

    animation:

    fadeDown 1.4s ease;

}


.hero h1{

    animation:

    fadeUp 1.6s ease;

}


.hero p{

    animation:

    fadeUp 1.8s ease;

}




.btn{

    animation:

    fadeUp 2.2s ease,

    pulse 2.5s infinite;

}


.social{

    animation:

    fadeUp 2.4s ease;

}


footer{

    animation:

    fadeUp 2.8s ease;

}