/* Animação de carregamento — Frajolinha (preto e branco) correndo atrás de um
   laranjinha com branquinho. 2D chapado, SVG + CSS, sem dependências.
   Usada no "Baixar Módulo" e na "Tradução" enquanto o processo roda. */

.gatos-corrida {
  position: relative;
  height: 118px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(#e9f1ff 0%, #eaf3ff 45%, #fdf3e0 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 -14px 22px -18px rgba(0, 0, 0, 0.25);
}

.gatos-corrida .chao {
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: 22px;
  border-bottom: 3px dotted #cdb98f;
}

.gatos-corrida .gatos-legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #8a6d3b;
  letter-spacing: 0.02em;
}

.gato {
  position: absolute;
  bottom: 18px;
  will-change: transform;
  animation: gato-corre 2.6s linear infinite;
}
.gato svg {
  display: block;
  transform-origin: 50% 100%;
  animation: gato-bob 0.26s ease-in-out infinite alternate;
}

.gato-frajola { z-index: 2; }
.gato-frajola svg { width: 90px; height: auto; }

/* o laranjinha vai na frente (fugindo) com uma boa vantagem */
.gato-laranja { z-index: 3; bottom: 22px; animation-delay: -0.85s; }
.gato-laranja svg { width: 68px; height: auto; }
.gato-laranja svg { animation-name: gato-bob; animation-duration: 0.2s; }

/* pernas: giram no quadril, pares em oposição de fase */
.pata-frente, .pata-tras { transform-box: fill-box; transform-origin: top center; }
.pata-frente { animation: pata-f 0.26s ease-in-out infinite alternate; }
.pata-tras  { animation: pata-t 0.26s ease-in-out infinite alternate; }
.gato-laranja .pata-frente,
.gato-laranja .pata-tras { animation-duration: 0.22s; }

.gato-rabo { transform-box: fill-box; transform-origin: bottom left; animation: rabo 0.5s ease-in-out infinite alternate; }

/* poeirinha atrás do Frajolinha */
.gatos-corrida .poeira {
  position: absolute;
  bottom: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e7d4ae;
  opacity: 0;
  animation: poeira 2.6s linear infinite;
}

@keyframes gato-corre {
  from { transform: translateX(-92px); }
  to   { transform: translateX(calc(100% + 46px)); }
}
@keyframes gato-bob {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-8px) rotate(1.5deg); }
}
@keyframes pata-f {
  from { transform: rotate(26deg); }
  to   { transform: rotate(-24deg); }
}
@keyframes pata-t {
  from { transform: rotate(-22deg); }
  to   { transform: rotate(24deg); }
}
@keyframes rabo {
  from { transform: rotate(-12deg); }
  to   { transform: rotate(14deg); }
}
@keyframes poeira {
  0%   { opacity: 0; transform: translateX(0) scale(0.4); }
  6%   { opacity: 0.75; }
  32%  { opacity: 0; transform: translateX(-46px) scale(1.35); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gato, .gato svg, .pata-frente, .pata-tras, .gato-rabo, .gatos-corrida .poeira {
    animation-duration: 5s !important;
    animation-timing-function: ease-in-out !important;
  }
}

/* tema escuro: corrida noturna */
:root[data-tema="escuro"] .gatos-corrida {
  background: linear-gradient(#1a2036 0%, #1c2440 45%, #2a2438 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 -14px 22px -18px rgba(0, 0, 0, 0.5);
}
:root[data-tema="escuro"] .gatos-corrida .chao { border-bottom-color: #4a4433; }
:root[data-tema="escuro"] .gatos-corrida .gatos-legenda { color: #c9b892; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="escuro"]) .gatos-corrida {
    background: linear-gradient(#1a2036 0%, #1c2440 45%, #2a2438 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 -14px 22px -18px rgba(0, 0, 0, 0.5);
  }
  :root:not([data-tema="claro"]):not([data-tema="escuro"]) .gatos-corrida .chao { border-bottom-color: #4a4433; }
  :root:not([data-tema="claro"]):not([data-tema="escuro"]) .gatos-corrida .gatos-legenda { color: #c9b892; }
}