/* sg-spinner — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Indicador de carregamento, byte a byte do <style> de components/feedback/spinner.card.html
 * (bundle 8cd72241, ZIP 48ebf484759c), sem o botão de exemplo e o seletor flutuante do card.
 * Mudanças mecânicas e reversíveis: `.sp` → `.sg-spinner` (nome do Spinner.jsx), os tons
 * `.muted` / `.oncolor` → `.sg-spinner--muted` / `--oncolor`, e cada um dos 20 estilos
 * (`.cv1`…`.cv20`) passa a valer no seu valor do eixo data-spinner (design/axis_css.py).
 * Tamanho por --sz (14/18/24/36). Seis estilos têm miolo próprio (pontos, barras, raios, grade,
 * onda, logo): quem o monta é js/widgets/spinner.js, como o script do card.
 * Sem tokens de tempo: tudo aqui é laço infinito, e encolher um laço com o eixo Movimento
 * juntaria as fases (mesmo motivo do button.css).
 * Marcação: {% sg_spinner "md" %} (design/templatetags/sg_spinner.py). */
  /* ════════ BASE — tamanho via --sz, cor via --c ════════ */
  .sg-spinner{ --sz:24px; --c:var(--primary); --tw:3px; width:var(--sz); height:var(--sz); display:inline-block; flex:none; color:var(--c); }
  .sg-spinner.sg-spinner--muted{ --c:var(--text-subtle); }
  .sg-spinner.sg-spinner--oncolor{ --c:#fff; }

  @media (prefers-reduced-motion: reduce){ .sg-spinner *, .sg-spinner{ animation-duration:0s !important; } }

  /* 01 · ARCO — anel com lacuna girando (padrão) */
  @scope ([data-spinner="ring-gap"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ border-radius:50%; border:var(--tw) solid color-mix(in srgb,var(--c) 18%, transparent); border-top-color:var(--c); animation:spSpin .7s linear infinite; } }
  @keyframes spSpin{ to{ transform:rotate(360deg); } }

  /* 02 · ANEL DUPLO — dois arcos contrários */
  @scope ([data-spinner="dual-ring"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; } }
  @scope ([data-spinner="dual-ring"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before,.sg-spinner/*data-spinner*/::after{ content:""; position:absolute; inset:0; border-radius:50%; border:var(--tw) solid transparent; } }
  @scope ([data-spinner="dual-ring"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before{ border-top-color:var(--c); animation:spSpin .8s linear infinite; } }
  @scope ([data-spinner="dual-ring"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::after{ inset:calc(var(--tw) + 2px); border-bottom-color:color-mix(in srgb,var(--c) 55%, transparent); animation:spSpin 1.1s linear infinite reverse; } }

  /* 03 · PONTOS — três pontos pulando */
  @scope ([data-spinner="dots"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ display:inline-flex; align-items:center; gap:calc(var(--sz)*.16); width:auto; } }
  @scope ([data-spinner="dots"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i{ width:calc(var(--sz)*.26); height:calc(var(--sz)*.26); border-radius:50%; background:var(--c); animation:spBounce 1s var(--ease-in-out) infinite; } }
  @scope ([data-spinner="dots"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i:nth-child(2){ animation-delay:.15s; } } @scope ([data-spinner="dots"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i:nth-child(3){ animation-delay:.3s; } }
  @keyframes spBounce{ 0%,80%,100%{ transform:translateY(0); opacity:.45; } 40%{ transform:translateY(-45%); opacity:1; } }

  /* 04 · PULSO — círculo que cresce e some */
  @scope ([data-spinner="pulse"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; } }
  @scope ([data-spinner="pulse"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before,.sg-spinner/*data-spinner*/::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--c); opacity:.6; animation:spPulse 1.4s var(--ease-out) infinite; } }
  @scope ([data-spinner="pulse"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::after{ animation-delay:.7s; } }
  @keyframes spPulse{ 0%{ transform:scale(.2); opacity:.7; } 100%{ transform:scale(1); opacity:0; } }

  /* 05 · BARRAS — equalizador de 4 barras */
  @scope ([data-spinner="bars"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ display:inline-flex; align-items:center; gap:calc(var(--sz)*.13); width:auto; } }
  @scope ([data-spinner="bars"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i{ width:calc(var(--sz)*.16); height:100%; border-radius:var(--radius-full); background:var(--c); animation:spBars 1s var(--ease-in-out) infinite; } }
  @scope ([data-spinner="bars"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i:nth-child(2){ animation-delay:.15s; } } @scope ([data-spinner="bars"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i:nth-child(3){ animation-delay:.3s; } } @scope ([data-spinner="bars"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i:nth-child(4){ animation-delay:.45s; } }
  @keyframes spBars{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

  /* 06 · TRACEJADO — anel pontilhado girando */
  @scope ([data-spinner="dashed"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ border-radius:50%; border:var(--tw) dashed var(--c); animation:spSpin 2s linear infinite; } }

  /* 07 · CÔNICO — varredura cônica suave */
  @scope ([data-spinner="conic"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ border-radius:50%; background:conic-gradient(from 0deg, transparent, var(--c)); animation:spSpin .8s linear infinite;
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--tw)), #000 0); mask:radial-gradient(farthest-side, transparent calc(100% - var(--tw)), #000 0); } }

  /* 08 · ÓRBITA — ponto orbitando o centro */
  @scope ([data-spinner="orbit"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; animation:spSpin 1s linear infinite; } }
  @scope ([data-spinner="orbit"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:calc(var(--sz)*.28); height:calc(var(--sz)*.28); border-radius:50%; background:var(--c); } }
  @scope ([data-spinner="orbit"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--c) 16%, transparent); } }

  /* 09 · RAIOS — 8 raios com fade (padrão iOS) */
  @scope ([data-spinner="spokes"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; animation:spSpin 1s steps(8) infinite; } }
  @scope ([data-spinner="spokes"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i{ position:absolute; top:0; left:50%; width:calc(var(--sz)*.1); height:calc(var(--sz)*.28); margin-left:calc(var(--sz)*-.05); border-radius:var(--radius-full);
    background:var(--c); transform-origin:center calc(var(--sz)*.5); } }
  @keyframes spFade{ to{ opacity:.18; } }

  /* 10 · QUADRADO — quadrado que vira em duas faces */
  @scope ([data-spinner="flip"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ border-radius:3px; background:var(--c); animation:spFlip 1.2s var(--ease-in-out) infinite; } }
  @keyframes spFlip{ 0%{ transform:perspective(120px) rotateX(0) rotateY(0); }
    50%{ transform:perspective(120px) rotateX(-180deg) rotateY(0); }
    100%{ transform:perspective(120px) rotateX(-180deg) rotateY(-180deg); } }

  /* 11 · GRADE — 9 pontos numa malha 3×3 pulsando */
  @scope ([data-spinner="grid"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:calc(var(--sz)*.13); } }
  @scope ([data-spinner="grid"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i{ border-radius:2px; background:var(--c); animation:spGrid 1.3s var(--ease-in-out) infinite; } }
  @keyframes spGrid{ 0%,70%,100%{ transform:scale(.35); opacity:.35; } 35%{ transform:scale(1); opacity:1; } }

  /* 12 · ONDA — 5 pontos em senoide */
  @scope ([data-spinner="wave"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ display:inline-flex; align-items:center; gap:calc(var(--sz)*.1); width:auto; } }
  @scope ([data-spinner="wave"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ i{ width:calc(var(--sz)*.18); height:calc(var(--sz)*.18); border-radius:50%; background:var(--c); animation:spWave 1.1s var(--ease-in-out) infinite; } }
  @keyframes spWave{ 0%,100%{ transform:translateY(calc(var(--sz)*.26)); } 50%{ transform:translateY(calc(var(--sz)*-.26)); } }

  /* 13 · LOGO — contorno da marca SigGestor sendo traçado */
  @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; } }
  @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ svg{ width:100%; height:100%; overflow:visible; display:block; } }
  @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ .sig-trace{ animation:spTrace 1.5s linear infinite; } }
  @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ .sig-node{ animation:spNode 1.5s var(--ease-in-out) infinite; transform-box:fill-box; transform-origin:center; } }
  @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ .sig-node:nth-child(4){ animation-delay:0s; } } @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ .sig-node:nth-child(5){ animation-delay:.18s; } }
  @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ .sig-node:nth-child(6){ animation-delay:.36s; } } @scope ([data-spinner="survey"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/ .sig-node:nth-child(7){ animation-delay:.54s; } }
  @keyframes spTrace{ to{ stroke-dashoffset:-100; } }
  @keyframes spNode{ 0%,100%{ transform:scale(.6); opacity:.45; } 50%{ transform:scale(1); opacity:1; } }

  /* 14 · COMETA — rastro cônico com cabeça */
  @scope ([data-spinner="comet"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ border-radius:50%; position:relative; animation:spSpin .9s linear infinite;
    background:conic-gradient(from 0deg, transparent 0 6%, color-mix(in srgb,var(--c) 35%, transparent), var(--c));
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--tw)), #000 0); mask:radial-gradient(farthest-side, transparent calc(100% - var(--tw)), #000 0); } }
  @scope ([data-spinner="comet"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::after{ content:""; position:absolute; top:0; left:50%; width:var(--tw); height:var(--tw); border-radius:50%; background:var(--c); transform:translateX(-50%); } }

  /* 15 · BOLA — bola quicando com sombra */
  @scope ([data-spinner="ball"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; } }
  @scope ([data-spinner="ball"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before{ content:""; position:absolute; left:50%; top:0; width:calc(var(--sz)*.5); height:calc(var(--sz)*.5); margin-left:calc(var(--sz)*-.25);
    border-radius:50%; background:var(--c); animation:spBall .6s var(--ease-in-out) infinite alternate; } }
  @scope ([data-spinner="ball"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::after{ content:""; position:absolute; left:50%; bottom:0; width:calc(var(--sz)*.5); height:calc(var(--sz)*.12); margin-left:calc(var(--sz)*-.25);
    border-radius:50%; background:color-mix(in srgb,var(--c) 30%, transparent); animation:spBallSh .6s var(--ease-in-out) infinite alternate; } }
  @keyframes spBall{ 0%{ transform:translateY(0); } 100%{ transform:translateY(calc(var(--sz)*.5)); } }
  @keyframes spBallSh{ 0%{ transform:scaleX(.55); opacity:.4; } 100%{ transform:scaleX(1); opacity:.8; } }

  /* 16 · BARRA LINEAR — progresso indeterminado */
  @scope ([data-spinner="track"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ width:calc(var(--sz)*2); height:calc(var(--sz)*.34); border-radius:var(--radius-full); overflow:hidden; position:relative;
    background:color-mix(in srgb,var(--c) 16%, transparent); } }
  @scope ([data-spinner="track"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before{ content:""; position:absolute; top:0; bottom:0; width:40%; border-radius:var(--radius-full); background:var(--c); animation:spTrack 1.2s var(--ease-in-out) infinite; } }
  @keyframes spTrack{ 0%{ left:-42%; } 100%{ left:100%; } }

  /* 17 · TRIÂNGULO — triângulo girando */
  @scope ([data-spinner="triangle"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ background:var(--c); clip-path:polygon(50% 4%, 4% 96%, 96% 96%); animation:spSpin 1s var(--ease-in-out) infinite; } }

  /* 18 · ESPIRAL — dois arcos concentricos em velocidades diferentes */
  @scope ([data-spinner="spiral"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; } }
  @scope ([data-spinner="spiral"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before,.sg-spinner/*data-spinner*/::after{ content:""; position:absolute; border-radius:50%; border:var(--tw) solid transparent; border-top-color:var(--c); } }
  @scope ([data-spinner="spiral"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before{ inset:0; animation:spSpin 1s linear infinite; } }
  @scope ([data-spinner="spiral"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::after{ inset:calc(var(--sz)*.26); border-top-color:color-mix(in srgb,var(--c) 55%, transparent); animation:spSpin .62s linear infinite; } }

  /* 19 · RECARREGAR — anel com duas lacunas */
  @scope ([data-spinner="refresh"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ border-radius:50%; border:var(--tw) solid var(--c); border-left-color:transparent; border-right-color:transparent; animation:spSpin .8s linear infinite; } }

  /* 20 · ECO — anéis que expandem (contorno) */
  @scope ([data-spinner="echo"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/{ position:relative; } }
  @scope ([data-spinner="echo"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::before,.sg-spinner/*data-spinner*/::after{ content:""; position:absolute; inset:0; border-radius:50%; border:var(--tw) solid var(--c); animation:spEcho 1.6s var(--ease-out) infinite; } }
  @scope ([data-spinner="echo"]) to ([data-spinner]) { .sg-spinner/*data-spinner*/::after{ animation-delay:.8s; } }
  @keyframes spEcho{ 0%{ transform:scale(.2); opacity:1; } 100%{ transform:scale(1); opacity:0; } }