/* ============================================================================
   Animations
   ============================================================================ */

.ffmpeg-value-updated {
  animation: highlight-update 1s ease-out;
}

@keyframes highlight-update {
  0% {
    background-color: var(--ffmpeg-warning-bg);
  }
  100% {
    background-color: transparent;
  }
}

@keyframes ffmpeg-row-enter {
  0% {
    transform: translateY(6px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ffmpeg-row-update {
  0% {
    background-color: var(--ffmpeg-warning-bg);
  }
  100% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffmpeg-stats-card,
  .progress-bar__fill,
  .ffmpeg-empty-state--active,
  .ffmpeg-value-updated,
  .ffmpeg-dashboard-table tbody tr.ffmpeg-row--new,
  .ffmpeg-dashboard-table tbody tr.ffmpeg-row--updated {
    transition: none;
    animation: none;
  }

  .ffmpeg-skeleton {
    animation: none;
    opacity: 0.7;
  }
}
