/* =========================================================
   02.5) LOADER
========================================================= */
body.is-loading {
    overflow: hidden;
}

body.is-loading .snap {
    pointer-events: none;
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: transparent;
    transition: opacity .5s ease, visibility .5s ease;
}

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

.loader-parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.loader-parallax .layer.l1 {
    position: absolute;
    inset: -10%;
    background: var(--grad);
    opacity: .85;
    transform: translate3d(0, calc(var(--lpy, 0px) * 0.12), 0) scale(1.05);
}

.loader-parallax .layer.l2 {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .55), transparent 42%),
        radial-gradient(circle at 80% 40%, rgba(255, 255, 255, .35), transparent 46%),
        radial-gradient(circle at 55% 78%, rgba(0, 0, 0, .10), transparent 44%);
    transform: translate3d(0, calc(var(--lpy, 0px) * 0.22), 0);
    filter: blur(2px);
    opacity: .92;
}

.loader-parallax .layer.l3 {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .25), transparent 52%),
        radial-gradient(circle at 50% 90%, rgba(0, 0, 0, .12), transparent 45%);
    transform: translate3d(0, calc(var(--lpy, 0px) * 0.34), 0);
    opacity: .9;
}

.loader-parallax .layer.grain {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .06) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .04) 1px, transparent 1px, transparent 4px);
    mix-blend-mode: soft-light;
}

.loader-inner {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100% - 56px));
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 22px;
    padding: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .12);
}

.loader-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.loader-brand {
    font-size: 14px;
    letter-spacing: .2px;
    opacity: .9;
}

.loader-pct {
    font-size: 12px;
    opacity: .8;
}

.loader-bar {
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .16);
    overflow: hidden;
    background: rgba(255, 255, 255, .60);
}

.loader-fill {
    height: 100%;
    width: 0%;
    background: rgba(0, 0, 0, .85);
    border-radius: 999px;
    transition: width .08s linear;
}

.loader-sub {
    margin: 12px 0 0;
    font-size: 12px;
    color: rgba(0, 0, 0, .65);
}