:root {
    --loader-bg: #050b13;
    --loader-pink: #ff2f8a;
    --loader-cyan: #18d7ff;
}

body.p4d-preloading {
    overflow: hidden;
}

.p4d-preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #f7f9fb;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 47, 138, .10), transparent 27%),
        radial-gradient(circle at 54% 47%, rgba(24, 215, 255, .06), transparent 34%),
        var(--loader-bg);
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility .42s linear;
}

.p4d-preloader.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.p4d-preloader__content {
    width: min(76vw, 310px);
    display: grid;
    justify-items: center;
}

.p4d-preloader__logo {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 15px 34px rgba(0, 0, 0, .44));
}

.p4d-preloader__track {
    position: relative;
    width: min(190px, 70%);
    height: 2px;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
}

.p4d-preloader__track::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 48%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--loader-pink) 45%, var(--loader-cyan));
    box-shadow: 0 0 16px rgba(255, 47, 138, .42);
    animation: p4d-loader-slide 1.05s cubic-bezier(.65, 0, .35, 1) infinite;
}

.p4d-preloader__text {
    margin-top: 13px;
    color: #75869b;
    font: 800 10px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .24em;
}

@keyframes p4d-loader-slide {
    from { transform: translateX(-115%); }
    to { transform: translateX(220%); }
}

@media (prefers-reduced-motion: reduce) {
    .p4d-preloader { transition-duration: .15s; }
    .p4d-preloader__track::after { animation: none; width: 100%; }
}