/* sg-skel — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * Bloco de carregamento, byte a byte do <style> de components/feedback/skeleton.card.html (bundle
 * 8cd72241, ZIP 48ebf484759c), sem `.stack` / `.rowf` (arranjo da composição de exemplo).
 * Mudanças mecânicas e reversíveis: `.sk` → `.sg-skel` (nome do Skeleton.jsx), as formas
 * `.circle` / `.text` → `.sg-skel--circle` / `--text`, e cada uma das 10 animações
 * (`.cv1`…`.cv10` no bloco do card) vale no eixo data-skeleton — o token do card fica num
 * ancestral, que aqui é a raiz do escopo (`:scope`).
 * Cascata e Cintilar leem --d / --dur por bloco: quem escreve é js/widgets/skeleton.js, como o
 * script do card. Sem tokens de tempo (laços infinitos).
 * Marcação: {% sg_skel "55%" "13px" "text" %} (design/templatetags/sg_skeleton.py). */
  /* ════════ BASE — bloco placeholder (shimmer é o brilho padrão) ════════ */
  .sg-skel{ display:block; background:var(--surface-sunken); border-radius:var(--radius-md); position:relative; overflow:hidden; }
  .sg-skel.sg-skel--circle{ border-radius:50%; }
  .sg-skel.sg-skel--text{ border-radius:var(--radius-sm); height:11px; }
  .sg-skel::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gray-0) 70%, transparent), transparent);
    transform:translateX(-100%); animation:skShimmer 1.5s infinite; }
  @keyframes skShimmer{ to{ transform:translateX(100%); } }

  /* 01 · SHIMMER — varredura de brilho da esquerda p/ direita (padrão = base) */

  /* 02 · PULSO — opacidade pulsando */
  @scope ([data-skeleton="pulse"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ display:none; } }
  @scope ([data-skeleton="pulse"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel{ animation:skPulse 1.4s var(--ease-in-out) infinite; } }
  @keyframes skPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

  /* 03 · ONDA — degradê de 3 tons deslizando */
  @scope ([data-skeleton="wave"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ display:none; } }
  @scope ([data-skeleton="wave"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel{ background:linear-gradient(90deg, var(--surface-sunken) 25%, var(--gray-100) 37%, var(--surface-sunken) 63%);
    background-size:400% 100%; animation:skWave 1.6s var(--ease-in-out) infinite; } }
  @keyframes skWave{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

  /* 04 · CASCATA — mesma varredura, atrasada bloco a bloco (onda que desce) */
  @scope ([data-skeleton="stagger"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ animation-delay:var(--d,0ms); } }

  /* 05 · RESPIRAÇÃO — o tom alterna entre dois cinzas, sem varredura */
  @scope ([data-skeleton="breathe"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ display:none; } }
  @scope ([data-skeleton="breathe"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel{ animation:skBreath 2.1s var(--ease-in-out) infinite; } }
  @keyframes skBreath{ 0%,100%{ background-color:var(--surface-sunken); } 50%{ background-color:var(--gray-100); } }

  /* 06 · BRILHO FINO — faixa estreita e brilhante varrendo (sheen) */
  @scope ([data-skeleton="sheen"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ background:linear-gradient(90deg, transparent 42%, color-mix(in srgb, var(--gray-0) 95%, transparent) 50%, transparent 58%); } }

  /* 07 · DIAGONAL — varredura em ângulo */
  @scope ([data-skeleton="angled"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ background:linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--gray-0) 72%, transparent) 50%, transparent 70%); } }

  /* 08 · VARREDURA ↓ — o brilho desce no eixo vertical */
  @scope ([data-skeleton="vertical"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--gray-0) 72%, transparent), transparent);
    transform:translateY(-100%); animation-name:skScanY; } }
  @keyframes skScanY{ to{ transform:translateY(100%); } }

  /* 09 · CINTILAR — cada bloco pisca no seu próprio ritmo (delays aleatórios) */
  @scope ([data-skeleton="twinkle"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ display:none; } }
  @scope ([data-skeleton="twinkle"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel{ animation:skTwinkle var(--dur,1.6s) var(--ease-in-out) infinite; animation-delay:var(--d,0ms); } }
  @keyframes skTwinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.38; } }

  /* 10 · ESTÁTICO — sem animação (acessível / impressão) */
  @scope ([data-skeleton="static"]) to ([data-skeleton]) { :scope/*data-skeleton*/ .sg-skel::after{ animation:none; display:none; } }

  @media (prefers-reduced-motion: reduce){ .sg-skel, .sg-skel::after{ animation:none !important; } }