/* CSS RESET */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* VARIABLES */
:root {
    /* COLORS */
    --BGCOLOR: #111;
    --COLOR: whitesmoke;
    --VCOS-COLOR: whitesmoke;

    /* VCOS ANIMATION */
    --A: 15vw; /* length of lines og150px*/
    --B: 3vw; /* width of lines og20px*/
    --C: calc(var(--B) / 2); /* border-radius of lines */
    --D: calc(
        var(--B) / 2 - calc(var(--C) / 7)
    ); /* this offset aligns the curves at joints */
    --T: 60deg; /* angle of slanted lines */

    --CONT-H: 100vh; /* height of container */
    --CONT-W: 100vw; /* width of container */

    /* standard positions */
    /* --TOP: calc(calc(var(--CONT-H) / -2) - var(--A));
    --BOTTOM: calc(calc(var(--CONT-H) / 2) + var(--A));
    --LEFT: calc(calc(var(--CONT-W) / -2) - calc(2.5 * var(--A)));
    --RIGHT: calc(calc(var(--CONT-W) / 2) + calc(2.5 * var(--A)));
    --SLANT-OFF: calc(var(--BOTTOM) / (tan(60deg))); */
    --TOP: calc(-1 * var(--CONT-H));
    --BOTTOM: calc(1 * var(--CONT-H));
    --LEFT: calc(-1 * var(--CONT-W));
    --RIGHT: calc(1 * var(--CONT-W));
    --SLANT-OFF: calc(var(--BOTTOM) / (tan(60deg)));

    --SLOW-H-OFF: calc(0.2 * var(--A));
    --SLOW-V-OFF: calc(0.2 * var(--A));

    --ANIM-DEFAULTS: 4s linear infinite;
}

/* GENERAL STYLES */
html {
    background-color: var(--BGCOLOR);
}

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

/* VCOS ANIMATION */

.vcos__container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: var(--CONT-W);
    height: var(--CONT-H);
    overflow: hidden;
}

.vcos {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: calc(10 / 3 * var(--A));
    height: var(--A);
    transform: translate(
        calc(-0.5 * var(--A)),
        calc(0.5 * var(--A) - var(--D))
    );
}

.vcos__lines {
    background-color: var(--VCOS-COLOR);
    width: var(--A);
    height: var(--B);
    border-radius: var(--C);
    transform-origin: var(--D);
    position: absolute;
    z-index: -1;
    box-shadow: rgba(72, 135, 202, 0.8) 0 0 4.688vw 1.719vw;
    /* 90px -> 4.688vw | 33px -> 1.719vw */
}

