@keyframes cien_l {
    0% {
        clip-path: polygon(
            calc(175px + var(--pos-x)) calc(325px + var(--pos-y) - var(--pos-z)), 
            calc(175px + var(--pos-x)) calc(225px + var(--pos-y) - var(--pos-z)), 
            calc(225px + var(--pos-x)) calc(225px + var(--pos-y) - var(--pos-z)), 
            calc(225px + var(--pos-x)) calc(325px + var(--pos-y) - var(--pos-z))
        );  
        animation-timing-function: ease-in;
    }
    3% {
        clip-path: polygon(
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z)), 
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z)), 
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z)), 
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z))
        );   
        animation-timing-function: ease-in;
    }
    20% {
       clip-path: polygon(
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z) - var(--ani-hei)), 
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z) - var(--ani-hei)), 
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z) - var(--ani-hei)), 
            calc(175px + var(--pos-x)) calc(275px + var(--pos-y) - var(--pos-z) - var(--ani-hei))
        );  
    }
    23% {
        clip-path: polygon(
            calc(175px + var(--pos-x)) calc(325px + var(--pos-y) - var(--pos-z) - var(--ani-hei)), 
            calc(175px + var(--pos-x)) calc(225px + var(--pos-y) - var(--pos-z) - var(--ani-hei)), 
            calc(225px + var(--pos-x)) calc(225px + var(--pos-y) - var(--pos-z) - var(--ani-hei)), 
            calc(225px + var(--pos-x)) calc(325px + var(--pos-y) - var(--pos-z) - var(--ani-hei))
        );   
        animation-timing-function: ease-in;
    }
    30% {
        clip-path: polygon(
            calc(175px + var(--pos-x)) calc(325px + var(--pos-y) - var(--pos-z)), 
            calc(175px + var(--pos-x)) calc(225px + var(--pos-y) - var(--pos-z)), 
            calc(225px + var(--pos-x)) calc(225px + var(--pos-y) - var(--pos-z)), 
            calc(225px + var(--pos-x)) calc(325px + var(--pos-y) - var(--pos-z))
        );  
        animation-timing-function: ease-in;
    }
    100% {
        animation-timing-function: ease-in;
    }
}

.cl1, .cl2, .cl3 {
    animation-iteration-count: infinite;
    animation-duration: 15s;
    animation-name: cien_l;
}

.cl1-1 {
    --pos-x: var(--b1-pos-x);
    --pos-y: var(--b1-pos-z);
    --pos-z: calc(var(--b1-pos-y) + 125px);
    
    animation-delay: 0.25s;
}

.cl1-2 {
    --pos-x: var(--b2-pos-x);
    --pos-y: var(--b2-pos-z);
    --pos-z: calc(var(--b2-pos-y) + 125px);
    
    animation-delay: 0.5s;
}

.cl1-3 {
    --pos-x: var(--b3-pos-x);
    --pos-y: var(--b3-pos-z);
    --pos-z: calc(var(--b3-pos-y) + 125px);
    
    animation-delay: 0.75s;
}

.cl1-4 {
    --pos-x: var(--b4-pos-x);
    --pos-y: var(--b4-pos-z);
    --pos-z: calc(var(--b4-pos-y) + 125px);
    
    animation-delay: 1s;
}

.cl1-5 {
    --pos-x: var(--b5-pos-x);
    --pos-y: var(--b5-pos-z);
    --pos-z: calc(var(--b5-pos-y) + 125px);
    
    animation-delay: 1.25s;
}

.cl1-6 {
    --pos-x: var(--b6-pos-x);
    --pos-y: var(--b6-pos-z);
    --pos-z: calc(var(--b6-pos-y) + 125px);
    
    animation-delay: 1.5s;
}

.cl1-7 {
    --pos-x: var(--b7-pos-x);
    --pos-y: var(--b7-pos-z);
    --pos-z: calc(var(--b7-pos-y) + 125px);
    
    animation-delay: 1.75s;
}

.cl1-8 {
    --pos-x: var(--b8-pos-x);
    --pos-y: var(--b8-pos-z);
    --pos-z: calc(var(--b8-pos-y) + 125px);
    
    animation-delay: 2s;
}

.cl1-9 {
    --pos-x: var(--b9-pos-x);
    --pos-y: var(--b9-pos-z);
    --pos-z: calc(var(--b9-pos-y) + 125px);
    
    animation-delay: 2.25s;
}

.cl1-10 {
    --pos-x: var(--b10-pos-x);
    --pos-y: var(--b10-pos-z);
    --pos-z: calc(var(--b10-pos-y) + 125px);
    
    animation-delay: 2.5s;
}

.cl1-11 {
    --pos-x: var(--b11-pos-x);
    --pos-y: var(--b11-pos-z);
    --pos-z: calc(var(--b11-pos-y) + 125px);
    
    animation-delay: 2.75s;
}

.cl1-12 {
    --pos-x: var(--b12-pos-x);
    --pos-y: var(--b12-pos-z);
    --pos-z: calc(var(--b12-pos-y) + 125px);
    
    animation-delay: 3s;
}

.cl1-13 {
    --pos-x: var(--b13-pos-x);
    --pos-y: var(--b13-pos-z);
    --pos-z: calc(var(--b13-pos-y) + 125px);
    
    animation-delay: 3.25s;
}

.cl1-14 {
    --pos-x: var(--b14-pos-x);
    --pos-y: var(--b14-pos-z);
    --pos-z: calc(var(--b14-pos-y) + 125px);
    
    animation-delay: 3.5s;
}