html.js-site-loader-enabled:not(.js-site-loader-loaded),
html.js-site-loader-enabled:not(.js-site-loader-loaded) body {
    overflow: hidden;
}

.site-loader {
    display: none;
}

html.js-site-loader-enabled .site-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(40, 167, 225, 0.24), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(230, 0, 18, 0.18), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f4f8fb 48%, #edf6fb 100%);
    color: #333333;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}

html.js-site-loader-loaded .site-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader__inner {
    position: relative;
    display: grid;
    place-items: center;
    gap: 28px;
    width: min(78vw, 360px);
    text-align: center;
}

.site-loader__mark {
    position: relative;
    width: clamp(118px, 24vw, 176px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.site-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: clamp(8px, 1.6vw, 13px) solid rgba(40, 167, 225, 0.18);
    border-top-color: #28a7e1;
    border-right-color: rgba(230, 0, 18, 0.72);
    animation: siteLoaderSpin 1.45s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.site-loader__logo {
    position: relative;
    z-index: 1;
    width: clamp(74px, 16vw, 112px);
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(15, 38, 62, 0.13));
}

.site-loader__bar {
    position: relative;
    width: min(220px, 54vw);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(51, 51, 51, 0.1);
}

.site-loader__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, #28a7e1, #e60012);
    animation: siteLoaderBar 1.2s ease-in-out infinite;
}

@keyframes siteLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes siteLoaderBar {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(260%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-loader__ring,
    .site-loader__bar::before {
        animation: none;
    }
}