@keyframes splash-in {
    from {
        opacity: 0;
        scale: 0.95;
    }
    to {
        opacity: 1.0;
        scale: 1.0;
    }
}

body:not(.ready) > :not(#splash) {
    opacity: 0.0;
    pointer-events: none;
}

body.ready > :not(#splash) {
    opacity: 1.0;
    pointer-events: auto;
}

body > #splash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('./splash.svg') no-repeat center center;
    background-size: 20%;
    transform: translateY(-8%);
    pointer-events: none;
}

body:not(.ready) > #splash {
    animation: splash-in 300ms ease-in-out;
    animation-fill-mode: forwards;
}

body.ready > #splash {
    opacity: 0.0;
}