.vcos__v .vcos__lines:nth-child(1) {
    transform: translate(calc(var(--A) * 0.15), 0)
        rotate(calc(180deg + var(--T))) scaleX(calc(1 / sin(var(--T))));
    animation: vcos_v_1_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_v_1_keys {
    0% {
        transform: translate(
                calc(var(--SLANT-OFF) + calc(var(--A) * 0.15)),
                var(--BOTTOM)
            )
            rotate(calc(180deg + var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
    25% {
        transform: translate(
                calc(var(--SLOW-V-OFF) / (tan(60deg)) + var(--A) * 0.15),
                calc(1 * var(--SLOW-V-OFF))
            )
            rotate(calc(180deg + var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
    75% {
        transform: translate(
                calc(-1 * var(--SLOW-V-OFF) / (tan(60deg)) + var(--A) * 0.15),
                calc(-1 * var(--SLOW-V-OFF))
            )
            rotate(calc(180deg + var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
    100% {
        transform: translate(
                calc(-1 * var(--SLANT-OFF) + calc(var(--A) * 0.15)),
                var(--TOP)
            )
            rotate(calc(180deg + var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
}

.vcos__v .vcos__lines:nth-child(2) {
    transform: translate(calc(var(--A) * 0.15), 0) rotate(calc(-1 * var(--T)))
        scaleX(calc(1 / sin(var(--T))));
    animation: vcos_v_2_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_v_2_keys {
    0% {
        transform: translate(
                calc(var(--SLANT-OFF) + calc(var(--A) * 0.15)),
                var(--TOP)
            )
            rotate(calc(-1 * var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
    25% {
        transform: translate(
                calc(var(--SLOW-V-OFF) / tan(60deg) + var(--A) * 0.15),
                calc(-1 * var(--SLOW-V-OFF))
            )
            rotate(calc(-1 * var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
    75% {
        transform: translate(
                calc(-1 * var(--SLOW-V-OFF) / tan(60deg) + var(--A) * 0.15),
                calc(1 * var(--SLOW-V-OFF))
            )
            rotate(calc(-1 * var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
    100% {
        transform: translate(
                calc(-1 * var(--SLANT-OFF) + calc(var(--A) * 0.15)),
                var(--BOTTOM)
            )
            rotate(calc(-1 * var(--T))) scaleX(calc(1 / sin(var(--T))));
    }
}

.vcos__c .vcos__lines:nth-child(1) {
    transform: scaleX(0.8);
    animation: vcos_c_1_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_c_1_keys {
    0% {
        transform: translate(var(--RIGHT), 0);
    }
    25% {
        transform: translate(calc(1 * var(--SLOW-H-OFF)), 0) scaleX(0.8);
    }
    75% {
        transform: translate(calc(-1 * var(--SLOW-H-OFF)), 0) scaleX(0.8);
    }
    100% {
        transform: translate(calc(2 * var(--LEFT)), 0);
    }
}

.vcos__c .vcos__lines:nth-child(2) {
    transform: rotate(-90deg);
    animation: vcos_c_2_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_c_2_keys {
    0% {
        transform: translate(0, var(--BOTTOM)) rotate(-90deg);
    }
    25% {
        transform: translate(0, calc(1 * var(--SLOW-V-OFF))) rotate(-90deg);
    }
    75% {
        transform: translate(0, calc(-1 * var(--SLOW-V-OFF))) rotate(-90deg);
    }
    100% {
        transform: translate(0, var(--TOP)) rotate(-90deg);
    }
}

.vcos__c .vcos__lines:nth-child(3) {
    transform: translate(0, calc(calc(-1 * var(--A)) + calc(var(--D) * 2)))
        scaleX(0.8);
    animation: vcos_c_3_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_c_3_keys {
    0% {
        transform: translate(
                calc(2 * var(--LEFT)),
                calc(calc(-1 * var(--A)) + calc(var(--D) * 2))
            )
            scaleX(0.8);
    }
    25% {
        transform: translate(
                calc(-1 * var(--SLOW-H-OFF)),
                calc(calc(-1 * var(--A)) + calc(var(--D) * 2))
            )
            scaleX(0.8);
    }
    75% {
        transform: translate(
                calc(1 * var(--SLOW-H-OFF)),
                calc(calc(-1 * var(--A)) + calc(var(--D) * 2))
            )
            scaleX(0.8);
    }
    100% {
        transform: translate(
                var(--RIGHT),
                calc(calc(-1 * var(--A)) + calc(var(--D) * 2))
            )
            scaleX(0.8);
    }
}

.vcos__o .vcos__lines:nth-child(1) {
    transform: scale(1);
    animation: vcos_o_1_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_o_1_keys {
    0% {
        transform: translate(calc(1.5 * var(--RIGHT)), 0) scale(1);
    }
    25% {
        transform: translate(calc(1 * var(--SLOW-H-OFF)), 0);
    }
    75% {
        transform: translate(calc(-1 * var(--SLOW-H-OFF)), 0);
    }
    100% {
        transform: translate(calc(1.5 * var(--LEFT)), 0) scale(1);
    }
}

.vcos__o .vcos__lines:nth-child(2) {
    transform: rotate(-90deg);
    animation: vcos_o_2_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_o_2_keys {
    0% {
        transform: translate(0, var(--TOP)) rotate(-90deg);
    }
    25% {
        transform: translate(0, calc(-1 * var(--SLOW-V-OFF))) rotate(-90deg);
    }
    75% {
        transform: translate(0, calc(1 * var(--SLOW-V-OFF))) rotate(-90deg);
    }
    100% {
        transform: translate(0, var(--BOTTOM)) rotate(-90deg);
    }
}

.vcos__o .vcos__lines:nth-child(3) {
    transform: translate(0, calc(calc(-1 * var(--A)) + calc(var(--D) * 2)));
    animation: vcos_o_3_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_o_3_keys {
    0% {
        transform: translate(
            calc(1.5 * var(--LEFT)),
            calc(calc(-1 * var(--A)) + calc(var(--D) * 2))
        );
    }
    25% {
        transform: translate(
            calc(-1 * var(--SLOW-H-OFF)),
            calc(-1 * var(--A) + 2 * var(--D))
        );
    }
    75% {
        transform: translate(
            calc(1 * var(--SLOW-H-OFF)),
            calc(-1 * var(--A) + 2 * var(--D))
        );
    }
    100% {
        transform: translate(
            calc(1.5 * var(--RIGHT)),
            calc(calc(-1 * var(--A)) + calc(var(--D) * 2))
        );
    }
}

.vcos__o .vcos__lines:nth-child(4) {
    transform: translate(calc(var(--A) - calc(var(--D) * 2)), 0) rotate(-90deg);
    animation: vcos_o_4_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_o_4_keys {
    0% {
        transform: translate(calc(var(--A) - calc(var(--D) * 2)), var(--BOTTOM))
            rotate(-90deg);
    }
    25% {
        transform: translate(
                calc(var(--A) - calc(var(--D) * 2)),
                calc(1 * var(--SLOW-V-OFF))
            )
            rotate(-90deg);
    }
    75% {
        transform: translate(
                calc(var(--A) - calc(var(--D) * 2)),
                calc(-1 * var(--SLOW-V-OFF))
            )
            rotate(-90deg);
    }
    100% {
        transform: translate(calc(var(--A) - calc(var(--D) * 2)), var(--TOP))
            rotate(-90deg);
    }
}

.vcos__s .vcos__lines:nth-child(1) {
    transform-origin: calc(var(--A) - var(--D));
    transform: scaleX(0.8);
    animation: vcos_s_1_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_s_1_keys {
    0% {
        transform: translate(calc(2 * var(--RIGHT)), 0) scaleX(0.8);
    }
    25% {
        transform: translate(calc(1 * var(--SLOW-H-OFF))) scaleX(0.8);
    }
    75% {
        transform: translate(calc(-1 * var(--SLOW-H-OFF))) scaleX(0.8);
    }
    100% {
        transform: translate(var(--LEFT), 0) scaleX(0.8);
    }
}

.vcos__s .vcos__lines:nth-child(2) {
    transform-origin: calc(var(--A) - var(--D));
    transform: rotate(var(--T)) scaleX(calc(1 / sin(var(--T))));
    animation: vcos_s_2_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_s_2_keys {
    0% {
        transform: translate(calc(-1 * var(--SLANT-OFF)), var(--TOP))
            rotate(var(--T)) scaleX(calc(1 / sin(var(--T))));
    }
    25% {
        transform: translate(
                calc(-1 * var(--SLOW-V-OFF) / tan(60deg)),
                calc(-1 * var(--SLOW-V-OFF))
            )
            rotate(var(--T)) scaleX(calc(1 / sin(var(--T))));
    }
    75% {
        transform: translate(
                calc(var(--SLOW-V-OFF) / tan(60deg)),
                calc(var(--SLOW-V-OFF))
            )
            rotate(var(--T)) scaleX(calc(1 / sin(var(--T))));
    }
    100% {
        transform: translate(var(--SLANT-OFF), var(--BOTTOM)) rotate(var(--T))
            scaleX(calc(1 / sin(var(--T))));
    }
}

.vcos__s .vcos__lines:nth-child(3) {
    transform: translate(
            calc(
                var(--A) - calc(var(--A) * cos(var(--T)) / sin(var(--T))) -
                    var(--D)
            ),
            calc(-1 * var(--A) + 2 * var(--D))
        )
        scaleX(0.8);
    animation: vcos_s_3_keys var(--ANIM-DEFAULTS);
}
@keyframes vcos_s_3_keys {
    0% {
        transform: translate(var(--LEFT), calc(-1 * var(--A) + 2 * var(--D)))
            scaleX(0.8);
    }
    25% {
        transform: translate(
                calc(
                    var(--A) - var(--A) * cos(var(--T)) / sin(var(--T)) -
                        var(--D) + calc(-1 * var(--SLOW-H-OFF))
                ),
                calc(-1 * var(--A) + 2 * var(--D))
            )
            scaleX(0.8);
    }
    75% {
        transform: translate(
                calc(
                    var(--A) - var(--A) * cos(var(--T)) / sin(var(--T)) -
                        var(--D) + calc(+1 * var(--SLOW-H-OFF))
                ),
                calc(-1 * var(--A) + 2 * var(--D))
            )
            scaleX(0.8);
    }
    100% {
        transform: translate(
                calc(2 * var(--RIGHT)),
                calc(-1 * var(--A) + 2 * var(--D))
            )
            scaleX(0.8);
    }
}