#splash-screen {
    --splash-ink: #05113b;
    --splash-accent: #016cfb;
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.55s ease, visibility 0s linear 0s;
}

#splash-screen::before {
    position: absolute;
    width: min(72vw, 34rem);
    height: min(72vw, 34rem);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(1, 108, 251, 0.34) 0%, rgba(1, 108, 251, 0.1) 42%, rgba(1, 108, 251, 0) 72%);
    content: "";
    animation: splash-glow 2.4s ease-in-out infinite;
}

.splash-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: min(78vw, 25rem);
    animation: splash-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.splash-logo {
    display: block;
    width: min(62vw, 18rem);
    height: auto;
    filter: drop-shadow(0 1rem 2.5rem rgba(0, 0, 0, 0.28));
    animation: splash-breathe 2.8s ease-in-out 0.8s infinite;
}

.splash-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.55s ease, visibility 0s linear 0.55s !important;
}

body:not(.splash-complete) .login-page {
    opacity: 0;
}

.login-page {
    opacity: 1;
    transition: opacity 0.45s ease;
}

@keyframes splash-enter {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes splash-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-0.45rem) scale(1.02); }
}

@keyframes splash-glow {
    0%, 100% { opacity: 0.72; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes splash-loading {
    from { transform: translateX(-140%); }
    to { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    #splash-screen,
    .login-page {
        transition-duration: 0.01ms;
    }

    .splash-content,
    .splash-logo,
    #splash-screen::before {
        animation: none;
    }
}