/* ── <globe-loader> styles ─────────────────────────────────────────
 *
 * Pure CSS @keyframes for the three concentric whirl rings. The globe
 * itself is animated via requestAnimationFrame in globe-loader.js
 * because its rotation needs to drive a re-projection of country paths.
 *
 * Whirl rings can stay on the GPU as plain transform animations —
 * different speeds + alternating CW/CCW gives the asymmetric "orbit"
 * shimmer the spec calls for. Speeds are 6s / 9s / 14s, opacities live
 * on the <circle> as an SVG attribute (set in JS) so they inherit
 * currentColor cleanly without fighting CSS specificity.
 *
 * Container: the host <globe-loader> element is inline-flex so it can
 * sit naturally beside text or as a centered block. role="status" +
 * aria-label="Loading" are set in connectedCallback().
 */

globe-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Inherit currentColor from parent so the loader picks up theme. */
  color: inherit;
  /* When centered as a splash, the parent should set width/height
     to match `size` (default 200×200) — the SVG itself fills its host. */
}

globe-loader .gl-svg {
  display: block;
  color: inherit;
}

/* ── Whirl ring rotations ──────────────────────────────────────────
 * Three speeds, alternating CW/CCW. linear timing so the rings don't
 * pulse — they should feel like steady orbital motion. transform-origin
 * is set in JS (per-element) to keep the ring centered on the SVG
 * coordinate space; without it Firefox rotates around the bounding box. */

@keyframes glWhirlCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes glWhirlCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

globe-loader .gl-whirl {
  /* GPU-friendly: only transform animates, no layout/paint work. */
  will-change: transform;
}

globe-loader .gl-whirl-1 { animation: glWhirlCW  6s  linear infinite; }
globe-loader .gl-whirl-2 { animation: glWhirlCCW 9s  linear infinite; }
globe-loader .gl-whirl-3 { animation: glWhirlCW  14s linear infinite; }

/* Reduced-motion accessibility: anyone who's opted out of motion gets
 * a static globe — the shape conveys "loading" plenty without the spin. */
@media (prefers-reduced-motion: reduce) {
  globe-loader .gl-whirl,
  globe-loader .gl-whirl-1,
  globe-loader .gl-whirl-2,
  globe-loader .gl-whirl-3 {
    animation: none;
  }
}