/* INFINITE */

@keyframes spin {
    0%{ rotate: 0; }
    100%{ rotate: 360deg; }
}

@keyframes flottement {
    0%, 50%, 100% { transform: translateY(0); }
    25%{ transform: translateY(10px); }
    75%{ transform: translateY(-10px); }
}

@keyframes gradientMove{
    0%, 50%, 100%{
        background-position: center center;
    }

    25%{
        background-position: center bottom;
    }

    75%{
        background-position: center top;
    }
}

/* ON LOAD */

@keyframes slideAndFadeFromBotToTop {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes openModal {
    0%{
        transform: translateX(100%);
    }

    100%{
        transform: translateX(0);
    }
}


/* ON ACTIONS */

.simuClic{
    transition: transform 0.1s ease;
}

.simuClic:active{
    transform: scale(0.95);
}

/* FOR PLANET */

@keyframes planetPoint1 {
    0%{
        opacity: 0;
        top: 147px;
        left: 59px;
    }

    50%{
        opacity: 1;
    }

    100%{
        opacity: 0;
        top: 111px;
        left: 62px;
    }
}


@keyframes planetPoint2 {
    0%{
        opacity: 0;
        top: 51px;
        left: 39px;
    }

    50%{
        opacity: 1;
    }

    100%{
        opacity: 0;
        top: 39px;
        left: 98px;
    }
}

@keyframes planetPoint3 {
    0%{
        opacity: 0;
        top: 54px;
        left: 161px;
    }

    20%{
        top: 68px;
        left: 167px;
    }

    40%{
        top: 82px;
        left: 172px;
    }

    50%{
        opacity: 1;
    }

    60%{
        top: 95px;
        left: 175px;
    }

    80%{
        top: 115px;
        left: 180px;
    }

    100%{
        opacity: 0;
        top: 135px;
        left: 182px;
    }
}

@keyframes planetPoint4 {
    0%{
        opacity: 0;
        top: 142px;
        left: 117px;
    }

    20%{
        top: 148px;
        left: 122px;
    }

    40%{
        top: 155px;
        left: 124px;
    }

    50%{
        opacity: 1;
    }

    60%{
        top: 162px;
        left: 126px;
    }

    80%{
        top: 169px;
        left: 126px;
    }

    100%{
        opacity: 0;
        top: 177px;
        left: 127px;
    }
}

@keyframes vagueNavBar {
    0% {
        d: path("M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z");
    }

    100% {
        d: path("M985.66,92.83C906,92,820,85,740,80c-85-6-170,0-250,15-60,12-120,25-180,30A600.21,600.21,0,0,1,0,27.35V120H1200V100C1130,110,1060,100,985.66,92.83Z");
    }
}

@keyframes vagueNavBar2 {
    0% {
        left: 0;
    }

    100% {
        left: -40%;
    }
}