/**
 * animations.css - shared keyframes & transition utility classes
 */
@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(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

.view-fade-in { animation: fadeIn var(--duration-medium) var(--ease-standard); }

/* Skeleton loaders */
.skeleton-block {
  background: linear-gradient(90deg, var(--surface-alt) 0%, var(--surface-hover) 50%, var(--surface-alt) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  height: 12px;
}
.skeleton-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.skeleton-thumb { height: 72px; border-radius: var(--radius-md); }
.skeleton-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.skeleton-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; }
.skeleton-stat-card { padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; }
}