body.is-loading {
    overflow: hidden;
}

body.is-loading .page {
    visibility: hidden;
    max-height: 100vh;
    overflow: hidden;
    display: none;
}

#loadingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #002144;
    overflow: hidden;
    overscroll-behavior: contain;
}

body.is-loading #loadingOverlay {
    display: flex;
}

body.is-loading .page {
    visibility: hidden;
}

.loader.brand-only {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.brand-loader {
    text-align: center;
    user-select: none;
    pointer-events: none;
}

.brand-loader span {
    --brand: #fff;
    display: inline-block;
    font-weight: 800;
    letter-spacing: .18em;
    font-size: 32px;
    color: var(--brand);
    position: relative;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25), 0 0 24px rgba(255, 255, 255, .12);
}

.brand-loader span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: scaleY(-1);
    opacity: .08;
    filter: blur(1px);
}

.brand-loader span::before {
    content: "";
    position: absolute;
    inset: -6px -12px;
    background: linear-gradient(120deg, transparent 30%, rgba(239, 123, 0, .7) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: brandShine 1.6s ease-in-out infinite;
}

@keyframes brandShine {
    to {
        transform: translateX(120%);
    }
}

.brand-loader span>i {
    display: inline-block;
    animation: wave .9s ease-in-out infinite;
}

@keyframes wave {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

.brand-loader small {
    display: block;
    margin-top: 8px;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .65);
}

@media (prefers-reduced-motion:reduce) {

    .brand-loader span::before,
    .brand-loader span>i {
        animation: none;
    }
}