.loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100dvh;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #FFFFFF;
    z-index: 10000000;
    position: fixed;
}

@media screen and (max-width: 1024px) {
    .loading-screen {
        transform: translateY(0);
        transition: transform .35s ease-in, opacity .5s ease-in, visibility .5s ease-in;
    }
    .loading-screen.done {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        pointer-events: none;
    }
}

@media screen and (min-width: 1025px) {
    .loading-screen {
        transform: scale(1);
        transition: all .25s ease-in;
    }
    .loading-screen.done {
        opacity: 0;
        visibility: hidden;
        transform: scale(10);
        pointer-events: none;
    }
}

.loading-screen svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    max-width: 100%;
}

.text-loader {
    --clip-path: inset(0 100% 0 0);
    font-family: var(--font-stack-heading);
    position: relative;
    font-size: 3rem;
    line-height: 3rem;
    height: 5rem;
    font-weight: 500;
    color: transparent;
}

.text-progress {
    font-family: var(--font-stack-heading);
    color: #737373;
    font-size: 1.2rem;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.text-loader::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--e-global-color-accent);
    z-index: 1;
}

.text-loader::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--e-global-color-7309b92);
    z-index: 2;
    clip-path: var(--clip-path);
    transition: clip-path .5s cubic-bezier(.18, .89, .32, 1.28);
}

@media (max-width: 1024px) {
    .text-loader {
        text-align: center;
        font-size: 1.5rem;
    }

    .loading-screen svg {
        max-width: 80%;
    }
}