html, body {
    height: 100%;
    margin: 0;
}
#initial-splash-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    z-index: 9999;
}
#initial-splash-screen .splash-logo {
    min-width: 250px;
    width: 20%;
    height: auto;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
body.splash-debounce #initial-splash-screen {
    opacity: 0;
    visibility: hidden;
    --splash-delay: 200ms;
    animation: splash-reveal 1ms steps(1, end) var(--splash-delay) forwards;
}
@keyframes splash-reveal {
    to { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
    body.splash-debounce #initial-splash-screen {
        animation-name: splash-reveal;
        animation-duration: 0s;
        animation-delay: var(--splash-delay);
        animation-timing-function: steps(1, end);
        animation-fill-mode: forwards;
        opacity: 0;
        visibility: hidden;
    }
}