.legato-login-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483647;

    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;

    background-color: #020305;
    background-image:
        radial-gradient(
            circle at 50% 43%,
            rgba(13, 28, 50, 0.3) 0%,
            rgba(6, 14, 26, 0.16) 36%,
            rgba(0, 0, 0, 0) 68%
        ),
        linear-gradient(135deg, #010203 0%, #050911 52%, #010204 100%);

    animation: legato-splash-container 4s ease forwards;
}

.legato-login-splash-powered-by {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.521);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    opacity: 0;

    animation: legato-splash-logo-opacity 4s ease forwards;
}

.legato-login-splash-image {
    width: min(420px, 60vw);
    height: auto;
    opacity: 0;

    animation:
        legato-splash-logo-opacity 4s ease forwards,
        legato-splash-logo-zoom 4s linear forwards;
}

@keyframes legato-splash-logo-opacity {
    0% {
        opacity: 0;
    }

    50%,
    100% {
        opacity: 1;
    }
}

@keyframes legato-splash-logo-zoom {
    0% {
        transform: scale(0.95);
    }

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

@keyframes legato-splash-container {
    0%,
    71% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}