/* Shared by the pre-React document loader and the React BootLoading component. */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--bg-dark, #0d0d0d);
    color: var(--text-main, #f0ede8);
    font-family: Inter, system-ui, sans-serif;
}

.loading-spinner-container {
    position: relative;
    width: 60px;
    height: 60px;
}

.loading-spinner-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(244, 91, 31, 0.1);
    border-top-color: var(--primary, #f45b1f);
    border-radius: 50%;
    animation: boot-loading-spin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

.loading-spinner-inner {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border: 3px solid rgba(244, 91, 31, 0.05);
    border-bottom-color: var(--primary, #f45b1f);
    border-radius: 50%;
    opacity: 0.5;
    animation: boot-loading-spin 1.5s reverse linear infinite;
}

.loading-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    animation: boot-loading-pulse 2s infinite;
}

@keyframes boot-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes boot-loading-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-spinner-outer,
    .loading-spinner-inner,
    .loading-text {
        animation: none;
    }
}