/* Canonical Zephyria spinner — conic gem ring (zone loading screen).
   Linked early from game.html; also imported via styles.base.css.
   Alias: .loading-spinner (boot screen). Size modifiers: --md --sm --xs. */

.zone-loading-spinner,
.loading-spinner,
.inventory-appearance-preview-spinner {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    margin: 0 auto 2rem;
    border: none;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        transparent 0deg 42deg,
        rgba(var(--ui-cool-rgb), 0.12) 42deg 52deg,
        var(--ui-accent-cool) 52deg 128deg,
        rgba(240, 147, 251, 0.62) 128deg 205deg,
        transparent 205deg 282deg,
        rgba(var(--ui-cool-mid-rgb), 0.42) 282deg 332deg,
        transparent 332deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation:
        zephyria-spin 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        zone-loading-halo-pulse 2.8s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(var(--ui-cool-rgb), 0.42));
}

.zone-loading-spinner::before,
.loading-spinner::before,
.inventory-appearance-preview-spinner::before {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    color: rgba(var(--ui-cool-rgb), 0.94);
    text-shadow:
        0 0 10px rgba(var(--ui-cool-rgb), 0.72),
        0 0 22px rgba(240, 147, 251, 0.38);
    letter-spacing: 0.12em;
    animation: zone-loading-gem-pulse 2.2s ease-in-out infinite;
    z-index: 2;
}

.zone-loading-spinner::after,
.loading-spinner::after,
.inventory-appearance-preview-spinner::after {
    content: '';
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(240, 147, 251, 0.88);
    border-left-color: rgba(var(--ui-cool-mid-rgb), 0.58);
    border-bottom-color: rgba(var(--ui-cool-rgb), 0.34);
    filter: drop-shadow(0 0 5px rgba(240, 147, 251, 0.42));
    animation: zephyria-spin 1s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite reverse;
    z-index: 1;
}

/* Boot / mid: slightly smaller than the cinematic default */
.loading-spinner,
.zone-loading-spinner--md {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
}

.loading-spinner::before,
.zone-loading-spinner--md::before {
    font-size: 0.52rem;
}

.loading-spinner::after,
.zone-loading-spinner--md::after {
    inset: 10px;
}

/* Zone-loading frame + compact badge */
.zone-loading-frame .zone-loading-spinner,
.zone-loading-spinner--sm,
.inventory-appearance-preview-spinner {
    width: 36px;
    height: 36px;
    margin: 0;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    filter: drop-shadow(0 0 8px rgba(var(--ui-cool-rgb), 0.48));
}

.zone-loading-frame .zone-loading-spinner {
    width: 46px;
    height: 46px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    filter: drop-shadow(0 0 10px rgba(var(--ui-cool-rgb), 0.42));
}

.zone-loading-frame .zone-loading-spinner::before,
.zone-loading-spinner--sm::before,
.inventory-appearance-preview-spinner::before {
    font-size: 0.42rem;
}

.zone-loading-frame .zone-loading-spinner::before {
    font-size: 0.5rem;
}

.zone-loading-frame .zone-loading-spinner::after,
.zone-loading-spinner--sm::after,
.inventory-appearance-preview-spinner::after {
    inset: 7px;
}

.zone-loading-frame .zone-loading-spinner::after {
    inset: 9px;
}

/* Inline / description micro-spinner */
.zone-loading-spinner--xs {
    width: 18px;
    height: 18px;
    margin: 0;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    filter: drop-shadow(0 0 4px rgba(var(--ui-cool-rgb), 0.4));
    animation: zephyria-spin 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.zone-loading-spinner--xs::before {
    content: none;
}

.zone-loading-spinner--xs::after {
    inset: 3px;
    border-width: 1.5px;
}

@media (prefers-reduced-motion: reduce) {
    .zone-loading-spinner,
    .loading-spinner,
    .zone-loading-spinner--md,
    .zone-loading-spinner--sm,
    .zone-loading-spinner--xs,
    .inventory-appearance-preview-spinner {
        animation: zone-loading-halo-pulse 2.8s ease-in-out infinite;
    }

    .zone-loading-spinner--xs {
        animation: none;
        opacity: 0.9;
    }

    .zone-loading-spinner::after,
    .loading-spinner::after,
    .zone-loading-spinner--md::after,
    .zone-loading-spinner--sm::after,
    .zone-loading-spinner--xs::after,
    .inventory-appearance-preview-spinner::after {
        animation: none;
        border-top-color: rgba(240, 147, 251, 0.55);
        border-left-color: rgba(var(--ui-cool-mid-rgb), 0.4);
    }

    .zone-loading-spinner::before,
    .loading-spinner::before,
    .zone-loading-spinner--md::before,
    .zone-loading-spinner--sm::before,
    .inventory-appearance-preview-spinner::before {
        animation: none;
        opacity: 0.9;
        transform: none;
    }
}