@keyframes circle01 {
    0% {
        transform: translate(0, 0);
    }

    35% {
        transform: translate(-50px, -20px);
    }

    65% {
        transform: translate(20px, 50px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes tri01 {
    0% {
        transform: translate(0, 0);
    }

    35% {
        transform: translate(-50px, -20px);
    }

    65% {
        transform: translate(20px, 50px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes tri02 {
    0% {
        transform: translateX(-80%);
    }

    35% {
        transform: translate(calc(-80% - 2rem), -3rem);
    }

    100% {
        transform: translateX(-80%);
    }
}

@keyframes circle02 {

    0%,
        100% {
            border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
            transform: translate(80%, 0);
        }

        14% {
            border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
            transform: translate(calc(80% + 2rem), 2rem);
        }

        28% {
            border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
            transform: translate(calc(80% - 2rem), -2rem);
        }

        42% {
            border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
        }

        56% {
            border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
        }

        70% {
            border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
            
        }

        84% {
            border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
            transform: translate(calc(80% - 2rem), 2rem);
        }
}

@keyframes vol04 {
    0% {
        transform: translate(0, 0);
    }

    15% {
        transform: translate(2rem, 2rem) rotate(180deg);
    }

    20% {
        transform: translate(1rem, 1rem) rotate(360deg);
    }

    65% {
        transform: translate(-2rem, -1rem);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes vol05 {
    0% {
        transform: scale(0.6);
    }

    35% {
        transform: scale(1.3) rotate(120deg);
    }

    65% {
        transform: scale(0.8) rotate(180deg);
    }

    100% {
        transform: scale(0.6);
    }
}

@keyframes vol06 {
    0% {
        transform: scale(0.6);
    }

    35% {
        transform: scale(1.3) rotate(120deg);
    }

    65% {
        transform: scale(0.8) rotate(180deg);
    }

    100% {
        transform: scale(0.6);
    }
}

@keyframes circleZebra {

    0%,
    100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
}

@keyframes vol07Circle {

    0%,
    100% {
        border-radius: 70% 37% 54% 46%/55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
}

@keyframes vol08Circle {

    0%,
    100% {
        border-radius: 80% 37% 54% 46%/55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }

    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }
}

@keyframes path {
    0% {
        translate: calc(100% + 3rem) 0;
    }

    10% {
        translate: 3rem 0;
    }

    100% {
        translate: calc(100% + 3rem) 0;
    }

}

@media screen and (max-width: 768px) {
    @keyframes circle01 {
        0% {
            transform: translate(0, 0);
        }

        35% {
            transform: translate(-50px, -20px);
        }

        65% {
            transform: translate(20px, 50px);
        }

        100% {
            transform: translate(0, 0);
        }
    }

    @keyframes tri01 {
        0% {
            transform: translate(0, 0);
        }

        35% {
            transform: translate(-50px, -20px);
        }

        65% {
            transform: translate(20px, 50px);
        }

        100% {
            transform: translate(0, 0);
        }
    }

    @keyframes tri02 {
        0% {
            transform: translateX(-80%) rotate(0);
        }
        15% {
            transform: translate(calc(-80% + 1rem), 3rem) rotate(120deg);
        }
        75% {
            transform: translate(calc(-80% - 1rem), -3rem) rotate(360deg);
        }
        
    
        100% {
            transform: translateX(-80%) rotate(0);
        }
    }
    
    @keyframes circle02 {
    
        0%,
            100% {
                border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
                transform: translateX(80%);
            }
    
            
    
            /* 28% {
                border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
                transform: translate(calc(80% + 4rem), -5rem);
            } */
    
            42% {
                border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
                transform: translate(calc(60% + 3rem), -4rem);
                
            }
    
            56% {
                border-radius: 63% 39% 67% 33%/70% 50% 50% 30%;
                
            }
    
            86% {
                border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
                transform: translate(calc(40% - 5rem), 3rem);
            }
    }

    @keyframes vol04 {
        0% {
            transform: translate(0, 0);
        }

        15% {
            transform: translate(2rem, 2rem) rotate(180deg);
        }

        20% {
            transform: translate(1rem, 1rem) rotate(360deg);
        }

        65% {
            transform: translate(-2rem, -1rem);
        }

        100% {
            transform: translate(0, 0);
        }
    }

    @keyframes vol05 {
        0% {
            transform: scale(0.6);
        }

        35% {
            transform: scale(1.3) rotate(120deg);
        }

        65% {
            transform: scale(0.8) rotate(180deg);
        }

        100% {
            transform: scale(0.6);
        }
    }

    @keyframes vol06 {
        0% {
            transform: scale(0.6);
        }

        35% {
            transform: scale(1.3) rotate(120deg);
        }

        65% {
            transform: scale(0.8) rotate(180deg);
        }

        100% {
            transform: scale(0.6);
        }
    }

    @keyframes circleZebra {

        0%,
        100% {
            border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
        }

        14% {
            border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
        }

        28% {
            border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
        }

        42% {
            border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
        }

        56% {
            border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
        }

        70% {
            border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
        }

        84% {
            border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
        }
    }

    @keyframes vol07Circle {

        0%,
        100% {
            border-radius: 70% 37% 54% 46%/55% 48% 52% 45%;
        }

        14% {
            border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
        }

        28% {
            border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
        }

        42% {
            border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
        }

        56% {
            border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
        }

        70% {
            border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
        }

        84% {
            border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
        }
    }

    @keyframes vol08Circle {

        0%,
        100% {
            border-radius: 80% 37% 54% 46%/55% 48% 52% 45%;
        }

        14% {
            border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
        }

        56% {
            border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
        }

        70% {
            border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
        }

        84% {
            border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
        }
    }

    @keyframes path {
        0% {
            transform-origin: left bottom;
        }

        100% {
            transform-origin: right top;
        }

        0%,
        100% {
            transform: scaleX(0);
        }

        70% {
            transform: scaleX(1.3);
        }

    }
}