/* assets/css/apadd-spinner.css
   APADD * Spinner vNEXT - Halo Radial + Center SVG (NO GRID / NO RINGS)
   - Visually matches APADD AI modal (glass + halo + vignette)
   - Subtle token-driven "aurora fog" animation (no concentric rings)
   - Keeps center SVG animation intact
   - Fullscreen (body-mounted) + scoped supported
   - Token-first: APF tokens -> CTL tokens -> safe fallbacks
*/

/* ========================================================================== */
/* Token bridge (scoped to spinner root)                                       */
/* ========================================================================== */

.apadd-spinner.apadd-spin{
  /* Bridge to your token system (APF -> CTL -> fallbacks) */
  --apadd-c1:        var(--apf-c1, var(--ctl-c1, #ec8639));
  --apadd-c2:        var(--apf-c2, var(--ctl-c2, #8ef));
  --apadd-text:      var(--apf-text, var(--text-high, #f6f6f6));
  --apadd-muted:     var(--apf-text-mid, var(--text-mid, rgba(246,246,246,.76)));
  --apadd-surface-2: var(--apf-surface-2, var(--surface-2, rgba(20,24,28,.86)));
  --apadd-border:    var(--apf-border, var(--border, rgba(255,255,255,.12)));
  --apadd-focus:     var(--apf-focus, var(--focus-ring, color-mix(in oklch, var(--apadd-c2) 68%, transparent)));

  /* Puck sizing */
  --puck: 160px;

  /* Center SVG flip */
  --owl-ry-sec: 6s;
  --owl-ry-ease: linear;
  --owl-size-pct: 44%;

  /* Overlay / vignette */
  --apadd-spin-vign: color-mix(in oklch, #000 56%, transparent);

  /* Overlay halo intensity (fullscreen radial backdrop) */
  --apadd-backdrop-c1: color-mix(in oklch, var(--apadd-c1) 22%, transparent);
  --apadd-backdrop-c2: color-mix(in oklch, var(--apadd-c2) 18%, transparent);
  --apadd-backdrop-c3: color-mix(in oklch, var(--apadd-text) 8%, transparent);
  --apadd-backdrop-shift: 7.2s;
  --apadd-loader-rot: 750ms;
  --apadd-loader-ease: ease-in-out;
  --apadd-hue-rotate: 5000ms;
  --apadd-loader-glow: color-mix(in oklch, var(--apadd-c2) 72%, var(--apadd-c1) 28%);

  /* Orb / core FX tuning */
  --apadd-orb-size: clamp(24px, calc(var(--puck) * .25), 40px);
  --apadd-orb-shadow-a:
    0 0 14px color-mix(in oklch, #fff 28%, transparent),
    0 0 34px color-mix(in oklch, var(--apadd-c2) 56%, transparent),
    0 0 58px color-mix(in oklch, var(--apadd-c2) 24%, transparent);
  --apadd-orb-shadow-b:
    0 0 14px color-mix(in oklch, #fff 24%, transparent),
    0 0 34px color-mix(in oklch, var(--apadd-c1) 60%, transparent),
    0 0 58px color-mix(in oklch, var(--apadd-c1) 28%, transparent);
  --apadd-orb-alpha: .96;
  --apadd-core-ring: color-mix(in oklch, var(--apadd-c2) 22%, transparent);
  --apadd-core-ring-2: color-mix(in oklch, var(--apadd-c1) 18%, transparent);
  --apadd-core-glow:
    0 22px 58px rgba(0,0,0,.34),
    0 0 0 1px color-mix(in oklch, var(--apadd-border) 72%, transparent),
    0 0 38px color-mix(in oklch, var(--apadd-c2) 10%, transparent);

  /* Z */
  --apadd-spin-z: 999999;

  /* ---------------------------------------------------------------------- */
  /* NEW: Snippet + progress micro-interaction tuning                         */
  /* ---------------------------------------------------------------------- */
  --apadd-snips-enter: 220ms;
  --apadd-snips-exit:  200ms;
  --apadd-snips-ease:  cubic-bezier(.2,.9,.2,1);
  --apadd-snips-blur:  .55px;
  --apadd-snips-lift:  3px;

  --apadd-snips-pill-alpha: .58; /* glass density */
  --apadd-snips-pill-blur:  12px;
  --apadd-snips-pill-sat:   140%;

  --apadd-snips-text-alpha: .92;
  --apadd-snips-text-shine: 1; /* 0..1 */

  --apadd-prog-glow:  0 0 0 1px color-mix(in oklch, var(--apadd-c2) 10%, transparent),
                      0 8px 22px rgba(0,0,0,.30),
                      0 0 26px color-mix(in oklch, var(--apadd-c1) 14%, transparent);

  --apadd-prog-h: 5px;
  --apadd-prog-w: 184px;

  /* ---------------------------------------------------------------------- */
  /* NEW: Label/Sub vertical rhythm                                          */
  /*  - These two lines are absolutely positioned (bottom offsets).           */
  /*  - Adjust --apadd-label-sub-gap to increase/decrease space between them. */
  /* ---------------------------------------------------------------------- */
  --apadd-label-bottom: -38px;
  --apadd-label-sub-gap: 18px; /* increase for more space */
  /* Sub sits BELOW the label (more negative bottom = lower on screen) */
  --apadd-sub-bottom: calc(var(--apadd-label-bottom) - var(--apadd-label-sub-gap) - 14px);

  /* safety */
  animation: none !important;
  transform: none !important;
}

/* Optional theme switches */
.apadd-spinner.apadd-spin[data-spin-theme="night"]{
  --apadd-spin-vign: color-mix(in oklch, #000 62%, transparent);
  --apadd-backdrop-c1: color-mix(in oklch, var(--apadd-c1) 24%, transparent);
  --apadd-backdrop-c2: color-mix(in oklch, var(--apadd-c2) 20%, transparent);
  --apadd-backdrop-c3: color-mix(in oklch, var(--apadd-text) 10%, transparent);
  --apadd-orb-alpha: 1;

  --apadd-snips-pill-alpha: .62;
  --apadd-snips-text-alpha: .94;
}
.apadd-spinner.apadd-spin[data-spin-theme="day"]{
  --apadd-spin-vign: color-mix(in oklch, #000 14%, transparent);
  --apadd-text: #0e1116;
  --apadd-muted: rgba(14,17,22,.72);

  --apadd-backdrop-c1: color-mix(in oklch, var(--apadd-c1) 16%, transparent);
  --apadd-backdrop-c2: color-mix(in oklch, var(--apadd-c2) 12%, transparent);
  --apadd-backdrop-c3: color-mix(in oklch, var(--apadd-text) 6%, transparent);
  --apadd-orb-alpha: .86;

  --apadd-snips-pill-alpha: .54;
  --apadd-snips-text-alpha: .90;
}

/* ========================================================================== */
/* Root overlay container                                                     */
/* ========================================================================== */

.apadd-spinner.apadd-spin{
  display:none !important;
  pointer-events:none;
  isolation:isolate;
  z-index: var(--apadd-spin-z);

  /* wipe any legacy fixed sizing */
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
}

.apadd-spinner.apadd-spin[data-open="1"]{
  display:grid !important;
  pointer-events:auto;
}

/* Fullscreen (body child) */
body > .apadd-spinner.apadd-spin{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  place-items: center;
}

/* Scoped (mounted inside a root element) */
.apadd-spinner.apadd-spin[data-scoped="1"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  place-items: center;
}

/* ========================================================================== */
/* 3rd-party guard                                                              */
/* ========================================================================== */

/* Intentionally empty: the two-orb effect is rendered by explicit dot nodes,
   so legacy theme pseudo-element resets remain disabled here. */

/* ========================================================================== */
/* Overlay base                                                                */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay{
  position:absolute;
  inset:0;
  z-index: 0;
  pointer-events:none;
  contain: paint;
  will-change: opacity;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader{
  display:none;
  place-items:center;
  opacity:0;
  transition: opacity .22s ease;
  overflow:hidden;
  isolation:isolate;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--apadd-surface-2) 30%, transparent),
    color-mix(in oklch, var(--apadd-surface-2) 42%, transparent));
  border: 0 !important;
  background-clip: padding-box;
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  transform: translateZ(0);
  border-radius:10px;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader::before,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader::after{
  content:none !important;
}

/* Active state (also supports data-open on overlay) */
.apadd-spinner.apadd-spin[data-open="1"] .mid-spinner-overlay.loader,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader[data-open="1"]{
  display:grid !important;
  opacity:1 !important;
}

/* Hard-disable any legacy scan nodes if they exist in markup */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader > .apf-scan,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader > .apf-sweep{
  display:none !important;
}

/* ========================================================================== */
/* Loader core                                                                */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apf-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  pointer-events:none;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apf-center-box{
  width: min(100px, var(--puck));
  height: min(100px, var(--puck));
  position:relative;
  box-sizing:border-box;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apf-center-box::before,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apf-center-box::after{
  content:none !important;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
  will-change: transform, filter;
  isolation:isolate;
  animation:
    apaddRotAnim var(--apadd-loader-rot) var(--apadd-loader-ease) infinite,
    apaddColorRot var(--apadd-hue-rotate) linear infinite;
}

/* -------------------------------------------------------------------------- */
/* Exact two-orb loader with stacked disc echoes                              */
/* -------------------------------------------------------------------------- */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader > .ring-halo,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .inner,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .glass{
  display:none !important;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::before,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader::after{
  content:none !important;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot{
  position:absolute;
  width:25%;
  height:25%;
  top:0;
  left:0;
  display:block;
  pointer-events:none;
  --apadd-echo-x-1: -7px;
  --apadd-echo-y-1: 10px;
  --apadd-echo-x-2: -12px;
  --apadd-echo-y-2: 20px;
  --apadd-echo-x-3: -15px;
  --apadd-echo-y-3: 31px;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot--b{
  top:auto;
  left:auto;
  right:0;
  bottom:0;
  --apadd-echo-x-1: 7px;
  --apadd-echo-y-1: -10px;
  --apadd-echo-x-2: 12px;
  --apadd-echo-y-2: -20px;
  --apadd-echo-x-3: 15px;
  --apadd-echo-y-3: -31px;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__echo,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__core{
  position:absolute;
  inset:0;
  display:block;
  border-radius:50%;
  background-color: color-mix(in oklch, var(--apadd-text) 97%, transparent);
  z-index:4;
  box-shadow:
    0 0 40px var(--apadd-loader-glow),
    0 0 10px var(--apadd-loader-glow),
    0 0 64px color-mix(in oklch, var(--apadd-loader-glow) 22%, transparent);
  animation: apaddDiscGlow 1.8s ease-in-out infinite alternate;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot--b .apadd-spin-dot__core{
  animation-delay:-.9s;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__echo{
  box-shadow:
    0 0 32px color-mix(in oklch, var(--apadd-loader-glow) 90%, transparent),
    0 0 8px color-mix(in oklch, var(--apadd-loader-glow) 96%, transparent);
  animation: apaddEchoGlow 1.9s ease-in-out infinite alternate;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot--b .apadd-spin-dot__echo{
  animation-delay:-1.05s;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__echo--1{
  z-index:3;
  opacity:.78;
  transform:translate(var(--apadd-echo-x-1), var(--apadd-echo-y-1)) scale(.94);
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__echo--2{
  z-index:2;
  opacity:.54;
  transform:translate(var(--apadd-echo-x-2), var(--apadd-echo-y-2)) scale(.88);
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__echo--3{
  z-index:1;
  opacity:.34;
  transform:translate(var(--apadd-echo-x-3), var(--apadd-echo-y-3)) scale(.8);
}

/* ========================================================================== */
/* Center SVG slot (kept separate so it does not rotate with the loader)      */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:7;
  pointer-events:none;

  perspective:1000px;
  -webkit-perspective:1000px;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg::before{
  content:"";
  position:absolute;
  inset:50%;
  width: calc(min(100px, var(--puck)) * 2.35);
  height: calc(min(100px, var(--puck)) * 2.35);
  transform: translate(-50%, -50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in oklch, var(--apadd-text) 20%, transparent) 0%,
      color-mix(in oklch, var(--apadd-c2) 36%, transparent) 28%,
      color-mix(in oklch, var(--apadd-c1) 28%, transparent) 52%,
      transparent 80%),
    radial-gradient(circle at 33% 28%,
      color-mix(in oklch, var(--apadd-c2) 28%, transparent) 0%,
      transparent 66%),
    radial-gradient(circle at 68% 72%,
      color-mix(in oklch, var(--apadd-c1) 24%, transparent) 0%,
      transparent 72%);
  filter: blur(14px) saturate(138%);
  opacity:.58;
  animation: apaddHaloPulse 4.2s ease-in-out infinite;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg::after{
  content:"";
  position:absolute;
  inset:50%;
  width: calc(min(100px, var(--puck)) * 2.12);
  height: calc(min(100px, var(--puck)) * 2.12);
  transform: translate(-50%, -50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle,
      transparent 0 41%,
      color-mix(in oklch, var(--apadd-c2) 18%, transparent) 41.4%,
      transparent 42.1%,
      transparent 53%,
      color-mix(in oklch, var(--apadd-text) 12%, transparent) 53.35%,
      transparent 54.1%,
      transparent 64.5%,
      color-mix(in oklch, var(--apadd-c1) 16%, transparent) 64.9%,
      transparent 65.6%,
      transparent 76%,
      color-mix(in oklch, var(--apadd-c2) 11%, transparent) 76.3%,
      transparent 77%);
  filter: blur(.45px) saturate(145%);
  opacity:.34;
  mix-blend-mode: screen;
  animation: apaddRingPulse 5.8s ease-in-out infinite;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > svg,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > object,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > img{
  width: var(--owl-size-pct);
  height:auto;
  display:block;

  transform-style:preserve-3d;
  backface-visibility:visible;
  transform-origin:50% 50%;

  animation: apaddOwlRotateY var(--owl-ry-sec) var(--owl-ry-ease) infinite;

  color: var(--apadd-text);
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--apadd-c2) 34%, transparent))
          drop-shadow(0 0 24px color-mix(in oklch, var(--apadd-c1) 28%, transparent));
}

/* ========================================================================== */
/* Label + progress                                                           */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .label{
  position:absolute;
  left:50%;
  bottom: var(--apadd-label-bottom);
  transform:translateX(-50%);
  font:800 12px/1.1 var(--font-ui, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  letter-spacing:.10em;

  background: linear-gradient(90deg,
    color-mix(in oklch, var(--apadd-text) 72%, transparent),
    var(--apadd-text),
    color-mix(in oklch, var(--apadd-c2) 65%, var(--apadd-text) 35%),
    var(--apadd-text)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  background-size: 220% 100%;
  animation: apaddLabelPulse 2.6s ease-in-out infinite, apaddLabelShimmer 1.9s linear infinite;
  transition: opacity .18s ease, filter .18s ease;
  z-index:8;
  text-align:center;
  max-width: min(520px, 92vw);
  padding: 0 10px;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .label.apf-label-swap{
  opacity:.20;
  filter: blur(.3px);
}

/* ========================================================================== */
/* NEW: Snippet line (data-spin-sub) - subtle enter/exit + gradient text       */
/* - JS currently does: sub.style.opacity='0.18'; then restores                */
/* - We enhance with animations + mask gradient + caret + sheen                */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  position:absolute;
  left:50%;
  bottom: var(--apadd-sub-bottom);
  transform:translateX(-50%);
  z-index:8;

  max-width: min(560px, 94vw);
  padding: 7px 12px;

  font: 750 11.5px/1.15 var(--font-ui, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  letter-spacing: .09em;

  /* Theme-driven "text glow gradient" */
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--apadd-text) 76%, transparent),
    color-mix(in oklch, var(--apadd-text) 92%, transparent),
    color-mix(in oklch, var(--apadd-c2) 58%, var(--apadd-text) 42%),
    color-mix(in oklch, var(--apadd-text) 92%, transparent)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Subtle pill glass */
  background-color: color-mix(in oklch, var(--apadd-surface-2) calc(var(--apadd-snips-pill-alpha) * 100%), transparent);
  border: 1px solid color-mix(in oklch, var(--apadd-border) 70%, transparent);
  border-radius: 999px;

  /* Layered pill glints */
  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    0 0 0 1px color-mix(in oklch, var(--apadd-c2) 10%, transparent),
    0 0 22px color-mix(in oklch, var(--apadd-c1) 10%, transparent);

  backdrop-filter: blur(var(--apadd-snips-pill-blur)) saturate(var(--apadd-snips-pill-sat));
  -webkit-backdrop-filter: blur(var(--apadd-snips-pill-blur)) saturate(var(--apadd-snips-pill-sat));

  /* Motion */
  opacity: var(--apadd-snips-text-alpha);
  transform: translateX(-50%) translateY(0);
  filter: drop-shadow(0 1px 10px rgba(0,0,0,.18));
  will-change: opacity, transform, filter;

  transition:
    opacity var(--apadd-snips-exit) var(--apadd-snips-ease),
    transform var(--apadd-snips-exit) var(--apadd-snips-ease),
    filter var(--apadd-snips-exit) var(--apadd-snips-ease);

  /* Truncation with a soft fade at the end */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 86%, transparent 100%);

  /* Subtle shimmer on the glyphs (not the pill) */
  background-size: 260% 100%;
  animation: apaddSnipTextShimmer 2.6s linear infinite;
}

/* When JS briefly drops opacity for swap, we add a tiny drift + blur */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub][style*="opacity: 0.18"],
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub][style*="opacity:0.18"]{
  transform: translateX(-50%) translateY(var(--apadd-snips-lift));
  filter: blur(var(--apadd-snips-blur));
}

/* Optional: caret on snippets (toggle via JS if desired) */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub].has-caret::after{
  content:"";
  display:inline-block;
  width: .55ch;
  height: .95em;
  margin-left: .35ch;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--apadd-c2) 70%, transparent),
    color-mix(in oklch, var(--apadd-c1) 55%, transparent)
  );
  opacity:.34;
  animation: apaddCaretBlink .72s steps(1,end) infinite;
  vertical-align: -0.1em;
}

/* Pop-in animation when unhidden (works because JS toggles [hidden]) */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]:not([hidden]){
  animation: apaddSnipEnter var(--apadd-snips-enter) var(--apadd-snips-ease) 1;
}

/* Hidden */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub][hidden]{
  display:none !important;
}

/* ========================================================================== */
/* Progress bar (data-spin-progress) - subtle glow + sheen + theme gradient    */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress]{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  width: var(--apadd-prog-w);
  height: var(--apadd-prog-h);
  border-radius:999px;
  overflow:hidden;

  background:
    linear-gradient(to right,
      color-mix(in oklch, var(--apadd-border) 62%, transparent),
      color-mix(in oklch, var(--apadd-border) 32%, transparent)
    );
  box-shadow: var(--apadd-prog-glow);
  z-index:8;

  /* Tiny glass */
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar{
  height:100%;
  width:0%;

  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--apadd-c1) 86%, transparent),
      color-mix(in oklch, var(--apadd-c2) 88%, transparent)
    );
  filter: saturate(1.16) brightness(1.05);
  position:relative;

  /* Smooth progress updates */
  transition: width .32s var(--apadd-snips-ease);
}

/* Sheen overlay */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background:
    radial-gradient(28px 12px at 20% 50%, color-mix(in oklch, #fff 18%, transparent), transparent 62%),
    radial-gradient(26px 12px at 68% 50%, color-mix(in oklch, #fff 14%, transparent), transparent 62%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity:.42;
  mix-blend-mode: screen;
  transform: translateX(-18%);
  animation: apaddProgSheen 1.55s ease-in-out infinite;
  pointer-events:none;
}

/* Indeterminate */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress][data-indeterminate="1"] .apf-progress__bar{
  width:42%;
  animation: apaddIndeterminate 1.15s ease-in-out infinite;
}

/* Hide */
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress][hidden]{
  display:none !important;
}

/* ========================================================================== */
/* Keyframes                                                                  */
/* ========================================================================== */

@keyframes apaddRotAnim{
  0%{ rotate: 0deg; }
  100%{ rotate: 360deg; }
}

@keyframes apaddColorRot{
  0%{ filter: hue-rotate(0deg); }
  100%{ filter: hue-rotate(360deg); }
}

@keyframes apaddIndeterminate{
  0%{ margin-left:-45%; }
  50%{ margin-left:55%; }
  100%{ margin-left:-45%; }
}

@keyframes apaddLabelPulse{
  0%,100%{opacity:.92; transform:translateX(-50%) translateY(0);}
  50%{opacity:1; transform:translateX(-50%) translateY(-1px);}
}
@keyframes apaddLabelShimmer{
  0%{background-position:0% 50%}
  100%{background-position:220% 50%}
}

/* Keep your spinning/flip SVG intact */
@keyframes apaddOwlRotateY{
  0%{transform:rotateY(0)}
  50%{transform:rotateY(180deg)}
  100%{transform:rotateY(360deg)}
}

@keyframes apaddHaloPulse{
  0%,100%{
    transform: translate(-50%, -50%) scale(.96);
    opacity:.78;
    filter: blur(16px) saturate(142%);
  }
  50%{
    transform: translate(-50%, -50%) scale(1.08);
    opacity:.58;
    filter: blur(22px) saturate(164%);
  }
}

@keyframes apaddRingPulse{
  0%,100%{
    transform: translate(-50%, -50%) scale(.985);
    opacity:.44;
  }
  50%{
    transform: translate(-50%, -50%) scale(1.04);
    opacity:.88;
  }
}

@keyframes apaddDiscGlow{
  0%{
    opacity:.92;
    filter: brightness(.98) saturate(.98);
  }
  100%{
    opacity:.58;
    filter: brightness(1.16) saturate(1.14);
  }
}

@keyframes apaddEchoGlow{
  0%{
    filter: brightness(.94) saturate(.96);
  }
  100%{
    filter: brightness(1.12) saturate(1.1);
  }
}

/* NEW: Snippet enter */
@keyframes apaddSnipEnter{
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(calc(var(--apadd-snips-lift) + 4px));
    filter: blur(1.2px);
  }
  70%{
    opacity: var(--apadd-snips-text-alpha);
    transform: translateX(-50%) translateY(-1px);
    filter: blur(.25px);
  }
  100%{
    opacity: var(--apadd-snips-text-alpha);
    transform: translateX(-50%) translateY(0);
    filter: none;
  }
}

/* NEW: Snippet text shimmer (subtle) */
@keyframes apaddSnipTextShimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 260% 50%; }
}

/* Snippet caret */
@keyframes apaddCaretBlink{ 0%,45%{opacity:.88} 46%,100%{opacity:.10} }

/* Progress sheen */
@keyframes apaddProgSheen{
  0%{ transform: translateX(-18%); opacity:.26; }
  50%{ opacity:.52; }
  100%{ transform: translateX(18%); opacity:.26; }
}

/* ========================================================================== */
/* A11y / prefs                                                               */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .loader,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__echo,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .apadd-spin-dot__core,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg::before,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg::after,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress][data-indeterminate="1"] .apf-progress__bar,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .label,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > svg,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > object,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > img,
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
    animation:none !important;
    transition:none !important;
  }
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar{
    transition:none !important;
  }
}

@media (prefers-reduced-transparency: reduce){
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader{
    background:#000 !important;
  }

  .apadd-spinner.apadd-spin{
    --apadd-snips-pill-alpha: .44;
    --apadd-snips-pill-blur: 0px;
  }

  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub],
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress]{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* Extra safety: prevent inherited transform animations */
.apadd-spinner.apadd-spin,
.apadd-spinner.apadd-spin *{
  animation-play-state: running;
  transform-style: flat;
}
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader .center-svg > svg,
.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress] .apf-progress__bar{
  transform-style: preserve-3d;
}

/* Mobile tuning */
@media (max-width: 520px){
  .apadd-spinner.apadd-spin{
    --owl-size-pct: 48%;
    --apadd-orb-size: 24px;
    --apadd-label-bottom: -36px;
    --apadd-label-sub-gap: 16px;
  }
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{ font-size: 10.8px; letter-spacing:.082em; }
  .apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-progress]{ bottom:-18px; width: 168px; }
}

/* ========================================================================== */
/* Snippet as a true "pill" (better contrast)                                 */
/* ========================================================================== */

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]{
  padding: 8px 12px;
  border-radius: 999px;
  background:
    radial-gradient(220px 60px at 18% 30%, color-mix(in oklch, var(--apadd-c2) 16%, transparent), transparent 70%),
    radial-gradient(220px 60px at 82% 70%, color-mix(in oklch, var(--apadd-c1) 14%, transparent), transparent 72%),
    color-mix(in oklch, var(--apadd-surface-2) 72%, transparent);
  border: 1px solid color-mix(in oklch, var(--apadd-border) 78%, transparent);
  box-shadow:
    0 10px 26px rgba(0,0,0,.26),
    0 0 0 1px color-mix(in oklch, var(--apadd-c2) 12%, transparent),
    0 0 22px color-mix(in oklch, var(--apadd-c1) 12%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: color-mix(in oklch, var(--apadd-text) 90%, transparent);
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
  isolation: isolate;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub]::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 999px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--apadd-c1) 10%, transparent),
      transparent 40%,
      color-mix(in oklch, var(--apadd-c2) 12%, transparent)
    );
  opacity:.9;
  mix-blend-mode: screen;
}

.apadd-spinner.apadd-spin .mid-spinner-overlay.loader [data-spin-sub].has-caret::after{
  opacity:.78;
}