#digiball {
animation: throwing;
animation-duration: 9s; 
animation-fill-mode: forwards;
animation-iteration-count: infinite;
width: 150px;
animation: throwing 3s infinite ease-in-out;
}

@keyframes throwing{
    
    0%{
        transform: translateX(0px) rotate(360deg);
    }
    48%{
        transform: translateX(600px) 
    }
    50%{
       transform: translateX(600px) 
    }
    98%{
        transform: translateX(0px) rotate(360deg);
    }
    100%{
        transform: translateX(0px) rotate(360deg);
    }
}

img{
    transition: opacity 500ms;
}
img :hover{
    opacity: 1;
}
figure{
position: relative;
}
.bottom-image{
    position: absolute;
}
figure img{
    
    top: 0;
    left: 0;
}

figure .visible{
    opacity: 1;
}

figure .hidden {
    opacity: 0;
}

 figure:hover .hidden{
    opacity: 1;
 }

figure:hover .visible{
    opacity: 0;
}

#platform{
    width: 200px;
    height: 350px;
    background-color: rgb(234, 39, 39);
    transform:  translate(100px)  rotateX(55deg) rotateZ(45deg);
    transform-style: preserve-3d;
    border-radius: 16px;
    box-shadow: 1px 2px 10px rgba(208, 31, 28, 0.95), 44px 44px 24px rgba(204, 204, 204, 0.25);
    transition: 0.5s ease-in-out transform, 0.5s ease-in-out box-shadow;
}

#platform:hover{
 transform: translateX(100px) translateY(-24px) rotateX(55dge) rotateZ(45deg);
 box-shadow: 1px 2px 10px rgba(17, 16, 16, 0.95),
    70px 67px 24px rgba(2, 2, 2, 0.75);
}