/* icons-anim.css — micro animação de cada ícone.
   Quadros em icons-anim/<nome>-a.svg, -b.svg (-c quando há três).
   Os SVGs são transparentes: a cor do tile vem do background-color.

   <span class="pxicon pxicon--rocket"></span>
*/

.pxicon {
  display: inline-block;
  width: 112px; height: 112px;
  border-radius: 20px;
  background-color: #2C2620;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}

/* tamanhos: múltiplos de 16px */
.pxicon--32 { width: 32px; height: 32px; border-radius: 7px; }
.pxicon--48 { width: 48px; height: 48px; border-radius: 10px; }
.pxicon--64 { width: 64px; height: 64px; border-radius: 13px; }

/* ESCUDO — emblema pulsa laranja → verde */
.pxicon--shield { animation-name: px-shield; animation-duration: 0.9s; }
@keyframes px-shield {
  0%, 50%      { background-image: url("icons-anim/shield-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/shield-b.svg"); }
}

/* CHAVE — gira na fechadura */
.pxicon--key { animation-name: px-key; animation-duration: 1.1s; }
@keyframes px-key {
  0%, 50%      { background-image: url("icons-anim/key-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/key-b.svg"); }
}

/* REDE — meridianos deslizam */
.pxicon--globe { animation-name: px-globe; animation-duration: 1.4s; }
@keyframes px-globe {
  0%, 50%      { background-image: url("icons-anim/globe-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/globe-b.svg"); }
}

/* MASCOTE — pisca */
.pxicon--mascote { animation-name: px-mascote; animation-duration: 2.6s; }
@keyframes px-mascote {
  0%, 88%      { background-image: url("icons-anim/mascote-a.svg"); }
  88.01%, 100% { background-image: url("icons-anim/mascote-b.svg"); }
}

/* COFRE — cadeado abre e fecha */
.pxicon--vault { animation-name: px-vault; animation-duration: 2.4s; }
@keyframes px-vault {
  0%, 50%      { background-image: url("icons-anim/vault-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/vault-b.svg"); }
}

/* CORAÇÃO — batida */
.pxicon--heart { animation-name: px-heart; animation-duration: 0.9s; }
@keyframes px-heart {
  0%, 88%      { background-image: url("icons-anim/heart-a.svg"); }
  88.01%, 100% { background-image: url("icons-anim/heart-b.svg"); }
}

/* GATO — pisca um olho e abaixa a orelha */
.pxicon--cat { animation-name: px-cat; animation-duration: 3s; }
@keyframes px-cat {
  0%, 88%      { background-image: url("icons-anim/cat-a.svg"); }
  88.01%, 100% { background-image: url("icons-anim/cat-b.svg"); }
}

/* TERMINAL — código pisca */
.pxicon--terminal { animation-name: px-terminal; animation-duration: 0.5s; }
@keyframes px-terminal {
  0%, 50%      { background-image: url("icons-anim/terminal-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/terminal-b.svg"); }
}

/* ROCKET — fogo acende e apaga */
.pxicon--rocket { animation-name: px-rocket; animation-duration: 0.36s; }
@keyframes px-rocket {
  0%, 50%      { background-image: url("icons-anim/rocket-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/rocket-b.svg"); }
}

/* CUP — fumaça sobe e desce */
.pxicon--cup { animation-name: px-cup; animation-duration: 1.3s; }
@keyframes px-cup {
  0%, 50%      { background-image: url("icons-anim/cup-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/cup-b.svg"); }
}

/* FLAME — chama tremula */
.pxicon--flame { animation-name: px-flame; animation-duration: 0.4s; }
@keyframes px-flame {
  0%, 50%      { background-image: url("icons-anim/flame-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/flame-b.svg"); }
}

/* GHOST — franja voa */
.pxicon--ghost { animation-name: px-ghost; animation-duration: 0.8s; }
@keyframes px-ghost {
  0%, 50%      { background-image: url("icons-anim/ghost-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/ghost-b.svg"); }
}

/* RAIO — flash */
.pxicon--bolt { animation-name: px-bolt; animation-duration: 1.1s; }
@keyframes px-bolt {
  0%, 88%      { background-image: url("icons-anim/bolt-a.svg"); }
  88.01%, 100% { background-image: url("icons-anim/bolt-b.svg"); }
}

/* ROCK — headbang */
.pxicon--horns { animation-name: px-horns; animation-duration: 0.5s; }
@keyframes px-horns {
  0%, 50%      { background-image: url("icons-anim/horns-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/horns-b.svg"); }
}

/* CAVEIRA — mandíbula abre */
.pxicon--skull { animation-name: px-skull; animation-duration: 1.6s; }
@keyframes px-skull {
  0%, 50%      { background-image: url("icons-anim/skull-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/skull-b.svg"); }
}

/* FALA — três pontos em sequência */
.pxicon--speech { animation-name: px-speech; animation-duration: 1.2s; }
@keyframes px-speech {
  0%, 33.32%     { background-image: url("icons-anim/speech-a.svg"); }
  33.33%, 66.65% { background-image: url("icons-anim/speech-b.svg"); }
  66.66%, 100%   { background-image: url("icons-anim/speech-c.svg"); }
}

/* PAZ — dá tchau */
.pxicon--peace { animation-name: px-peace; animation-duration: 0.6s; }
@keyframes px-peace {
  0%, 50%      { background-image: url("icons-anim/peace-a.svg"); }
  50.01%, 100% { background-image: url("icons-anim/peace-b.svg"); }
}

/* SAVOIA — cruz brilha */
.pxicon--savoia { animation-name: px-savoia; animation-duration: 2s; }
@keyframes px-savoia {
  0%, 88%      { background-image: url("icons-anim/savoia-a.svg"); }
  88.01%, 100% { background-image: url("icons-anim/savoia-b.svg"); }
}

@media (prefers-reduced-motion: reduce) {
  .pxicon { animation: none; }
}