/**
 * Jargan Branded Loader — SP-556
 *
 * The SINGLE source of truth for the branded 3-circle loading indicator used
 * anywhere in the app that is NOT the boot splash.
 *
 * Extracted from splash.css (`.circle-grid-svg` / `.circle-grid-circle1|2|3`
 * + `@keyframes c1|c2|c3`). Same 10s, 12-move, ease-in-out cycle so all three
 * circles return to their start position for a seamless loop; keyframes are
 * renamed `jgnLoaderC1|2|3` so this file is self-contained and can never
 * collide with splash.css. splash.css keeps its own copy for the boot splash —
 * that surface has extra concerns (cosmic-bg layering, `.spheres-in` fill flip,
 * responsive 68/92/112px sizing) that do not belong on an inline loader.
 *
 * Grid positions (SVG viewBox 0 0 130 130):
 *   TL (35,35)   TR (95,35)
 *   BL (35,95)   BR (95,95)
 * Movement distance: 60 SVG units per step.
 *
 * Colors: circle 1 is brand orange (`--jgn-loader-accent`), circles 2 and 3 are
 * `currentColor` so the loader reads correctly on light AND dark surfaces
 * without per-call-site color overrides. Use `.jgn-loader--mono` on surfaces
 * whose background is already brand orange (the accent circle would vanish).
 *
 * Markup is produced by utils/loader.js (`window.JarganLoader.markup()`), or in
 * static HTML via `<span data-jgn-loader data-jgn-size="sm"></span>`.
 */

/* ── Wrapper ── */

.jgn-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
  width: 20px;
  height: 20px;
}

.jgn-loader svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── Size modifiers ── */

.jgn-loader--xs { width: 14px; height: 14px; }
.jgn-loader--sm { width: 16px; height: 16px; }
.jgn-loader--md { width: 24px; height: 24px; }
.jgn-loader--lg { width: 40px; height: 40px; }
.jgn-loader--xl { width: 64px; height: 64px; }

/* ── Circles ── */

.jgn-loader-c1 {
  fill: var(--jgn-loader-accent, #DD5100);
  animation: jgnLoaderC1 10s ease-in-out infinite;
  will-change: transform;
}

.jgn-loader-c2 {
  fill: currentColor;
  animation: jgnLoaderC2 10s ease-in-out infinite;
  will-change: transform;
}

.jgn-loader-c3 {
  fill: currentColor;
  animation: jgnLoaderC3 10s ease-in-out infinite;
  will-change: transform;
}

/* Mono variant — for surfaces whose background IS brand orange, where the
   accent circle would be invisible. All three circles use currentColor. */
.jgn-loader--mono .jgn-loader-c1 { fill: currentColor; }

/* ── Circle 1 ──
   Start: TR (cx=95, cy=35)
   Path: TR → TL → BL → BR → TR   (moves at steps 1, 4, 7, 10) */
@keyframes jgnLoaderC1 {
  0%     { transform: translate(0, 0); }
  8.33%  { transform: translate(-60px, 0); }
  25%    { transform: translate(-60px, 0); }
  33.33% { transform: translate(-60px, 60px); }
  50%    { transform: translate(-60px, 60px); }
  58.33% { transform: translate(0, 60px); }
  75%    { transform: translate(0, 60px); }
  83.33% { transform: translate(0, 0); }
  100%   { transform: translate(0, 0); }
}

/* ── Circle 2 ──
   Start: BR (cx=95, cy=95)
   Path: BR → TR → TL → BL → BR   (moves at steps 2, 5, 8, 11) */
@keyframes jgnLoaderC2 {
  0%     { transform: translate(0, 0); }
  8.33%  { transform: translate(0, 0); }
  16.67% { transform: translate(0, -60px); }
  33.33% { transform: translate(0, -60px); }
  41.67% { transform: translate(-60px, -60px); }
  58.33% { transform: translate(-60px, -60px); }
  66.67% { transform: translate(-60px, 0); }
  83.33% { transform: translate(-60px, 0); }
  91.67% { transform: translate(0, 0); }
  100%   { transform: translate(0, 0); }
}

/* ── Circle 3 ──
   Start: BL (cx=35, cy=95)
   Path: BL → BR → TR → TL → BL   (moves at steps 3, 6, 9, 12) */
@keyframes jgnLoaderC3 {
  0%     { transform: translate(0, 0); }
  16.67% { transform: translate(0, 0); }
  25%    { transform: translate(60px, 0); }
  41.67% { transform: translate(60px, 0); }
  50%    { transform: translate(60px, -60px); }
  66.67% { transform: translate(60px, -60px); }
  75%    { transform: translate(0, -60px); }
  91.67% { transform: translate(0, -60px); }
  100%   { transform: translate(0, 0); }
}

/* ── Block variant — centered page / panel / list-level loading ── */

.jgn-loader-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 0;
  text-align: center;
}

.jgn-loader-block-text {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .jgn-loader-c1,
  .jgn-loader-c2,
  .jgn-loader-c3 {
    animation: none;
  }
}