.loading-screen {
    position: absolute;

    inset: 0;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
     * V3.1 Cinematic Opening
     * The background is fully transparent so the pristine
     * cosmos can emerge from the darkness naturally.
     */
    background: transparent;

    /* Allows pointer events to pass through to the canvas */
    pointer-events: none;

    transition:
        opacity 1.8s var(--ease-smooth),
        visibility 1.8s var(--ease-smooth);
}

.loading-screen.is-complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;

    min-width: 180px;

    text-align: center;

    opacity: 0;

    transform: translateY(5px);

    animation:
        loadingContentIn 1.8s var(--ease-smooth) 0.4s forwards;
}

.loading-status {
    font-family: var(--font-mono);

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.12em;

    color: rgba(225, 230, 250, 0.62);

    white-space: nowrap;

    text-align: center;
}

.loading-coordinates {
    display: none;
}

.loading-content.is-final {
    opacity: 0;

    transition:
        opacity 1.1s var(--ease-smooth);
}

@keyframes loadingContentIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}