body.splash-active {
    overflow: hidden;
}
#splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    transition: opacity 0.7s;
}
html.dark #splash {
    background: #171717;
}
#splashContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 1rem;
}
#splashContent.top-left {
    top: 2rem;
    left: 1.5rem;
    transform: none;
}
@media (min-width: 768px) {
    #splashContent.top-left {
        left: 3rem;
    }
}
#splashLogo {
    height: 3.5rem;
    width: auto;
    object-fit: contain;
    transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#splashContent.top-left #splashLogo {
    height: 2.5rem;
}
#splashName {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    font-style: italic;
    color: #000;
    opacity: 0;
    transition: opacity 0.5s ease-out, font-size 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark #splashName {
    color: #fff;
}
#splashContent.top-left #splashName {
    font-size: 1.5rem;
}