/* ─── Animações suaves ─── */
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideDown   { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.fade-in      { animation: fadeInUp 260ms cubic-bezier(0.16,1,0.3,1) both; }
.scale-in     { animation: scaleIn  300ms cubic-bezier(0.34,1.56,0.64,1) both; }
.slide-right  { animation: slideInRight 280ms ease both; }
.slide-down   { animation: slideDown 280ms ease both; }

.spinner { display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation: spin 700ms linear infinite; }
.spinner-dark { border-color: rgba(231,8,63,0.18); border-top-color: var(--brand); }
.spinner-sm { width:14px; height:14px; border-width:2px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--bg) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius);
}