/* O Geeko em mais lugares (09/11, o Kit de peças; o mapa no geeko/VARIANTES.md, "Onde mais"):
   1. o "carregando": o B4 andando no lugar no canto de baixo, só se a página demora (a classe --tela do geeko.css);
   2. o aviso "Abrindo o WhatsApp": o B4 acenando por 2,6 s em cima do botão do WhatsApp, sem segurar o clique.
   As folhas e os passos (px-passo) são os do geeko.css; aqui só o lugar, a linha da folha e o tempo. */

/* 1. o carregando some suave no load; e não se junta ao B5 que espera o vídeo do topo (o mesmo canto) */
.pixel-geeko--tela { transition: opacity 0.25s; }
.pixel-geeko--tela.pixel-geeko--saindo { opacity: 0; }
body:has(.pixel-geeko--canto:not([hidden])) .pixel-geeko--tela { visibility: hidden; }

/* 2. o aviso do WhatsApp: uma pílula escura acima do botão fixo (52 px + 1 rem), à direita */
.aviso-zap {
  position: fixed;
  z-index: 45;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 64px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.25rem 1.1rem 0.25rem 0.375rem;
  border: 1px solid rgba(198, 255, 0, 0.4);
  border-radius: 999px;
  background: #141414;
  color: var(--papel, #F5F5F0);
  font-family: var(--letra-texto, system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
}
.aviso-zap--ver { opacity: 1; }
/* a linha 2 da folha: o aceno (8 quadros em 0,99 s); parado, fica o quadro da mão no alto */
.aviso-zap .pixel-geeko__folha { background-position: calc(var(--px, 64px) * -3) calc(var(--px, 64px) * -2); }

@media (prefers-reduced-motion: no-preference) {
  .aviso-zap { transform: translateY(8px); transition: opacity 0.2s var(--sai, ease-out), transform 0.2s var(--sai, ease-out); }
  .aviso-zap--ver { transform: none; transition: opacity 0.2s var(--sai, ease-out), transform 0.2s var(--sai, ease-out); }
  .aviso-zap--ver .pixel-geeko__folha { background-position-x: 0; animation: px-passo 0.99s steps(8) infinite; }
}