/**
 * SUS 360 — Design System 1.0.0
 * base/animations.css
 *
 * Animações compartilhadas: keyframes de logo, brilho, cursor, transições e skeleton.
 *
 * Depende de: nada
 */

/* ── Brilho pulsante do logo ──────────────────────────────────────────── */
@keyframes pulse-glow {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 73, 144, 0.3));
  }
}

@keyframes pulse-glow-dark {
  0%,
  100% {
    filter: brightness(0) invert(1) drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: brightness(0) invert(1)
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
  }
}

/* ── Brilho do grau (º) ───────────────────────────────────────────────── */
@keyframes grau-sparkle {
  0%,
  85%,
  100% {
    color: var(--text-primary);
    text-shadow: none;
  }
  90% {
    color: var(--brasil-green);
    text-shadow: 0 0 8px rgba(0, 156, 59, 0.4);
  }
  95% {
    color: var(--brasil-yellow);
    text-shadow: 0 0 8px rgba(255, 223, 0, 0.4);
  }
}

/* ── Pulso do ponto de status ─────────────────────────────────────────── */
@keyframes pulse-live {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0);
  }
}

/* ── Subtle glow ──────────────────────────────────────────────────────── */
@keyframes subtle-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ── Brilho de carregamento (shimmer) ─────────────────────────────────── */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ── Cursor de digitação ──────────────────────────────────────────────── */
@keyframes typing-cursor {
  0%,
  100% {
    border-right-color: var(--text-secondary);
  }
  50% {
    border-right-color: transparent;
  }
}

/* ── Entrada com fade e slide ─────────────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

/* ── Aparecimento de município (mapa) ─────────────────────────────────── */
@keyframes munFadeIn {
  to {
    opacity: 1;
  }
}

/* ── Carregamento com skeleton ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    rgba(0, 0, 0, 0.04) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

body.dark .skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
}