.stage-transition {
    position: fixed;
    inset: 0;

    z-index: 4900;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        rgba(
            2,
            7,
            18,
            0.94
        );

    color: #ffffff;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 450ms ease;
}

.stage-transition.is-visible {
    opacity: 1;
}

.stage-transition__glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 50vmax;
    height: 50vmax;

    border-radius: 50%;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0.25);

    background:
        radial-gradient(
            circle,
            rgba(
                177,
                204,
                255,
                0.72
            ),
            rgba(
                97,
                127,
                205,
                0.24
            )
            32%,
            transparent
            68%
        );

    transition:
        transform 1500ms ease,
        opacity 1200ms ease;
}

.stage-transition.is-visible
.stage-transition__glow {
    transform:
        translate(
            -50%,
            -50%
        )
        scale(1);
}

.stage-transition.is-transitioning
.stage-transition__glow {
    transform:
        translate(
            -50%,
            -50%
        )
        scale(2.4);

    opacity: 0;
}

.stage-transition__content {
    position: relative;

    width:
        min(
            620px,
            calc(
                100% - 40px
            )
        );

    text-align: center;

    transform:
        translateY(20px);

    transition:
        transform 700ms ease,
        opacity 500ms ease;
}

.stage-transition.is-visible
.stage-transition__content {
    transform:
        translateY(0);
}

.stage-transition.is-transitioning
.stage-transition__content {
    transform:
        translateY(-30px);

    opacity: 0;
}

.stage-transition__content small {
    color: #dfc579;

    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.stage-transition__content h2 {
    margin:
        10px 0;

    font-size:
        clamp(
            2rem,
            7vw,
            4.5rem
        );
}

.stage-transition__content p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );
}

.stage-transition.is-leaving {
    opacity: 0;
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .stage-transition,
    .stage-transition * {
        transition-duration:
            1ms !important;
    }
}