.fx-fade-in{
  animation:atlasFadeIn var(--atlas-duration-base) var(--atlas-ease) both;
}

.fx-slide-up{
  animation:atlasSlideUp calc(var(--atlas-duration-base) + 80ms) var(--atlas-ease) both;
}

.fx-scale-in{
  animation:atlasScaleIn calc(var(--atlas-duration-base) + 60ms) var(--atlas-ease) both;
}

.fx-stagger > *{
  opacity:0;
  animation:atlasSlideUp calc(var(--atlas-duration-base) + 120ms) var(--atlas-ease) both;
}

.fx-stagger > *:nth-child(1){animation-delay:40ms}
.fx-stagger > *:nth-child(2){animation-delay:90ms}
.fx-stagger > *:nth-child(3){animation-delay:140ms}
.fx-stagger > *:nth-child(4){animation-delay:190ms}
.fx-stagger > *:nth-child(5){animation-delay:240ms}
.fx-stagger > *:nth-child(6){animation-delay:290ms}

.page-hero,
.dashboard-hero,
.surface-panel,
.card,
.listing-card-modern,
.command-card,
.queue-card,
.jobs-panel,
.chat-panel{
  animation:atlasSlideUp calc(var(--atlas-duration-base) + 100ms) var(--atlas-ease) both;
}

@keyframes atlasFadeIn{
  from{opacity:0}
  to{opacity:1}
}

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

@keyframes atlasScaleIn{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .fx-fade-in,
  .fx-slide-up,
  .fx-scale-in,
  .fx-stagger > *,
  .page-hero,
  .dashboard-hero,
  .surface-panel,
  .card,
  .listing-card-modern,
  .command-card,
  .queue-card,
  .jobs-panel,
  .chat-panel{
    animation:none !important;
  }
}