/* circles */


#circle-container #circle-1 {
    transform: perspective(1200px) rotateX(70deg) rotateY(0deg) rotateZ(0deg)
    translateX(15px) translateY(190px) translateZ(20px) ;
}

#circle-container #circle-2 {
    transform: perspective(1200px) rotateX(40deg) rotateY(0deg) rotateZ(0deg)
    translateX(15px) translateY(20px) translateZ(0px) ;
}

#circle-container #circle-3 {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    translateX(23px) translateY(5px) translateZ(0px) ;
}

#circle-1 img {

    animation: reverseRotateAnimation 20s infinite 0s linear;
}

#circle-2 img {
    animation: rotateAnimation 10s infinite 0s linear;
}

#circle-3 img {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    translateX(8px) translateY(8px) translateZ(50px) ;
}


@keyframes rotateAnimation{
    0%{
        transform: rotate(0deg);
        }
    100%{
        transform: rotate(360deg);
        }
}

@keyframes reverseRotateAnimation{
    0%{
        transform: rotate(360deg);
        }
    100%{
        transform: rotate(0deg);
        }
}



/*
@keyframes depthAnimation1{
    0%{
        }
    100%{
        transform: translateX(10px) translateY(3%) skewY(-10deg);
        }
}

@keyframes depthAnimation2{
    0%{
        }
    100%{
        transform: translateX(5px) translateY(-1%) skewY(-10deg);
        }
}

@keyframes depthAnimation3{
    0%{
        }
    100%{
        transform: translateX(-2px) translateY(-6%) skewY(-10deg);
        }
}

*/


/* cta*/

#cta {
    animation: ctaAnimation 0.5s forwards 0s ease-in-out;
}

@keyframes ctaAnimation{
    0%{
        transform: translateX(-30px);
        opacity: 0;
        }
    80%{
        transform:  translateX(25px);
        opacity: 1;
        }
    100%{
        transform:  translateX(20px);
        }
}


/* rocket animation*/

/**/
 .list-item:hover .rocket-container  { animation: rocketMove 1.5s infinite 0s ease-in-out; }


.list-item:hover .rocket-container img{ animation: rocketShake 0.15s infinite 0s ease-in-out; }

@keyframes rocketShake{
    0%{
        transform: rotate(0deg);
        }
    31%{
        transform: rotate(-2deg);
        }
    64%{
        transform: rotate(0deg);
        }
    100%{
        transform: rotate(2deg);
        }
}

@keyframes rocketMove{
    0%{
        transform: rotate(0deg) translateX(-5px);
        
        }
    89%{
        transform: rotate(0deg) translateX(-20px);
        }
    100%{
        transform: rotate(0deg) translateX(-5px);
        }
}