html {
    scrollbar-gutter: stable;
}

html.site-intro-pending,
body.site-intro-pending {
    overflow-y: hidden;
    animation: site-intro-scroll-watchdog 0s linear 24s forwards;
}

.site-intro {
    position: fixed;
    z-index: 1000;
    inset: 0;
    overflow: hidden;
    background: transparent;
    pointer-events: auto;
    animation: site-intro-watchdog 0s linear 24s forwards;
}

.site-intro--ui-reveal {
    z-index: 4;
}

.site-intro__veil,
.site-intro__flash,
.site-intro__flash-fallback,
.site-intro__loader {
    position: absolute;
    inset: 0;
}

.site-intro__veil {
    background: var(--color-heading);
}

.site-intro__flash {
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.site-intro__flash-fallback {
    z-index: 1;
    background:
        radial-gradient(ellipse 16% 110% at 50% 42.5%, rgb(255 255 255 / 96%) 0 10%, transparent 72%),
        radial-gradient(ellipse 105% 15% at 50% 42.5%, rgb(255 255 255 / 94%) 0 12%, transparent 72%),
        radial-gradient(ellipse 72% 18% at 50% 42.5%, rgb(178 255 211 / 88%) 0 14%, transparent 74%),
        radial-gradient(ellipse 23% 82% at 50% 42.5%, rgb(99 255 163 / 72%) 0 18%, transparent 76%),
        radial-gradient(circle at 50% 42.5%, #fff 0 9%, #d8ffe7 18%, #30ec7d 38%, #08100b 74%);
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 42.5%;
    will-change: opacity, transform;
}

.site-intro__loader {
    z-index: 3;
    top: 50%;
    bottom: auto;
    display: flex;
    width: 100%;
    height: 1.5625rem;
    align-items: stretch;
    overflow: hidden;
    transform: translateY(-50%);
}

.site-intro__loader-line {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-stage-text);
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.site-intro__loader-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-inline: max(0.5rem, var(--page-gutter));
    color: var(--color-heading);
    font-size: 0.875rem;
    line-height: 1;
    pointer-events: none;
}

.site-intro__word {
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
}

.site-intro__letter {
    display: inline-block;
    overflow: visible;
    clip-path: polygon(-5% -14%, -5% 112%, 113% 112%, 113% -14%);
    vertical-align: baseline;
}

.site-intro__character {
    display: inline-block;
    will-change: transform;
}

@keyframes site-intro-watchdog {
    to {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes site-intro-scroll-watchdog {
    to { overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html.site-intro-pending,
    body.site-intro-pending {
        overflow-y: auto;
        animation: none;
    }

    .site-intro {
        display: none;
        animation: none;
    }
}