/* Zero, o mascote (site/js/zero.js devolve <img class="zero" data-pose="...">). O desenho é chapado e já traz a sombra
   de chão; funciona no escuro, no claro e no cartão de destaque vinho sem filtro nenhum. Um por tela.

   Tamanho: o zero() põe width/height no <img> (opção "tamanho", padrão 120). No HTML escrito à mão, ou pra mudar por
   CSS, use uma destas classes (ou a variável --zero-lado):
     .zero.mini 32 · .zero.pequeno 48 · .zero.medio 120 · .zero.grande 240
   Dentro de .destaque-mascote e de .mascote (base.css) ele ocupa a largura da caixa sozinho.
   Abaixo de 64 px (mini e pequeno) use a pose 'rosto': o corpo inteiro ainda lê como "0", mas a expressão some.
   De preferência como avatar redondo: <img class="zero avatar pequeno" data-pose="rosto" ...>.

   Movimento: ele respira de leve, apoiado nos pés (só quando o aparelho não pediu menos movimento).
     .zero.parado   sem respiração (lista com vários, avatar)
     .zero.entra    aparece com um pulinho (conquista, resposta certa)
   O 'rosto' (avatar e ícone) nunca respira. */
.zero {
  display: block;
  flex: none;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.zero.mini { --zero-lado: 32px; }
.zero.pequeno { --zero-lado: 48px; }
.zero.medio { --zero-lado: 120px; }
.zero.grande { --zero-lado: 240px; }
.zero:is(.mini, .pequeno, .medio, .grande) { width: var(--zero-lado); }

/* o rosto como avatar: bolinha com o fundo do tema por trás (o desenho do 'rosto' já tem folga pra caber no círculo) */
.zero.avatar { border-radius: 50%; background: var(--superficie-2, transparent); }

/* os pés ficam em 88% da altura do quadro: é dali que ele respira e pula */
@media (prefers-reduced-motion: no-preference) {
  .zero:not(.parado, [data-pose="rosto"]) { transform-origin: 50% 88%; animation: zero-respira 4.2s ease-in-out infinite; }
  .zero.entra { transform-origin: 50% 88%; animation: zero-entra .45s ease-out both; }
  .zero.entra:not(.parado, [data-pose="rosto"]) { animation: zero-entra .45s ease-out both, zero-respira 4.2s ease-in-out .45s infinite; }
}

@keyframes zero-respira {
  0%, 100% { transform: none; }
  50% { transform: scale(.988, 1.02); }
}

@keyframes zero-entra {
  0% { opacity: 0; transform: translateY(10%) scale(.8); }
  60% { opacity: 1; transform: translateY(-3%) scale(1.04); }
  100% { opacity: 1; transform: none; }
}