/* ============================================================
   MedAlerta — Animações e Micro-interações
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleInSpring {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.97); }
}

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

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

@keyframes ping {
  0%    { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes checkmark {
  0%   { stroke-dashoffset: 50; opacity: 0; }
  50%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--progress-width, 100%); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(calc(100% + 24px)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(calc(100% + 24px)); }
}

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

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bottomSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes nfcPulse {
  0%   { box-shadow: 0 0 0 0 hsla(199, 89%, 48%, 0.6); }
  70%  { box-shadow: 0 0 0 24px hsla(199, 89%, 48%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(199, 89%, 48%, 0); }
}

@keyframes fabIn {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Classes de animação ─────────────────────────────────── */
.animate-fade-in     { animation: fadeIn var(--transition-base) both; }
.animate-slide-up    { animation: slideUp var(--transition-base) both; }
.animate-slide-down  { animation: slideDown var(--transition-base) both; }
.animate-scale-in    { animation: scaleIn var(--transition-base) both; }
.animate-bounce-in   { animation: bounceIn 500ms both; }
.animate-shake       { animation: shake 500ms both; }
.animate-spin        { animation: spin 1s linear infinite; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }
.animate-ping        { animation: ping 1.2s ease-out infinite; }

/* Delay utilitários */
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ── Skeleton / Loading ───────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface-2) 25%,
    var(--bg-surface-3) 50%,
    var(--bg-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text   { height: 1em; margin-bottom: 0.5em; }
.skeleton-circle { border-radius: var(--radius-full); aspect-ratio: 1; }
.skeleton-card   { height: 80px; border-radius: var(--radius-lg); }

/* ── Redução de movimento ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}