/* ============================================================
   animations.css — PayIA keyframes & transitions
   ============================================================ */

@keyframes float {
  0%, 100% { transform: perspective(1200px) rotateX(8deg) rotateY(-4deg) translateY(0); }
  50%       { transform: perspective(1200px) rotateX(8deg) rotateY(-4deg) translateY(-10px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 100, 100, 0.4); }
  70%       { box-shadow: 0 0 0 6px rgba(241, 100, 100, 0); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes badgeBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Section Reveal */
.section-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.section-reveal.revealed { opacity: 1; transform: translateY(0); }

/* Toast animations */
.toast { transform: translateX(120%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s; opacity: 0; }
.toast.toast-show { transform: translateX(0); opacity: 1; }

/* Typewriter cursor */
.tw-typing::after  { content: '|'; animation: blink 0.7s ease-in-out infinite; color: var(--brand-bright); margin-left: 1px; }
.tw-done::after    { content: ''; }

/* Sidebar item stagger */
.sidebar-nav-item { animation: slideInLeft 0.4s ease both; }

/* Hero badge border gradient */
.hero-badge { background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(56,189,248,0.10)); background-size: 200% 200%; animation: badgeBorder 4s ease infinite; }

/* Overdue badge pulse */
.badge-overdue { animation: pulse-badge 2s ease-in-out infinite; }

/* Shimmer (loading state) */
.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,0.15) 50%, transparent 100%);
  background-size: 400px 100%;
  animation: shimmer 1.4s linear infinite;
}

/* Floating mockup */
.hero-mockup { animation: float 5s ease-in-out infinite; }

/* Aurora CTA background */
.cta-bg {
  background: linear-gradient(135deg, #5B21B6, #1E3A8A, #0F172A, #0369A1);
  background-size: 300% 300%;
  animation: aurora 6s ease infinite;
}

/* Modal enter */
.modal-overlay { transition: opacity 0.25s ease; opacity: 0; }
.modal-overlay.modal-open { opacity: 1; }
.modal-overlay .modal-card { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s; transform: translateY(20px) scale(0.97); opacity: 0; }
.modal-overlay.modal-open .modal-card { transform: translateY(0) scale(1); opacity: 1; }

/* Button loading spinner — centralizado, sem mudar o tamanho do botão */
.btn.loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn.loading > * {
  visibility: hidden;
}
.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  color: white;
  visibility: visible;
}
/* Em botões outline/ghost (texto colorido), o spinner usa a cor da borda */
.btn-outline.loading::after,
.btn-ghost.loading::after,
.btn-secondary.loading::after {
  border: 2px solid rgba(124, 58, 237, 0.25);
  border-top-color: var(--brand-primary, #7C3AED);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .hero-mockup { animation: none; }
  .section-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PERFORMANCE — pausa TODAS animações infinitas quando modal aberto
   ============================================================ */
body.modal-open *,
body.modal-open *::before,
body.modal-open *::after {
  animation-play-state: paused !important;
}
/* Spinner do botão precisa continuar animando mesmo com modal aberto */
body.modal-open .btn.loading::after {
  animation-play-state: running !important;
}

/* GPU hints SÓ na entrada/saída do modal (will-change permanente é antipattern) */
.modal-overlay.modal-open .modal-card {
  will-change: transform, opacity;
}

/* Modal: usar contain pra isolar reflow */
.modal-card {
  contain: layout style;
}