html.pp-app-loading body {
    overflow: hidden;
}

.pp-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    visibility: visible;
    overflow: hidden;
    background: rgba(5, 5, 7, .82);
    backdrop-filter: blur(18px) saturate(115%);
    opacity: 1;
    transition: opacity .32s cubic-bezier(.23, 1, .32, 1), visibility .32s;
}

.pp-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(239, 35, 60, .16), transparent 34%);
    pointer-events: none;
}

.pp-loader-symbol {
    --pp-loader-split-distance: clamp(34px, 5.2vw, 62px);
    width: 92px;
    height: 92px;
    position: relative;
    display: block;
    isolation: isolate;
    filter: drop-shadow(0 0 34px rgba(239, 35, 60, .42));
    animation: ppLoaderBeat 1.06s ease-in-out infinite;
    will-change: transform, opacity;
}

.pp-loader-symbol::before {
    content: "";
    position: absolute;
    inset: -58px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 35, 60, .3), rgba(239, 35, 60, .08) 42%, transparent 70%);
    animation: ppLoaderGlow 1.06s ease-in-out infinite;
}

.pp-loader-half {
    position: absolute;
    inset: 0;
    background: url("/assets/logo-symbol-ui.webp") center / contain no-repeat;
    will-change: transform, opacity;
}

.pp-loader-half--left {
    clip-path: inset(0 50% 0 0);
    transform-origin: right center;
}

.pp-loader-half--right {
    clip-path: inset(0 0 0 50%);
    transform-origin: left center;
}

.pp-loader.pp-loader-exit {
    pointer-events: none;
}

.pp-loader.pp-loader-exit .pp-loader-symbol {
    animation: ppLoaderFinalGrow .62s cubic-bezier(.16, 1, .3, 1) forwards;
}

.pp-loader.pp-loader-exit .pp-loader-symbol::before {
    animation: ppLoaderExitGlow .62s cubic-bezier(.16, 1, .3, 1) forwards;
}

.pp-loader.pp-loader-exit .pp-loader-half--left {
    animation: ppLoaderLeft .62s cubic-bezier(.16, 1, .3, 1) forwards;
}

.pp-loader.pp-loader-exit .pp-loader-half--right {
    animation: ppLoaderRight .62s cubic-bezier(.16, 1, .3, 1) forwards;
}

.pp-loader.pp-loader-done {
    opacity: 0;
    visibility: hidden;
}

@keyframes ppLoaderBeat {
    0%,
    100% {
        transform: scale(1);
    }

    32% {
        transform: scale(1.075);
    }

    46% {
        transform: scale(.985);
    }

    62% {
        transform: scale(1.035);
    }
}

@keyframes ppLoaderGlow {
    0%,
    100% {
        opacity: .52;
        transform: scale(.94);
    }

    35% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes ppLoaderFinalGrow {
    0% {
        transform: scale(1);
    }

    22% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1.04);
    }
}

@keyframes ppLoaderExitGlow {
    0% {
        opacity: 1;
        transform: scale(1.04);
    }

    34% {
        opacity: .76;
        transform: scale(1.12);
    }

    100% {
        opacity: 0;
        transform: scale(.98);
    }
}

@keyframes ppLoaderLeft {
    0%,
    22% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    54% {
        opacity: .78;
        transform: translateX(calc(-.56 * var(--pp-loader-split-distance))) scale(1.015);
    }

    100% {
        opacity: 0;
        transform: translateX(calc(-1 * var(--pp-loader-split-distance))) scale(1.025);
    }
}

@keyframes ppLoaderRight {
    0%,
    22% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    54% {
        opacity: .78;
        transform: translateX(calc(.56 * var(--pp-loader-split-distance))) scale(1.015);
    }

    100% {
        opacity: 0;
        transform: translateX(var(--pp-loader-split-distance)) scale(1.025);
    }
}

@media (max-width: 430px) {
    .pp-loader-symbol {
        --pp-loader-split-distance: clamp(28px, 9vw, 44px);
        width: 78px;
        height: 78px;
    }

    .pp-loader-symbol::before {
        inset: -48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-loader {
        backdrop-filter: blur(10px);
        transition: opacity .18s ease, visibility .18s;
    }

    .pp-loader-symbol,
    .pp-loader-symbol::before,
    .pp-loader-half {
        animation: none !important;
    }

    .pp-loader.pp-loader-exit .pp-loader-symbol,
    .pp-loader.pp-loader-exit .pp-loader-symbol::before {
        opacity: 0;
        transform: none;
    }

    .pp-loader.pp-loader-exit .pp-loader-half {
        opacity: 0;
        transform: none;
    }
}