/* PouPei — movimento 3D: entrada dos cartões em profundidade, ícones que inclinam,
   troca de telas com transição. Tudo desliga com "reduzir movimento" do aparelho. */
.view { perspective: 1400px; }

/* Cartões entram de trás, girando de leve no eixo X */
@keyframes entra {
  from { opacity: 0; transform: translateY(26px) rotateX(9deg) scale(.97); filter: blur(4px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
.card { transform-origin: 50% 0; }

/* Ícones 3D: respiram em profundidade e inclinam seguindo o dedo/mouse */
.tile, .stat > img, .ico-vivo, .medalha img, .jor-ilu img, .dolar-topo img, .banner-ilu img {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), filter .5s var(--ease);
}
.tile { --rx: 0deg; --ry: 0deg; transform: perspective(500px) rotateX(var(--rx)) rotateY(var(--ry)); }
.tile img { animation: respira 6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.7s); transform-origin: 50% 80%; }
@keyframes respira {
  0%, 100% { transform: translateZ(0) rotateY(0) rotateZ(0); }
  30% { transform: translateZ(8px) rotateY(14deg) rotateZ(-3deg); }
  65% { transform: translateZ(4px) rotateY(-10deg) rotateZ(2deg); }
}
.tile:hover img, .tile.vivo img { animation-play-state: paused; transform: translateZ(18px) scale(1.12); }
.tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--bx, 30%) var(--by, 20%), rgba(255,255,255,.55), transparent 55%); opacity: 0; transition: opacity .3s; }
.tile { position: relative; }
.tile:hover::after, .tile.vivo::after { opacity: 1; }

.stat { --rx: 0deg; --ry: 0deg; }
.stat > img, .stat > .ico-vivo { transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); }
.stat.vivo > img, .stat.vivo > .ico-vivo { transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(30px) scale(1.08); filter: drop-shadow(0 22px 18px rgba(36,50,74,.28)); }

.medalha:not(.bloq) img { animation: gira 7s var(--ease) infinite; animation-delay: calc(var(--n, 0) * -0.9s); }
@keyframes gira { 0%, 70%, 100% { transform: perspective(400px) rotateY(0); } 85% { transform: perspective(400px) rotateY(360deg) translateZ(10px); } }

.jor-ilu img, .banner-ilu img { animation: orbita 9s ease-in-out infinite; }
@keyframes orbita {
  0%, 100% { transform: perspective(800px) translate3d(0, 0, 0) rotateY(-8deg) rotateX(4deg); }
  50% { transform: perspective(800px) translate3d(0, -10px, 30px) rotateY(10deg) rotateX(-3deg); }
}

/* Toque: o ícone afunda e volta como borracha */
.pula { animation: pula .55s var(--ease) !important; }
@keyframes pula { 0% { transform: scale(1); } 30% { transform: scale(.86, .8) translateY(3px); } 60% { transform: scale(1.12, 1.08) translateY(-4px); } 100% { transform: scale(1); } }

/* Menu: o ícone da aba ativa dá um giro 3D */
.nav button.ativo svg { animation: navGiro .7s var(--ease); }
@keyframes navGiro { from { transform: perspective(200px) rotateY(-180deg) scale(.6); } }

/* Toasts e modal entram virando */
.toast { animation: toast3d .6s var(--ease) both !important; transform-origin: 50% 0; }
@keyframes toast3d { from { opacity: 0; transform: perspective(600px) rotateX(-70deg) translateY(-10px); } }
@keyframes sobe { from { opacity: 0; transform: translate(-50%, -44%) perspective(900px) rotateX(12deg) scale(.94); } }

/* Troca de telas (View Transitions): a tela antiga recua e a nova chega da frente */
::view-transition-old(conteudo) { animation: telaSai .32s var(--ease) both; }
::view-transition-new(conteudo) { animation: telaEntra .5s var(--ease) both; }
@keyframes telaSai { to { opacity: 0; transform: perspective(1200px) translateZ(-90px) rotateX(4deg); filter: blur(3px); } }
@keyframes telaEntra { from { opacity: 0; transform: perspective(1200px) translateZ(80px) translateY(14px); filter: blur(3px); } }
.view { view-transition-name: conteudo; }
/* Sem View Transitions (navegadores antigos): só a entrada dos cartões */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  ::view-transition-old(conteudo), ::view-transition-new(conteudo) { animation: none; }
}