.init-loader-wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.init-loader {
    --primary: hsl(124, 25%, 52%);
    --trans-dur: 0.3s;
}


.pl1 {
    display: block;
    width: 8em;
    height: 8em;
}

.pl1__g,
.pl1__rect {
    animation: pl1-a 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.pl1__g {
    transform-origin: 64px 64px;
}

.pl1__rect:first-child {
    animation-name: pl1-b;
}

.pl1__rect:nth-child(2) {
    animation-name: pl1-c;
}

/* Animations */
@keyframes pl1-a {
    from {
        transform: rotate(0);
    }

    80%,
    to {
        animation-timing-function: steps(1, start);
        transform: rotate(90deg);
    }
}

@keyframes pl1-b {
    from {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
        width: 40px;
        height: 40px;
    }

    20% {
        animation-timing-function: steps(1, start);
        width: 40px;
        height: 0;
    }

    60% {
        animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
        width: 0;
        height: 40px;
    }

    80%,
    to {
        width: 40px;
        height: 40px;
    }
}

@keyframes pl1-c {
    from {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
        width: 40px;
        height: 40px;
        transform: translate(0, 48px);
    }

    20% {
        animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
        width: 40px;
        height: 88px;
        transform: translate(0, 0);
    }

    40% {
        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
        width: 40px;
        height: 40px;
        transform: translate(0, 0);
    }

    60% {
        animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
        width: 88px;
        height: 40px;
        transform: translate(0, 0);
    }

    80%,
    to {
        width: 40px;
        height: 40px;
        transform: translate(48px, 0);
    }
}