/* =====================================================================
   m24-logo-anim38 — o globo do escudo gira.

   O logo é CSS puro, três peças:
     .brand-mark   41x41, verde  #149447, canto 12px, overflow:hidden
     .flag-diamond 39x39, amarelo #f6d76a  (o losango)
     .flag-circle  14x14, azul   #1f4fa3  (o globo celeste)

   ⚠️ POR QUE ESTA E NÃO OUTRA: o círculo azul É o globo celeste da
   bandeira, e o jogo se chama "38-0 Mundo" quando abre o mapa inteiro.
   A animação nasce do assunto. Foram testadas mais três — entrada,
   respiro e brilho — e todas eram movimento genérico, que caberia em
   qualquer logo. O dono escolheu esta em 21/10. As outras não subiram:
   CSS morto em produção é a entropia que a análise de UI apontou
   (1.717 KB, 533 sombras diferentes). Se um dia quiser revê-las, estão
   no histórico deste arquivo.

   ⚠️ NÃO MEXE NO LAYOUT. A animação é um ::after dentro do círculo, com
   `transform` — transform nunca causa refluxo. Medido nas 4 opções:
   logo sempre 41x41, título sempre em y=141, página sempre 1571px.
   Animar o .brand-mark empurraria o título e a tagline.

   ⚠️ O `overflow:hidden` do .flag-circle é o que recorta o brilho no
   contorno do círculo. Sem ele a luz vaza em quadrado e o efeito morre.
   ===================================================================== */

.flag-circle {
  position: relative;
  overflow: hidden;
}

/* a luz atravessa o globo: dá leitura de esfera girando sem 3D */
.flag-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, 0) 62%);
  animation: m24LogoGira38 3.2s linear infinite;
}

@keyframes m24LogoGira38 {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

/* ---------------------------------------------------------------------
   ⚠️ Movimento reduzido: quem pediu ao sistema para não animar vê o logo
   exatamente como era antes — o ::after some, não fica parado por cima.
   O CSS do jogo respeita isso em 11 blocos; não vou ser a exceção.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .flag-circle::after { display: none; }
}