/*
  LOADER OFICIAL — "asterisco pulsante", opção 7 da galeria de animações
  (escolha do Gui, 23/08/2026), com o refinamento dele: o asterisco fica em
  CONTORNO e as PONTAS vão PREENCHENDO uma por vez, em sequência no SENTIDO
  HORÁRIO — o destaque gira ao redor do asterisco como um relógio. Passo seco
  (steps), ciclo completo 1s.

  Substitui o spinner genérico do estado "Entrando…". O grafismo é da marca,
  então o carregamento vira um momento de identidade em vez de um widget de
  sistema.

  PROCEDÊNCIA DO SHAPE — importa, e a primeira tentativa errou nisso.
  Eu havia desenhado um asterisco de seis retângulos "parecido". O Gui viu na
  hora que não era o da marca. O correto veio do Claude Design, literal:
  símbolo `ul-asterisco` de `assets/grafismos-ultralize.svg`, que por sua vez
  são os paths de `03. GRAFISMOS/Grafismos.pdf`. São QUATRO paths (as duas
  metades do corte diagonal, cada uma com duas peças) — não seis braços.
  Nada aqui deve ser "simplificado": qualquer redesenho deixa de ser a marca.

  A animação não recorta braços novos: desenha o asterisco inteiro uma vez em
  contorno e sobrepõe os mesmos quatro paths em versão cheia, cada um com o
  seu atraso. Ordem horária, começando pelo canto superior esquerdo:
  68.3457,0.0497 → 186.848,0 → 157.1665,261.0409 → 38.6636,261.091.

  Dois detalhes que o mockup exige e que quebram a fidelidade se caírem:
  `overflow:visible` no <svg> (o stroke sangra o viewBox) e
  `vector-effect="non-scaling-stroke"` em cada path — sem ele a espessura do
  contorno muda entre a versão de tela e a mini.
*/

@keyframes g7 {
  0% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

.g7 {
  animation: g7 1000ms steps(1, end) infinite;
}

/* Quem pediu menos movimento no sistema não recebe um relógio girando: o
   asterisco fica inteiro em contorno, parado, e o texto ao lado continua
   dizendo que está enviando. */
@media (prefers-reduced-motion: reduce) {
  .g7 { animation: none; opacity: 0; }
}