:root {
    --loader-transition: 1s;
    --loader-logo-height: 200px;
    --loader-background-url: url("../../imgs/loader/background.png");
    --loader-background-animation-duration: 100s;
    --loader-background-width: 250vw;
    --loader-background-logo-mask: linear-gradient(100deg, transparent 30%, black 50%, transparent 120%);
    --loader-background-logo-mask-size: 200% 100%;
    --loader-background-logo-animation-duration: 10s;
}

.loader_container {
    transition: var(--loader-transition);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute;
    overflow: hidden;
    z-index: 100000;
    height: 100vh;
    display: flex;
    width: 100vw;
    left: 0;
    top: 0;
}

.loader_container.hidden {
    opacity: 0;
}

.loader_container.nodisplay {
    display: none;
}

.loader_container > .loader_container__background {
    animation: loading var(--loader-background-animation-duration) linear infinite;
    background: var(--loader-background-url) center / cover no-repeat;
    height: var(--loader-background-width);
    width: var(--loader-background-width);
    position: absolute;
}

.loader_container > svg {
    height: var(--loader-logo-height);
    position: absolute;
    width: auto;
}

.loader_container > svg {
    animation: shimmer var(--loader-background-logo-animation-duration) infinite;
    mask-size: var(--loader-background-logo-mask-size);
    mask-image: var(--loader-background-logo-mask);
}

@keyframes loading {
    to  {
        rotate: 360deg;
    }
}

@keyframes shimmer {
    from {
        mask-position: 300% 100%;
    }
    to {
        mask-position: -100% 0;
    }
}