/* Movimento discreto. Feedbacks de interface: receitas do transitions.dev (toast, modal, shake), lidas dos tokens de app.css.
   Sequências (entrada de tela, números, barras) ficam em js/motion.js com GSAP. Tudo respeita prefers-reduced-motion. */
:root { --toast-open: 350ms; --toast-close: 250ms; --toast-distance: 16px; --toast-blur: 2px; --toast-scale: .97;
  --modal-open: var(--duration-fast); --modal-close: var(--duration-quick); --modal-scale: .96; --shake-dist: 8px; }

/* toast: sobe com fade + desfoque; entra devagar, sai rápido */
.toast { opacity: 0; transform: translateY(var(--toast-distance)) scale(var(--toast-scale)); filter: blur(var(--toast-blur)); will-change: transform, opacity, filter;
  transition: opacity var(--toast-close) var(--ease-smooth-out), transform var(--toast-close) var(--ease-smooth-out), filter var(--toast-close) var(--ease-smooth-out); }
.toast.is-open { opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--toast-open) var(--ease-smooth-out), transform var(--toast-open) var(--ease-smooth-out), filter var(--toast-open) var(--ease-smooth-out); }

/* janela: escala suave ao abrir, mais curta ao fechar (no celular vira folha que sobe) */
.modal-fundo { opacity: 0; transition: opacity var(--modal-close) ease-out; }
.modal { opacity: 0; transform: scale(var(--modal-scale)); will-change: transform, opacity;
  transition: opacity var(--modal-close) var(--ease-smooth-out), transform var(--modal-close) var(--ease-smooth-out); }
.modal-fundo.is-open { opacity: 1; transition-duration: var(--modal-open); }
.modal-fundo.is-open .modal { opacity: 1; transform: none; transition-duration: var(--modal-open); }
.modal-fundo.is-closing { pointer-events: none; }
@media (max-width: 760px) { .modal { transform: translateY(40px); } }

/* erro de formulário: tremida curta */
@keyframes tremer { 0%, 100% { transform: none; } 20% { transform: translateX(calc(var(--shake-dist) * -1)); } 45% { transform: translateX(var(--shake-dist)); } 70% { transform: translateX(calc(var(--shake-dist) * -.5)); } 88% { transform: translateX(calc(var(--shake-dist) * .25)); } }
.tremer { animation: tremer 380ms var(--ease-smooth-out); }

/* microinterações de mão */
.btn { transition: background var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick), transform 120ms var(--ease-smooth-out), box-shadow var(--duration-fast); }
.btn:active:not(:disabled) { transform: scale(.97); }
.lateral nav a, .abas-baixo a, .tile-resolver, .atencao a { transition: background var(--duration-quick), color var(--duration-quick), box-shadow var(--duration-fast), border-color var(--duration-quick); }
.lateral nav a .icone { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.lateral nav a:hover .icone { transform: translateX(2px); }
:focus-visible { outline-color: var(--azul); }

@media (prefers-reduced-motion: reduce) {
  .toast, .modal, .modal-fundo, .btn, .lateral nav a .icone { transition: none !important; }
  .tremer { animation: none; }
  .btn:active:not(:disabled), .lateral nav a:hover .icone { transform: none; }
}