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

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

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

@keyframes scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* View entrance */
.view:not(.hidden) .view__inner {
  animation: fadeSlideUp 0.35s cubic-bezier(0.16,1,0.3,1) both;
}

/* Answer card reveal */
.answer-card.visible { animation: fadeSlideUp 0.4s cubic-bezier(0.16,1,0.3,1) both; }

/* Loading state */
.loading-state.visible { animation: fadeIn 0.2s ease both; }

/* Source tags stagger */
.source-tag { animation: fadeIn 0.3s ease both; }
.source-tag:nth-child(2) { animation-delay: 0.04s; }
.source-tag:nth-child(3) { animation-delay: 0.08s; }
.source-tag:nth-child(4) { animation-delay: 0.12s; }
.source-tag:nth-child(5) { animation-delay: 0.16s; }

/* Suggestion chips stagger */
.suggestion-chip { animation: fadeIn 0.25s ease both; }
.suggestion-chip:nth-child(2) { animation-delay: 0.05s; }
.suggestion-chip:nth-child(3) { animation-delay: 0.10s; }
.suggestion-chip:nth-child(4) { animation-delay: 0.15s; }

/* History cards stagger */
.history-card { animation: fadeSlideUp 0.3s ease both; }
.history-card:nth-child(2) { animation-delay: 0.04s; }
.history-card:nth-child(3) { animation-delay: 0.08s; }
.history-card:nth-child(4) { animation-delay: 0.12s; }

/* Spinning icon */
.spinning { animation: spin 0.7s linear infinite; }

/* Loading bar shimmer */
.loading-bar__fill {
  animation: scan 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Loading dots pulse */
.loading-dots__dot:nth-child(1) { animation: pulse 1.2s ease 0.0s infinite; }
.loading-dots__dot:nth-child(2) { animation: pulse 1.2s ease 0.2s infinite; }
.loading-dots__dot:nth-child(3) { animation: pulse 1.2s ease 0.4s infinite; }

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

.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--card-sub) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--r-md);
}
.skeleton--text { height: 14px; margin-bottom: var(--sp-2); width: 80%; }
.skeleton--text-short { height: 14px; margin-bottom: var(--sp-2); width: 40%; }
.skeleton--card { height: 72px; margin-bottom: var(--sp-3); border-radius: var(--r-lg); }
.skeleton--metric { height: 96px; border-radius: var(--r-lg); }