/* =====================================================
  Poke Ponte — Camadas de fundo com artes de Pokémon
  "rolando" (crossfade aleatório, diferente a cada visita).
  Usado na Home (atrás do hero) e nas páginas de
  Login/Cadastro (painel lateral). Ver pokebg.js.
  ===================================================== */

.poke-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.poke-bg-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.4s ease, transform 6s ease;
  filter: saturate(.92);
}

.poke-bg-layer.ativa {
  opacity:.9;
  transform: scale(1.08);
}

/* Variante usada atrás do hero da Home: bem mais discreta, para
  não competir com o texto, cobrindo toda a área do hero. */
.poke-bg-home.poke-bg-layer {
  background-size: cover;
  filter: saturate(.85) blur(1px);
}

.poke-bg-home.poke-bg-layer.ativa {
  opacity:.14;
  transform: scale(1.04);
}

/* Garante que o conteúdo do hero da Home fique sempre acima do
  plano de fundo rolando, independente da ordem no HTML. */
.hero >.poke-bg-home {
  z-index: 0;
}

.hero >.principal {
  position: relative;
  z-index: 1;
}