body {
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* Background com tons de cinza suave em movimento */
.bg-gray-motion {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bg-gray-motion::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #f8fafc 0%,
    #f1f5f9 25%,
    #e2e8f0 50%,
    #f1f5f9 75%,
    #f8fafc 100%
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

.bg-gray-motion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 50% at 20% 40%,
    rgba(148, 163, 184, 0.15) 0%,
    transparent 50%
  );
  animation: radial-float 12s ease-in-out infinite;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.2;
  pointer-events: none;
}

.bg-blob-1 {
  width: 400px;
  height: 400px;
  background: #cbd5e1;
  top: -10%;
  left: -10%;
  animation: blob-float 18s ease-in-out infinite;
}

.bg-blob-2 {
  width: 350px;
  height: 350px;
  background: #94a3b8;
  bottom: -5%;
  right: -5%;
  animation: blob-float 14s ease-in-out infinite reverse;
  animation-delay: -4s;
}

.bg-blob-3 {
  width: 280px;
  height: 280px;
  background: #e2e8f0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: blob-float 20s ease-in-out infinite;
  animation-delay: -8s;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes radial-float {
  0%, 100% { opacity: 1; transform: scale(1) translate(0, 0); }
  50% { opacity: 0.7; transform: scale(1.1) translate(2%, 2%); }
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.98); }
}

/* Animações de entrada */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-1 { animation: fadeInUp 0.5s ease-out both; }
.anim-2 { animation: fadeInUp 0.5s ease-out 0.1s both; }
.anim-3 { animation: fadeInUp 0.5s ease-out 0.2s both; }

/* Shake para erro */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.shake { animation: shake 0.35s ease-in-out; }

/* Toast */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

.toast-in { animation: slideIn 0.3s ease-out both; }
.toast-out { animation: slideOut 0.25s ease-in both; }

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner { animation: spin 0.7s linear infinite; }