/* Loading spinner overlay */

.loading-overlay {
    --spinner-size: clamp(70px, 15vw, 120px);
    --ring-width: clamp(2.5px, 0.5vw, 4px);
    --text-size: clamp(0.875rem, 2vw, 1.125rem);

    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background-color: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(5px);
    opacity: 1;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.loading-overlay[hidden] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Spinner container */
.spinner-container {
    position: relative;
    width: var(--spinner-size);
    height: var(--spinner-size);
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 8px 32px rgba(31, 38, 135, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.08);
}

/* Gradient ring behind container */
.spinner-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6, #10b981, #f97316, #3b82f6);
    z-index: -1;
    animation: spinner-rotate 3s linear infinite;
}

/* Spinning ring */
.spinner {
    position: absolute;
    width: calc(var(--spinner-size) * 0.75);
    height: calc(var(--spinner-size) * 0.75);
    border-radius: 50%;
    border: var(--ring-width) solid transparent;
    border-top-color: #3b82f6;
    animation: spinner-rotate 1s linear infinite;
    will-change: transform;
}

.spinner::before,
.spinner::after {
    content: '';
    position: absolute;
    inset: calc(var(--ring-width) * -1);
    border-radius: 50%;
    border: var(--ring-width) solid transparent;
    will-change: transform;
}

.spinner::before {
    border-top-color: #10b981;
    animation: spinner-rotate-reverse 1.2s linear infinite;
}

.spinner::after {
    border-top-color: #f97316;
    animation: spinner-rotate-reverse 1.5s linear infinite;
}

/* Loading text */
.loading-text {
    position: absolute;
    bottom: calc(var(--spinner-size) * -0.4);
    width: 100%;
    font-size: var(--text-size);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    animation: spinner-pulse 1.5s ease-in-out infinite alternate;
}

/* Animations */
@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

@keyframes spinner-rotate-reverse {
    to { transform: rotate(-360deg); }
}

@keyframes spinner-pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .loading-overlay {
        transition: none;
    }

    .spinner,
    .spinner::before,
    .spinner::after,
    .spinner-container::before {
        animation-duration: 4s;
        animation-timing-function: linear;
    }

    .loading-text {
        animation: none;
        opacity: 1;
    }
}