svg * {
    transform-origin: 50% 50%;
    /* transition: all 0.5s; */
}
/* 
svg *:hover  {
    animation-play-state: paused;
} */

svg {
    overflow: visible;
}

.window svg {
    margin: var(--spacing);

}

:root {
    --duration: 3s
}

.block-1-top {
    transform-origin: 30% 10%;

    animation: block-1 var(--duration) ease infinite;
}

@keyframes block-1 {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(170px, 0) rotate(0deg);
    }
    35% {
        transform: translate(170px, 0) rotate(60deg);
    }
    60% {
        transform: translate(170px, 0) rotate(60deg);
    }
    70% {
        transform: translate(0, 0);
    }
}

.block-1-bottom-left {
    animation: shove-in-left var(--duration) ease infinite;

}

@keyframes shove-in-left {
    0% {
        transform: rotate(0);
    }
    25% {
        transform: translateX(72px);
    }
    60% {
        transform: translateX(72px);
    }
    70% {
        transform: translateY(0);
    }
}

.block-1-bottom-right {
    animation: shove-in-right var(--duration) ease infinite;

}

@keyframes shove-in-right {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-72px);
    }
    60% {
        transform: translateX(-72px);
    }
    70% {
        transform: translateY(0);
    }
}

.block-1-rotate-left {
    transform-origin: 25% 80%;
    animation: block-1-rotate-left var(--duration) ease infinite;
}

@keyframes block-1-rotate-left {
    10% {
        transform: rotate(0);
    }
    21% {
        transform: rotate(-90deg);
    }
    60% {
        transform: rotate(-90deg);
    }
    65% {
        transform: rotate(0);
    }
}

.block-1-rotate-right {
    transform-origin: 75% 80%;
    animation: block-1-rotate-right var(--duration) ease infinite;
}

@keyframes block-1-rotate-right {
    10% {
        transform: rotate(0);
    }
    30% {
        transform: rotate(90deg);
    }
    60% {
        transform: rotate(90deg);
    }
    65% {
        transform: rotate(0);
    }
}

.block-1-sail-left {
    animation: sail-in-left var(--duration) ease infinite;

}

@keyframes sail-in-left {
    0% {
        transform: translateX(0);
    }
    21% {
        transform: translateX(44px);
    }
    60% {
        transform: translateX(44px);
    }
    70% {
        transform: translateX(0);
    }
}

.block-1-sail-right {
    animation: sail-in-right var(--duration) ease infinite;

}

@keyframes sail-in-right {
    0% {
        transform: translateX(0);
    }
    22% {
        transform: translateX(-100px);
    }
    60% {
        transform: translateX(-100px);
    }
    70% {
        transform: translateX(0);
    }
}



/* BLOCK 2 */

.block-2-move-left {
    animation: block-2-move-left var(--duration) ease infinite;
}

@keyframes block-2-move-left {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-78px);
    }
    60% {
        transform: translateX(-78px);
    }
    70% {
        transform: translateX(0);
    }
}

.block-2-move-right {
    animation: block-2-move-right var(--duration) ease infinite;
}

@keyframes block-2-move-right {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(78px);
    }
    60% {
        transform: translateX(78px);
    }
    70% {
        transform: translateX(0);
    }
}


.block-2-move {
    animation: block-2-move var(--duration) ease infinite;

}

@keyframes block-2-move {
    0% {
        transform: translateX(0);
    }
    12% {
        transform: translateX(86px);
    }
    60% {
        transform: translateX(86px);
    }
    70% {
        transform: translateX(0);
    }
}

/* Block 3 */

.block-3-left {
    animation: block-3-left var(--duration) ease infinite;
}

@keyframes block-3-left {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-78px);
    }
    60% {
        transform: translateX(-78px);
    }
    70% {
        transform: translateX(0);
    }
}

.block-3-right {
    animation: block-3-right var(--duration) ease infinite;
}

@keyframes block-3-right {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(78px);
    }
    60% {
        transform: translateX(78px);
    }
    70% {
        transform: translateX(0);
    }
}

.block-3-ball {
    animation: block-3-ball var(--duration) ease infinite;
}

@keyframes block-3-ball {
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(155px);
    }
    50% {
        transform: translateY(155px);
    }
    60% {
        transform: translateY(0);
    }
}