:root {
  --app-motion-fast: 160ms;
  --app-motion-base: 190ms;
  --app-motion-slow: 220ms;
  --app-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --app-slide-distance: 16px;
  --app-micro-distance: 8px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --app-motion-fast: 1ms;
    --app-motion-base: 1ms;
    --app-motion-slow: 1ms;
    --app-slide-distance: 0px;
    --app-micro-distance: 0px;
  }
}

.app-page-root {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.app-enter-forward {
  animation: app-enter-forward var(--app-motion-base) var(--app-motion-ease) both;
}

.app-enter-back {
  animation: app-enter-back var(--app-motion-base) var(--app-motion-ease) both;
}

.app-exit-forward {
  animation: app-exit-forward var(--app-motion-fast) var(--app-motion-ease) both;
}

.app-exit-back {
  animation: app-exit-back var(--app-motion-fast) var(--app-motion-ease) both;
}

@keyframes app-enter-forward {
  from {
    opacity: 0;
    transform: translateX(var(--app-slide-distance));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes app-enter-back {
  from {
    opacity: 0;
    transform: translateX(calc(var(--app-slide-distance) * -1));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes app-exit-forward {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(var(--app-slide-distance) * -0.35));
  }
}

@keyframes app-exit-back {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(var(--app-slide-distance) * 0.35));
  }
}

.app-micro-in {
  opacity: 0;
  transform: translateY(var(--app-micro-distance));
  animation: app-micro-in var(--app-motion-fast) var(--app-motion-ease) both;
  animation-delay: calc(var(--app-stagger-index, 0) * 12ms);
}

@keyframes app-micro-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-pressable {
  transition: transform var(--app-motion-fast) var(--app-motion-ease), opacity var(--app-motion-fast) var(--app-motion-ease);
  transform-origin: center;
}

.app-pressable.is-pressed,
.app-pressable:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .app-enter-forward,
  .app-enter-back,
  .app-exit-forward,
  .app-exit-back,
  .app-micro-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .app-pressable,
  .app-pressable.is-pressed,
  .app-pressable:active {
    transition: none !important;
    transform: none !important;
  }
}