/* ===============================
   SPINNER — Glass, Conic Ring, Orbits (APF Theme)
   =============================== */

/* Overlay base */
.mid-spinner-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}

    .mid-spinner-overlay.loader {
        display: none;
        place-items: center;
        opacity: 0;
        transition: opacity .2s ease;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

/* Active state (generating) */
.mid-canvas-wrapper.is-generating .mid-spinner-overlay.loader {
    display: grid !important;
    opacity: 1 !important;
    background: radial-gradient( 40% 40% at 50% 50%, color-mix(in oklch, var(--surface, #111) 85%, transparent), color-mix(in oklch, var(--surface, #111) 70%, transparent) 55%, color-mix(in oklch, var(--surface, #111) 55%, transparent) 100% );
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
}

/* Loader core */
.mid-spinner-overlay.loader .loader {
    position: relative;
    width: 112px;
    height: 112px;
    isolation: isolate;
    --ring: 3px;
    --glow: 18px;
    --spin-speed: 2.2s;
    --spin-ease: linear;
    --ring-colors: var(--ctl-c1), var(--focus-ring) 40%, var(--ctl-c2), var(--ctl-c1);
}

    /* Conic gradient stroke */
    .mid-spinner-overlay.loader .loader::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        padding: var(--ring);
        background: conic-gradient(from var(--rotate, 0deg), var(--ring-colors));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: gen-rotate var(--spin-speed) var(--spin-ease) infinite;
        z-index: 1;
    }

    /* Glow aura */
    .mid-spinner-overlay.loader .loader::after {
        content: "";
        position: absolute;
        inset: -8%;
        border-radius: 50%;
        background: conic-gradient(from var(--rotate, 0deg), var(--ring-colors));
        filter: blur(var(--glow));
        opacity: .85;
        animation: gen-rotate var(--spin-speed) var(--spin-ease) infinite, glow-pulse 1.8s ease-in-out infinite alternate;
        z-index: 0;
    }

/* Orbits */
.mid-spinner-overlay.loader .inner {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    box-sizing: border-box;
    background: radial-gradient(circle at 85% 50%, #fff8 0 6%, #0000 12%), radial-gradient(circle at 15% 50%, #fff6 0 3%, #0000 9%);
    opacity: .9;
    filter: drop-shadow(0 0 6px color-mix(in oklch, var(--ctl-c1) 50%, transparent));
    z-index: 2;
}

    .mid-spinner-overlay.loader .inner.one {
        transform: rotateX(65deg) rotateY(-15deg);
        animation: orbit-1 1.6s linear infinite;
    }

    .mid-spinner-overlay.loader .inner.two {
        transform: rotateX(55deg) rotateY(20deg);
        animation: orbit-2 2.0s linear infinite;
    }

    .mid-spinner-overlay.loader .inner.three {
        transform: rotateX(70deg) rotateY(35deg);
        animation: orbit-3 2.6s linear infinite;
    }

/* Animations */
@keyframes gen-rotate {
    to {
        --rotate: 360deg;
    }
}

@keyframes glow-pulse {
    from {
        opacity: .65;
    }

    to {
        opacity: .95;
    }
}

@keyframes orbit-1 {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes orbit-2 {
    from {
        rotate: 360deg;
    }

    to {
        rotate: 0deg;
    }
}

@keyframes orbit-3 {
    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mid-spinner-overlay.loader,
    .mid-spinner-overlay.loader .loader::before,
    .mid-spinner-overlay.loader .loader::after,
    .mid-spinner-overlay.loader .inner {
        animation: none !important;
    }
}