/* ============================================================
   DNX Experience — Animation system
   Keyframes + utility classes mirrored from the production app.
   Vendored verbatim from the DNX Experience design system.
   ============================================================ */

@keyframes dx-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dx-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dx-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dx-animate-in    { animation: dx-fade-in-up 500ms var(--ease-out-quart) both; }
.dx-animate-fade  { animation: dx-fade-in 400ms var(--ease-out-quart) both; }
.dx-animate-scale { animation: dx-scale-in 600ms var(--ease-out-expo) both; }
.dx-status-pulse  { animation: dx-status-pulse 2000ms ease-in-out infinite; }

/* Stagger delays — apply to children of a .dx-animate-* group */
.dx-stagger-1 { animation-delay: 75ms; }
.dx-stagger-2 { animation-delay: 150ms; }
.dx-stagger-3 { animation-delay: 225ms; }
.dx-stagger-4 { animation-delay: 300ms; }
.dx-stagger-5 { animation-delay: 375ms; }
.dx-stagger-6 { animation-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .dx-animate-in,
  .dx-animate-fade,
  .dx-animate-scale,
  .dx-status-pulse {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}