.igor-loader {
    position: fixed;
    inset: 0;
    z-index: var(--igor-z-loader);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    transition:
        opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.igor-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.igor-loader__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, rgba(196, 27, 27, 0.18), transparent 34%),
        radial-gradient(circle at bottom left, rgba(163, 23, 23, 0.18), transparent 42%),
        #000;
}

.igor-loader__bg::before {
    content: "";
    position: absolute;
    inset: -30%;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 54px 54px;
    transform: rotate(-8deg);
}

.igor-loader__content {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    gap: 26px;
    transform: scale(0.94);
    animation: igorLoaderLogoIn 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.igor-loader__logo {
    width: min(240px, 62vw);
    filter: drop-shadow(0 18px 45px rgba(196, 27, 27, 0.34));
}

.igor-loader__logo img {
    width: 100%;
    height: auto;
}

.igor-loader__line {
    position: relative;
    width: min(220px, 58vw);
    height: 2px;
    overflow: hidden;
    border-radius: var(--igor-radius-full);
    background: rgba(255,255,255,0.1);
}

.igor-loader__line span {
    position: absolute;
    inset: 0;
    width: 45%;
    border-radius: inherit;
    background: var(--igor-gradient-red);
    animation: igorLoaderLine 1350ms ease-in-out infinite;
}

.igor-loader.is-leaving .igor-loader__content {
    animation: igorLoaderLogoOut 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes igorLoaderLogoIn {
    from {
        opacity: 0;
        transform: scale(0.86) translateY(18px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes igorLoaderLogoOut {
    to {
        opacity: 0;
        transform: scale(1.28) translateY(-34px);
        filter: blur(8px);
    }
}

@keyframes igorLoaderLine {
    0% {
        transform: translateX(-120%);
    }

    50% {
        transform: translateX(95%);
    }

    100% {
        transform: translateX(240%);
    }
}