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

@keyframes skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialog-in {
  from {
    transform: translateY(10px) scale(0.985);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes toast-in {
  from {
    transform: translateX(18px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  to {
    transform: translateX(18px);
    opacity: 0;
  }
}

@keyframes fade-up {
  from {
    transform: translateY(7px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.overlay:not([hidden]) {
  animation: overlay-in var(--duration-normal) var(--ease-standard) both;
}

.overlay:not([hidden]) > [role="dialog"] {
  animation: dialog-in var(--duration-normal) var(--ease-emphasized) both;
}

.toast,
.notification-toast {
  animation: toast-in var(--duration-normal) var(--ease-emphasized) both;
}

.toast.is-leaving,
.notification-toast.is-leaving {
  animation: toast-out var(--duration-normal) var(--ease-standard) both;
}

.home-view,
.browse-view,
.welcome-view,
.utility-view {
  animation: fade-up var(--duration-normal) var(--ease-emphasized) both;
}

.game-card,
.game-tile,
.browse-card {
  animation: fade-up 220ms var(--ease-emphasized) both;
}

.game-card:nth-child(2),
.game-tile:nth-child(2),
.browse-card:nth-child(2) {
  animation-delay: 20ms;
}

.game-card:nth-child(3),
.game-tile:nth-child(3),
.browse-card:nth-child(3) {
  animation-delay: 40ms;
}

.game-card:nth-child(4),
.game-tile:nth-child(4),
.browse-card:nth-child(4) {
  animation-delay: 60ms;
}

.game-card:nth-child(5),
.game-tile:nth-child(5),
.browse-card:nth-child(5) {
  animation-delay: 80ms;
}

.game-card:nth-child(n + 6),
.game-tile:nth-child(n + 6),
.browse-card:nth-child(n + 6) {
  animation-delay: 100ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after,
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}