/* React Bits AnimatedList-inspired motion, adapted for the static HTML guide. */
:root {
  --animated-list-duration: 220ms;
  --animated-list-distance: 8px;
}

@media (max-width: 760px) {
  .animated-list-item {
    transform-origin: center top;
    -webkit-tap-highlight-color: transparent;
  }

  html.animated-list-ready .animated-list-item:not(.animated-list-visible) {
    opacity: 0;
    transform: translate3d(0, var(--animated-list-distance), 0) scale(.985);
  }

  html.animated-list-ready .animated-list-item.animated-list-visible {
    animation: animated-list-enter var(--animated-list-duration) var(--animated-list-delay, 0ms) var(--ease) both;
  }

  .animated-list-item:active {
    transform: scale(.99);
  }
}

@keyframes animated-list-enter {
  from {
    opacity: 0;
    transform: translate3d(0, var(--animated-list-distance), 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-list-item {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}