.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #fff;
    opacity: 1;
    transition: opacity 520ms cubic-bezier(.22, .75, .28, 1), visibility 520ms linear;
}
.site-loader--leaving {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.site-loader__stage {
    display: grid;
    width: 100%;
    place-items: center;
}
.site-loader__logo {
    position: relative;
    width: min(520px, 84vw);
    aspect-ratio: 506 / 126;
    animation: loader-logo-enter 420ms ease-out both;
}
.site-loader__logo-base {
    display: block;
    width: 100%;
    height: 100%;
}
.site-loader__logo-cover {
    position: absolute;
    top: 22%;
    left: 38%;
    width: 14.5%;
    height: 61%;
    background: #fff;
}
.site-loader__logo-symbol {
    position: absolute;
    top: 22%;
    left: 38.1%;
    width: 14.25%;
    height: 61%;
    object-fit: contain;
    transform-origin: 50% 50%;
    animation: loader-windup 2.6s cubic-bezier(.22, .72, .24, 1) both;
}
@keyframes loader-logo-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes loader-windup {
    0% { transform: rotate(0deg) scale(1); }
    22% { transform: rotate(-9deg) scale(.9); }
    64% { transform: rotate(369deg) scale(1.025); }
    82% { transform: rotate(356deg) scale(.985); }
    93% { transform: rotate(364deg) scale(1.008); }
    100% { transform: rotate(360deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .site-loader__logo,
    .site-loader__logo-symbol {
        animation-duration: .01ms !important;
    }
}