.sc-splash {
    --sc-splash-bounce-duration: 1.4s;
    --sc-splash-caption-fade-speed: 220ms;
    --sc-splash-bg: #f9fafb; /* AppTheme.BackgroundGray — Mud vars not ready yet */
    --sc-splash-color: #0a0a0a; /* AppTheme.Black */
    --sc-splash-logo-size: 185px;
    --sc-splash-logo-bounce-height: 52px;
    --sc-splash-caption-height: 70px;
    --sc-splash-content-max-width: 485px;
    --sc-splash-content-gap: 40px; /* space between logo and caption */
    --sc-splash-content-height: calc(var(--sc-splash-logo-size) + var(--sc-splash-logo-bounce-height) + var(--sc-splash-content-gap) + var(--sc-splash-caption-height)); /* compared with max-height to decide the scale */
    --sc-splash-content-max-height: 72dvh; /* scale content down when it would exceed this */
    height: 100dvh;
    display: grid;
    grid-template-rows: 3fr auto 5fr;
    justify-items: center;
    overflow: hidden;
    background: var(--sc-splash-bg);
    color: var(--sc-splash-color);
}

html.sc-theme-dark .sc-splash {
    --sc-splash-bg: #1d1d1d;
    --sc-splash-color: #ffffff;
}

.sc-splash__content {
    grid-row: 2;
    width: min(100%, var(--sc-splash-content-max-width));
    zoom: min(1, var(--sc-splash-content-max-height) / var(--sc-splash-content-height));
}

/* Length÷length is invalid without typed arithmetic (Firefox, Safari 18); zoom is dropped. */
@supports not (z-index: calc(1px / 1px)) {
    @media (max-height: 430px) {
        .sc-splash__content {
            zoom: 0.66; /* 347px stack → ~229px; covers SE landscape and chrome-shrunk dvh */
        }
    }
}

.sc-splash__logo {
    display: grid;
    width: var(--sc-splash-logo-size);
    height: calc(var(--sc-splash-logo-size) + var(--sc-splash-logo-bounce-height));
    margin-inline: auto;
    place-items: end center;
}

.sc-splash__logo img {
    width: var(--sc-splash-logo-size);
    height: var(--sc-splash-logo-size);
    transform-origin: 50% 100%;
    animation: sc-splash-translate var(--sc-splash-bounce-duration) infinite,
        sc-splash-scale var(--sc-splash-bounce-duration) infinite;
}

.sc-splash__caption {
    margin: var(--sc-splash-content-gap) 0 0;
    width: 100%;
    height: var(--sc-splash-caption-height);
    padding-inline: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    font: 600 24px/31px Inter, Helvetica, Arial, sans-serif;
    letter-spacing: -0.36px;
    text-wrap: balance;
    opacity: 0;
    transition: opacity var(--sc-splash-caption-fade-speed) ease;
}

.sc-splash__caption.is-visible {
    opacity: 1;
}

@keyframes sc-splash-translate {
    0%,
    100% {
        translate: 0 calc(-1 * var(--sc-splash-logo-bounce-height));
        animation-timing-function: cubic-bezier(0.2, 0, 0.35, -0.15);
    }
    55% {
        translate: 0 0;
        animation-timing-function: cubic-bezier(0.15, 0.1, 0.3, 0.7);
    }
}

@keyframes sc-splash-scale {
    0%,
    100% {
        scale: 1;
        animation-timing-function: cubic-bezier(0.95, 0.1, 0.85, -0.2);
    }
    55% {
        scale: 1.139 0.837;
        animation-timing-function: cubic-bezier(0.15, 0.7, 0, 1.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-splash {
        --sc-splash-caption-fade-speed: 0ms;
    }

    .sc-splash__logo img {
        animation: none;
    }
}