* {
    margin: 0;
    box-sizing: border-box;
}

:root {
    --width-sun: 50px;
}

body {
    height: 100vh;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
}

.figure {
    width: 50vh;
    height: 50vh; 
    background-color: cyan;
    border-radius: 50%;
    overflow: hidden;
}

.figure {
    position: relative;
    animation: figure-animation 3s ease-in-out infinite;
}

.sun {
    position: absolute;
    width: var(--width-sun);
    height: var(--width-sun);
    left: 50%;
    top: 8%;
    border-radius: 50%;
    background-color: #ffef00;
    transform-origin: 10% 608%;
    transform: rotate(-25deg);
    animation: sun-animation 3s cubic-bezier(1, 0.20, 0.60, 0.4) forwards infinite;
}

.arena {
    position: absolute;
    background-color: #eedc74;
    bottom: 0;
    top: 60%;
    width: 100%;
    z-index: 5;
}

.pyramid-left {
    position: absolute;
    left: 15.48%;
    clip-path: polygon(74% 5%, 0 100%, 100% 100%);
    height: 125px;
    width: 188px;
    top: 30%;
    animation: pyramid-left-animation infinite 3s cubic-bezier(1, 0.20, 0.60, 0.4);
    background: #fff;
}
.pyramid-right {
    position: absolute;
    left: 49%;
    clip-path: polygon(-2% 3%, 33% 100%, 100% 100%);
    ;
    height: 125px;
    width: 150px;
    top: 30%;
    background-color: #fff;
    animation: pyramid-right-animation infinite 3s cubic-bezier(1, 0.20, 0.60, 0.4);
    z-index: 2;
}

.shadow {
    position: absolute;
    left: 15%;
    clip-path: polygon(100% 40%, 1% 100%, 84% 99%);
    height: 120px;
    width: 100%;
    top: 60%;
    background-color: rgba(51, 51, 51, 0.582);
    animation: shadow-animation infinite 3s cubic-bezier(0.4, 0, 0.49, 1);
    z-index: 6;

}

@keyframes figure-animation {
    0% {
        opacity: 0.05;
    }
    
    13% {
        opacity: 1;

    }
     
    30% {
        opacity: 1;
    }

    50% {

        opacity: 0.94;
    }
    
    88% {
        opacity: 0.85;
    }
    
    100% {
        opacity: 0;
        background-color: #333;
    }
    
}

@keyframes sun-animation {
    0% {
        transform: rotate(-60deg);
    }

    30% {
        transform: rotate(-15deg);
    }
    
    100% {
        transform: rotate(60deg);
    }
}

@keyframes pyramid-right-animation {
    0% {
        background-color: #eee
    }

    25% {
        background-color: #ddd;
    }
    
    50% {
        background-color: #d4d4d4;
    }

    80% {
        background-color: #eee;
    }

    /* 100% {
        background-color: ;
    } */
}

@keyframes pyramid-left-animation {
    0% {
        background-color: rgb(255, 255, 255);
    }
    
    25% {
        background-color: #ddd;
    }
    
    83% {
        background-color: #aaa;
    }

    93% {
        background-color: #ddd;

    }
    
    100% {
        background-color: #ddd;
    }
}

@keyframes shadow-animation {
    0% {
        clip-path: polygon(0 0, 100% 24%, 70.5% 0);
    }
    
    5.5% {
        clip-path:polygon(0 0, 73% 23%, 70.5% 0);
    }
    
    50% {
        clip-path: polygon(0 0, 36% 37%, 70.5% 0);
    }
    
    100% {
        clip-path: polygon(0 0, 0 47%, 70.5% 0);
    }
}