.ui-enter {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(3px);
  animation: ui-enter var(--motion-normal) var(--motion-ease) forwards;
}

.ui-exit {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  animation: ui-exit var(--motion-fast) ease forwards;
}

.ui-stagger-item {
  opacity: 0;
  transform: translateY(5px);
  animation: ui-enter var(--motion-normal) var(--motion-ease) forwards;
  animation-delay: calc(var(--ui-stagger-index, 0) * 45ms);
}

.ui-dropdown,
#appView .custom-select-menu {
  transform-origin: top center;
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-normal) var(--motion-ease),
    clip-path var(--motion-normal) var(--motion-ease),
    visibility 0s linear var(--motion-normal);
}

.ui-dropdown[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px) scale(.99);
}

.ui-dropdown[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

#appView .custom-select.is-open .custom-select-menu {
  transition-delay: 0s;
}

#appView .custom-select-chevron {
  transition: transform var(--motion-fast) var(--motion-ease);
}

#appView .custom-select.is-open .custom-select-chevron {
  transform: rotate(180deg);
}

.ui-button,
.btn,
#appView .custom-select-trigger,
#appView .custom-select-option,
.month,
.icon-btn,
.pill,
.ui-badge,
.badge {
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.ui-switch-track,
.ui-switch-track::after {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    transform var(--motion-normal) var(--motion-ease);
}

.ui-modal-motion,
#appView dialog {
  transition:
    opacity var(--motion-normal) ease,
    transform var(--motion-normal) var(--motion-ease);
}

.ui-modal-motion {
  opacity: 0;
  transform: translateY(6px) scale(.992);
}

.ui-modal-motion[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ui-toast-motion,
.toast,
.ui-toast {
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-normal) var(--motion-ease);
}

.toast,
.ui-toast {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

.toast.show,
.ui-toast.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.ui-toast-motion {
  opacity: 0;
  transform: translateY(8px);
}

.ui-toast-motion.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-progress > span,
.progress > span,
.progress > i {
  transition: width var(--motion-slow) var(--motion-ease);
}

@keyframes ui-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes ui-exit {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(3px);
    filter: blur(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .ui-enter,
  .ui-exit,
  .ui-stagger-item,
  .ui-dropdown,
  .ui-modal-motion,
  .ui-toast-motion,
  .ui-progress > span,
  .progress > span,
  .progress > i,
  .ui-skeleton::after,
  #appView .custom-select-menu,
  #appView .custom-select-chevron,
  .ui-button,
  .btn,
  .ui-switch-track,
  .ui-switch-track::after,
  #appView dialog,
  .toast,
  .ui-toast {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .ui-enter,
  .ui-exit,
  .ui-stagger-item,
  .ui-dropdown,
  .ui-modal-motion,
  .ui-toast-motion,
  #appView .custom-select-menu,
  #appView .custom-select-chevron {
    filter: none !important;
    transform: none !important;
  }
}