/* ============================================================
   MapeaMente — Animações (keyframes e transições)
   ============================================================ */

@keyframes entrar-tela {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sair-tela {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.tela.saindo, .tela-centro.saindo { animation: sair-tela 200ms ease forwards; }

@keyframes entrar-card {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aparecer-check {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulsar-ponto {
  0%, 100% { transform: scale(0.6); opacity: 0.5; }
  50%      { transform: scale(1);   opacity: 1; }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}
.gira { animation: girar 2.4s linear infinite; transform-origin: center; }

/* Logo de boas-vindas */
@keyframes entrar-logo {
  0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
.entra-logo { animation: entrar-logo 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes pulsar-anel {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,107,255,0.4); }
  50%      { box-shadow: 0 0 0 14px rgba(45,107,255,0); }
}
.logo-anel-svg { animation: pulsar-anel 2.6s ease-in-out infinite; border-radius: 50%; }

/* Pontos dourados do radar (bounce) */
@keyframes ponto-bounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Destaque de melhora no histórico */
@keyframes brilho-melhora {
  0%   { box-shadow: 0 0 0 0 rgba(47,224,140,0); }
  30%  { box-shadow: 0 0 22px 2px rgba(47,224,140,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(47,224,140,0); }
}

/* Confete */
@keyframes cair-confete {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.confete-peca {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: cair-confete 1.6s ease-in forwards;
}

/* Flutuar (sobe e desce suave) */
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.flutua { animation: flutuar 5s ease-in-out infinite; }
.flutua-lento { animation: flutuar 7s ease-in-out infinite; }

/* Deriva dos orbes de fundo */
@keyframes derivar-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 20px) scale(0.96); }
}
@keyframes derivar-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 40px) scale(1.1); }
}

/* Deslizar a grade de fundo */
@keyframes deslizar-grade {
  from { background-position: 0 0; }
  to   { background-position: 64px 64px; }
}

/* Brilho que varre (shimmer) sobre cards */
@keyframes varrer {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%) skewX(-20deg); }
}

/* Borda em gradiente girando */
@keyframes girar-borda {
  to { transform: rotate(360deg); }
}

/* Revelar ao rolar (intersection observer adiciona .visivel) */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.revelar.visivel { opacity: 1; transform: translateY(0); }

/* Pulso de brilho contínuo */
@keyframes pulso-brilho {
  0%, 100% { box-shadow: 0 0 18px rgba(45,107,255,0.18); }
  50%      { box-shadow: 0 0 34px rgba(0,212,255,0.34); }
}
.pulsa-brilho { animation: pulso-brilho 3.4s ease-in-out infinite; }

/* Contar numérico — usado só como dica visual, valor vem do JS */
@keyframes surgir-cima {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.surge { animation: surgir-cima 500ms ease both; }
.surge-1 { animation-delay: 80ms; }
.surge-2 { animation-delay: 160ms; }
.surge-3 { animation-delay: 240ms; }
.surge-4 { animation-delay: 320ms; }

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tela.ativa, .tela-centro.ativa { animation: none; }
  .card-caminho { opacity: 1; transform: none; }
  .revelar { opacity: 1; transform: none; }
  .flutua, .flutua-lento, .pulsa-brilho,
  .orbe, .grid-decor { animation: none !important; }
}