body vlp-splash-screen {
    position: fixed;
    z-index: 999999;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(34, 204, 178, 0.18), transparent 24%),
        radial-gradient(circle at 78% 12%, rgba(14, 116, 144, 0.2), transparent 32%),
        linear-gradient(145deg, #071827 0%, #0a2435 52%, #071523 100%);
    color: #f8fafc;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition:
        opacity 420ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

body vlp-splash-screen::before,
body vlp-splash-screen::after {
    position: absolute;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(94, 234, 212, 0.1);
    border-radius: 50%;
    content: "";
}

body vlp-splash-screen::before {
    top: -245px;
    left: -175px;
    box-shadow:
        0 0 0 54px rgba(34, 204, 178, 0.018),
        0 0 0 108px rgba(34, 204, 178, 0.012);
}

body vlp-splash-screen::after {
    right: -210px;
    bottom: -260px;
    box-shadow:
        0 0 0 54px rgba(34, 204, 178, 0.018),
        0 0 0 108px rgba(34, 204, 178, 0.012);
}

body vlp-splash-screen .splash-logo-stage {
    position: relative;
    display: flex;
    padding: 2px;
    border-radius: 32px;
    background: linear-gradient(145deg, #5eead4, #14b8a6 48%, #0f766e);
    box-shadow:
        0 26px 70px rgba(1, 12, 22, 0.48),
        0 0 0 8px rgba(45, 212, 191, 0.06);
    animation: vlp-logo-float 2.8s ease-in-out infinite;
}

body vlp-splash-screen .splash-logo-stage::before {
    position: absolute;
    z-index: -1;
    inset: 12px;
    border-radius: inherit;
    background: rgba(45, 212, 191, 0.48);
    filter: blur(34px);
    content: "";
}

body vlp-splash-screen .splash-logo-surface {
    display: flex;
    width: 154px;
    height: 140px;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    background:
        radial-gradient(circle at 36% 22%, #ffffff 0%, #f8fffd 58%, #ecfdf8 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

body vlp-splash-screen img {
    display: block;
    width: 108px;
    max-width: 108px;
    height: auto;
    max-height: 102px;
    object-fit: contain;
    filter: saturate(1.16) contrast(1.08);
}

body vlp-splash-screen .spinner {
    display: flex;
    width: 58px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
    padding: 9px 12px;
    border: 1px solid rgba(94, 234, 212, 0.18);
    border-radius: 999px;
    background: rgba(6, 28, 42, 0.66);
    box-shadow:
        0 12px 32px rgba(1, 12, 22, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
}

body vlp-splash-screen .spinner > div {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 12px rgba(34, 204, 178, 0.55);
    animation: vlp-bouncedelay 1.15s infinite ease-in-out both;
}

body vlp-splash-screen .spinner .bounce1 {
    animation-delay: -0.32s;
}

body vlp-splash-screen .spinner .bounce2 {
    background: #5eead4;
    animation-delay: -0.16s;
}

body vlp-splash-screen .spinner .bounce3 {
    background: #0f766e;
    box-shadow: 0 0 12px rgba(15, 118, 110, 0.52);
}

@keyframes vlp-logo-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes vlp-bouncedelay {
    0%,
    80%,
    100% {
        opacity: 0.42;
        transform: scale(0.72);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

body:not(.vlp-splash-screen-hidden) {
    overflow: hidden;
}

body.vlp-splash-screen-hidden vlp-splash-screen {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 520px) {
    body vlp-splash-screen .splash-logo-surface {
        width: 138px;
        height: 126px;
        border-radius: 26px;
    }

    body vlp-splash-screen .splash-logo-stage {
        border-radius: 28px;
    }

    body vlp-splash-screen img {
        width: 96px;
        max-width: 96px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body vlp-splash-screen .splash-logo-stage,
    body vlp-splash-screen .spinner > div {
        animation: none;
    }
}