/* AIghtBet Sports — drop-in loader (#02 sparkline draw + apex pop).
   Usage: <span class="ab-loader"><svg .../></span> (rendered by components/Loader.tsx)
   Sizes: .ab-loader-sm (32) · default (64) · .ab-loader-lg (96) · .ab-loader-xl (160)
   Override --size on .ab-loader for any custom px value.

   KAN-21358 — SMIL <animate> tags were swapped for CSS keyframes on inline SVG
   so Chromium can settle between frames (CDP Page.captureScreenshot was timing
   out 30s on /track while the loader was on screen). Visual is identical.
*/
.ab-loader {
  --size: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1;
}
.ab-loader > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ab-loader-sm { --size: 32px; }
.ab-loader-lg { --size: 96px; }
.ab-loader-xl { --size: 160px; }

.ab-loader-path {
  animation: ab-loader-stroke 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ab-loader-stroke {
  0%   { stroke-dashoffset: 220; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -220; }
}

.ab-loader-apex {
  r: 0;
  opacity: 0;
  animation: ab-loader-apex 2s linear infinite;
}
@keyframes ab-loader-apex {
  0%, 50%  { r: 0; opacity: 0; }
  60%, 90% { r: 5; opacity: 1; }
  100%     { r: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-loader-path,
  .ab-loader-apex {
    animation: none;
  }
}