/* ===============================
   SPINNER � Glass, Conic Ring, Orbits + Scan FX (APF Theme)
   Dark overlay + vignette + grain + iris halo + corner guides + indeterminate bar + label pulse
   =============================== */

/* Theme hooks (consumes your tokens; safe fallbacks) */
.apf-canvas {
    --apf-spin-bg: color-mix(in oklch, var(--surface-2, rgba(20,24,28,.86)) 97%, transparent);
    --apf-spin-border: color-mix(in oklch, var(--border, rgba(255,255,255,.12)) 85%, transparent);
    --apf-spin-text: var(--text-high, #f6f6f6);
    --apf-spin-accent-1: var(--ctl-c1, #6aa9ff);
    --apf-spin-accent-2: var(--ctl-c2, #8ef);
    --apf-spin-focus: var(--focus-ring, #7ab1ff);
    --apf-spin-shadow: 0 6px 22px rgba(0,0,0,.30);
    /* Tuning */
    --apf-spin-veil: rgba(10,12,14,.62); /* base dark veil (slightly lighter than previous .72) */
    --apf-spin-vign: rgba(0,0,0,.44); /* vignette edge strength (eased down a bit) */
    --apf-spin-grain: rgba(255,255,255,.030); /* ultra-subtle film grain dots */
    --apf-spin-corners: color-mix(in oklch, var(--apf-spin-focus) 55%, transparent); /* corner guides */
    --apf-spin-corner-w: 18px;
    --apf-spin-corner-t: 2px;
}

    /* Optional quick themes (toggle via .apf-canvas[data-spin-theme="..."]) */
    .apf-canvas[data-spin-theme="night"] {
        --apf-spin-veil: rgba(6,8,10,.66);
        --apf-spin-vign: rgba(0,0,0,.52);
    }

    .apf-canvas[data-spin-theme="day"] {
        --apf-spin-veil: rgba(245,247,250,.40);
        --apf-spin-vign: rgba(0,0,0,.08);
        --apf-spin-text: #0e1116;
    }

/* Overlay base (mounted inside .mid-canvas-wrapper) */
.mid-spinner-overlay {
    position: absolute;
    inset: 0;
    z-index: 282; /* above badges/toolbars */
    pointer-events: none;
}

    /* DARK, RICH OVERLAY (a hair more transparent than the previous pass) */
    .mid-spinner-overlay.loader {
        display: none;
        place-items: center;
        opacity: 0;
        transition: opacity .22s ease;
        /* Layer order: veil ? vignette ? glass floor ? corner guides ? fine grain */
        background:
        /* 1) base dark veil */
        linear-gradient(var(--apf-spin-veil), var(--apf-spin-veil)),
        /* 2) soft vignette toward edges */
        radial-gradient(120% 90% at 50% 55%, transparent 30%, var(--apf-spin-vign) 85%, var(--apf-spin-vign) 100%),
        /* 3) themed glass floor */
        radial-gradient(40% 40% at 50% 55%, color-mix(in oklch, var(--surface, #0b0e12) 94%, transparent), color-mix(in oklch, var(--surface, #0b0e12) 78%, transparent) 55%, color-mix(in oklch, var(--surface, #0b0e12) 66%, transparent) 100% ),
        /* 4) tasteful corner guides (no extra markup) */
        /* top-left / top-right / bottom-left / bottom-right */
        linear-gradient(90deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) top left / 100% var(--apf-spin-corner-t) no-repeat, linear-gradient(180deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) top left / var(--apf-spin-corner-t) 100% no-repeat, linear-gradient(-90deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) top right / 100% var(--apf-spin-corner-t) no-repeat, linear-gradient(180deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) top right / var(--apf-spin-corner-t) 100% no-repeat, linear-gradient(90deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) bottom left / 100% var(--apf-spin-corner-t) no-repeat, linear-gradient(0deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) bottom left / var(--apf-spin-corner-t) 100% no-repeat, linear-gradient(-90deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) bottom right / 100% var(--apf-spin-corner-t) no-repeat, linear-gradient(0deg, var(--apf-spin-corners) var(--apf-spin-corner-w), transparent 0) bottom right / var(--apf-spin-corner-t) 100% no-repeat,
        /* 5) ultra-subtle film grain */
        radial-gradient(1px 1px at 10% 20%, var(--apf-spin-grain) 0 1px, transparent 1.1px), radial-gradient(1px 1px at 70% 40%, var(--apf-spin-grain) 0 1px, transparent 1.1px), radial-gradient(1px 1px at 30% 80%, var(--apf-spin-grain) 0 1px, transparent 1.1px);
        background-size: auto, auto, auto, auto, auto, auto, auto, auto, /* 4� corner pairs */
        64px 64px, 64px 64px, 64px 64px; /* grain */

        backdrop-filter: blur(10px) saturate(130%);
        -webkit-backdrop-filter: blur(10px) saturate(130%);
    }

/* Active state (generating) */
.mid-canvas-wrapper.is-generating .mid-spinner-overlay.loader,
.mid-canvas-wrapper[data-generating="1"] .mid-spinner-overlay.loader,
.apf-canvas.is-generating .mid-spinner-overlay.loader,
.apf-canvas[data-generating="1"] .mid-spinner-overlay.loader {
    display: grid !important;
    opacity: 1 !important;
}

/* ====== Scan FX (no extra markup; pseudo-elements on the overlay) ====== */
/* Moving scan grid � tuned for slightly lighter plate */
.mid-spinner-overlay.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .28; /* was .42 on darker pass; eased for this mix */
    background: repeating-linear-gradient( to right, color-mix(in oklch, var(--apf-spin-focus) 42%, transparent) 0 1px, transparent 1px 12px ), repeating-linear-gradient( to bottom, color-mix(in oklch, var(--apf-spin-focus) 42%, transparent) 0 1px, transparent 1px 12px );
    animation: apfScanGrid 3.6s linear infinite;
    mix-blend-mode: screen;
}

/* Sweeping horizontal scan line */
.mid-spinner-overlay.loader::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 50%;
    pointer-events: none;
    background: linear-gradient( to bottom, transparent 0%, color-mix(in oklch, var(--apf-spin-accent-1) 62%, transparent) 46%, color-mix(in oklch, var(--apf-spin-accent-2) 68%, transparent) 54%, transparent 100% );
    filter: blur(8px);
    opacity: .62; /* down a notch to avoid glare */
    animation: apfScanSweep 2.4s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* ====== Loader core ====== */
.mid-spinner-overlay.loader .loader {
    position: relative;
    width: 120px;
    height: 120px;
    isolation: isolate;
    --ring: 3px;
    --glow: 18px;
    --spin-speed: 2.2s;
    --spin-ease: linear;
    --ring-colors: var(--apf-spin-accent-1), var(--apf-spin-focus) 40%, var(--apf-spin-accent-2), var(--apf-spin-accent-1);
}

    /* Conic gradient ring */
    .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: apfSpin var(--spin-speed) var(--spin-ease) infinite;
        z-index: 2;
    }

    /* Glow aura + iris halo */
    .mid-spinner-overlay.loader .loader::after {
        content: "";
        position: absolute;
        inset: -8%;
        border-radius: 50%;
        background: radial-gradient(65% 65% at 50% 50%, color-mix(in oklch, var(--apf-spin-accent-2) 18%, transparent), transparent 62%), conic-gradient(from var(--rotate, 0deg), var(--ring-colors)), radial-gradient(120% 120% at 50% 50%, color-mix(in oklch, var(--apf-spin-accent-1) 38%, transparent), transparent 60%);
        filter: blur(var(--glow));
        opacity: .94;
        animation: apfSpin var(--spin-speed) var(--spin-ease) infinite, apfGlow 1.9s ease-in-out infinite alternate;
        z-index: 1;
        mix-blend-mode: screen;
        box-shadow: inset 0 0 24px color-mix(in oklch, var(--apf-spin-accent-1) 26%, transparent), 0 0 60px color-mix(in oklch, var(--apf-spin-accent-2) 14%, transparent);
    }

/* Inner glass puck */
.mid-spinner-overlay.loader .glass {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff3, #0000 40%), linear-gradient(0deg, color-mix(in oklch, var(--apf-spin-bg) 100%, transparent), color-mix(in oklch, var(--apf-spin-bg) 92%, transparent) );
    border: 1px solid var(--apf-spin-border);
    box-shadow: var(--apf-spin-shadow);
    z-index: 3;
}

/* Orbits (tiny satellites) */
.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(--apf-spin-accent-1) 50%, transparent));
    z-index: 4;
}

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

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

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

/* Optional label � now with gentle pulse */
.mid-spinner-overlay.loader .label {
    position: absolute;
    inset: auto auto -42px 50%;
    transform: translateX(-50%);
    font: 600 12px/1.1 var(--font-ui, system-ui, sans-serif);
    color: var(--apf-spin-text);
    letter-spacing: .08em;
    opacity: .92;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    z-index: 5;
    animation: apfLabelPulse 2.8s ease-in-out infinite;
}

/* ====== Progress (from JS-injected [data-spin-progress]) ====== */
/* Base shell (JS may set width/position inline; we still harden visuals) */
.mid-spinner-overlay.loader [data-spin-progress] {
    position: absolute;
    inset: auto auto -18px 50%;
    transform: translateX(-50%);
    width: 168px;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(to right, #fff1, #fff1);
    box-shadow: 0 1px 8px rgba(0,0,0,.25);
}

    .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar {
        height: 100%;
        width: 0%; /* JS drives this to 0�100 */
        background: linear-gradient(90deg, var(--apf-spin-accent-1), var(--apf-spin-accent-2));
        transition: width .25s ease;
    }

    /* Indeterminate shimmer (enable by toggling data-indeterminate="1") */
    .mid-spinner-overlay.loader [data-spin-progress][data-indeterminate="1"] .apf-progress__bar {
        width: 40%;
        animation: apfIndeterminate 1.1s ease-in-out infinite;
    }

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

@keyframes apfGlow {
    from {
        opacity: .70;
    }

    to {
        opacity: .98;
    }
}

@keyframes apfOrbit1 {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes apfOrbit2 {
    from {
        rotate: 360deg;
    }

    to {
        rotate: 0deg;
    }
}

@keyframes apfOrbit3 {
    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}

@keyframes apfScanGrid {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 24px 0, 0 24px;
    }
}

@keyframes apfScanSweep {
    0%,100% {
        top: -25%;
        opacity: 0;
    }

    12% {
        opacity: .72;
    }

    50% {
        top: 75%;
        opacity: .38;
    }

    88% {
        opacity: .72;
    }
}

@keyframes apfIndeterminate {
    0% {
        margin-left: -45%;
    }

    50% {
        margin-left: 55%;
    }

    100% {
        margin-left: -45%;
    }
}

@keyframes apfLabelPulse {
    0%,100% {
        opacity: .90;
        transform: translateX(-50%) translateY(0);
    }

    50% {
        opacity: .99;
        transform: translateX(-50%) translateY(-1px);
    }
}

/* Reduced motion / transparency */
@media (prefers-reduced-motion: reduce) {
    .mid-spinner-overlay.loader,
    .mid-spinner-overlay.loader::before,
    .mid-spinner-overlay.loader::after,
    .mid-spinner-overlay.loader .loader::before,
    .mid-spinner-overlay.loader .loader::after,
    .mid-spinner-overlay.loader .inner,
    .mid-spinner-overlay.loader [data-spin-progress][data-indeterminate="1"] .apf-progress__bar,
    .mid-spinner-overlay.loader .label {
        animation: none !important;
        transition: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .mid-spinner-overlay.loader {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: linear-gradient(rgba(12,14,16,.4), rgba(12,14,16,.4)), radial-gradient(120% 90% at 50% 55%, transparent 30%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.55) 100%);
    }
}
/* Add/adjust these tokens (near your other spinner tokens) */
.apf-canvas {
    --apf-spin-edge: color-mix(in oklch, var(--surface-2, #0b0e12) 96%, black 4%); /* sealing ring */
    --apf-spin-edge-alpha: .92; /* tweak if you want a lighter/darker ring */
}

/* Overlay base � edge sealing to stop the white canvas peeking through */
.mid-spinner-overlay {
    border-radius: inherit; /* follow the frame corners */
    contain: paint; /* helps with backdrop compositing */
    will-change: opacity; /* keep it smooth */
}

    /* Replace/augment your existing .mid-spinner-overlay.loader rule with these extras */
    .mid-spinner-overlay.loader {
        /* your existing backgrounds stay as-is */
        border-radius: inherit;
        /* <<< Edge mask: real border + inset ring to �cap� any bleed >>> */
        border: 2px solid color-mix(in oklch, var(--apf-spin-edge) calc(100% * var(--apf-spin-edge-alpha)), transparent);
        background-clip: padding-box; /* keep the gradients off the border pixels */
        /* Inset ring darkens right at the edge (stops 1px white seam on some DPRs) */
        box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--apf-spin-edge) 88%, transparent),
        /* keep whatever outer shadows you like below this line */
        0 0 0 0 rgba(0,0,0,0); /* placeholder to avoid wiping your existing shadow chains */
        /* Compositing helpers (Chrome/Safari): slightly nudge to eliminate subpixel gaps */
        transform: translateZ(0); /* create its own layer */
        -webkit-transform: translateZ(0);
    }

/* If you want an even firmer cap (for super high-contrast art), bump the ring to 3px on HIDPI */
@media (min-resolution: 2dppx) {
    .mid-spinner-overlay.loader {
        border-width: 3px;
        box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--apf-spin-edge) 88%, transparent);
    }
}

/* Make sure the pseudo-els follow the radius too */
.mid-spinner-overlay.loader::before,
.mid-spinner-overlay.loader::after {
    border-radius: inherit;
}