:root {
    --speed: 1000ms;
    --color-root: hsl(210, 18%, 44%);
    --color-text: hsl(210, 15%, 96%);
}

.loader {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    font-size: 2.5em;
}

    .loader .tile {
        color: #fc9c3c;
        width: 1.1em;
        height: 1.1em;
        animation: jump var(--speed) ease infinite;
        transform-origin: 0 100%;
        will-change: transform;
    }

        .loader .tile::before {
            content: "";
            display: block;
            width: inherit;
            height: inherit;
            border-radius: 0.15em;
            background-color: currentColor;
            animation: spin var(--speed) ease-out infinite;
            will-change: transform;
        }

    .loader::after {
        content: "";
        display: block;
        width: 1.2em;
        height: 0.2em;
        background-color: #0132;
        border-radius: 25%;
        position: absolute;
        z-index: -1;
        animation: shadow var(--speed) ease-in-out infinite;
        filter: blur(0.02em);
        will-change: transform, filter;
        margin-bottom: 10px;
    }

@keyframes jump {
    0% {
        transform: scaleY(1) translateY(0);
    }

    16% {
        transform: scaleY(0.6) translateY(0);
    }

    22% {
        transform: scaleY(1.2) translateY(-5%);
    }

    24%, 62% {
        transform: scaleY(1) translateY(-33%);
    }

    66% {
        transform: scaleY(1.2) translateY(0);
    }

    72% {
        transform: scaleY(0.8) translateY(0);
    }

    88% {
        transform: scaleY(1) translateY(0);
    }
}

@keyframes spin {
    0%, 18% {
        transform: rotateZ(0);
        border-radius: 0.15em;
    }

    38% {
        border-radius: 0.25em;
    }

    66%, 100% {
        transform: rotateZ(1turn);
        border-radius: 0.15em;
    }
}

@keyframes shadow {
    0% {
        transform: scale(1);
        filter: blur(0.02em);
    }

    25%, 60% {
        transform: scale(0.8);
        filter: blur(0.06em);
    }

    70% {
        transform: scale(1.1);
        filter: blur(0.02em);
    }

    90% {
        transform: scale(1);
    }
}