:root {
  --motion-duration-feedback: 120ms;
  --motion-duration-exit: 150ms;
  --motion-duration-state: 200ms;
  --motion-duration-overlay: 240ms;
  --motion-duration-highlight: 1200ms;
  --motion-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Shared motion vocabulary. Views should opt into these semantic classes
 * instead of declaring timing or easing values of their own. This keeps new
 * controls aligned with the rest of the product without coupling them to a
 * component framework.
 */
.motion-interactive {
  transition-duration: var(--motion-duration-feedback);
  transition-property: background-color, border-color, box-shadow, color, opacity, transform;
  transition-timing-function: var(--motion-ease-out);
}

.motion-interactive:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.985);
}

.motion-control {
  transition-duration: var(--motion-duration-state);
  transition-property: background-color, border-color, box-shadow, color;
  transition-timing-function: var(--motion-ease-out);
}

.motion-navigation,
.motion-menu-item,
.motion-choice,
.motion-row {
  transition-duration: var(--motion-duration-state);
  transition-property: background-color, border-color, color, opacity;
  transition-timing-function: var(--motion-ease-out);
}

.motion-dropdown {
  transform-origin: top right;
  transition-duration: var(--motion-duration-state);
  transition-property: opacity, transform;
  transition-timing-function: var(--motion-ease-emphasized);
}

.motion-dropdown[data-motion-placement="top"] {
  transform-origin: bottom right;
}

.motion-dropdown[data-motion-state="opening"],
.motion-dropdown[data-motion-state="closing"] {
  opacity: 0;
  transform: translate3d(0, -0.25rem, 0) scale(0.985);
  will-change: opacity, transform;
}

.motion-dropdown[data-motion-placement="top"][data-motion-state="opening"],
.motion-dropdown[data-motion-placement="top"][data-motion-state="closing"] {
  transform: translate3d(0, 0.25rem, 0) scale(0.985);
}

.motion-dropdown[data-motion-state="open"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-overlay {
  opacity: 1;
  transition-duration: var(--motion-duration-overlay);
  transition-property: opacity;
  transition-timing-function: var(--motion-ease-out);
}

.motion-overlay[data-motion-state="opening"],
.motion-overlay[data-motion-state="closing"] {
  opacity: 0;
}

.motion-modal-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-duration: var(--motion-duration-overlay);
  transition-property: opacity, transform;
  transition-timing-function: var(--motion-ease-emphasized);
}

.motion-overlay[data-motion-state="opening"] .motion-modal-panel,
.motion-overlay[data-motion-state="closing"] .motion-modal-panel {
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0) scale(0.985);
  will-change: opacity, transform;
}

.motion-slideover-panel {
  transform: translate3d(0, 0, 0);
  transition-duration: var(--motion-duration-overlay);
  transition-property: transform;
  transition-timing-function: var(--motion-ease-emphasized);
}

.motion-overlay[data-motion-state="opening"] .motion-slideover-panel,
.motion-overlay[data-motion-state="closing"] .motion-slideover-panel {
  transform: translate3d(100%, 0, 0);
  will-change: transform;
}

.motion-toast {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-duration: var(--motion-duration-state);
  transition-property: opacity, transform;
  transition-timing-function: var(--motion-ease-emphasized);
}

.motion-toast[data-motion-state="closing"] {
  opacity: 0;
  transform: translate3d(0.5rem, 0, 0);
  will-change: opacity, transform;
}

@starting-style {
  .motion-toast {
    opacity: 0;
    transform: translate3d(0.5rem, -0.125rem, 0);
  }
}

.turbo-progress-bar {
  background: rgb(79 70 229);
  box-shadow: 0 0 0.75rem rgb(79 70 229 / 35%);
  height: 0.1875rem;
}

@media (hover: hover) {
  .motion-lift:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translate3d(0, -1px, 0);
  }

  .motion-row:hover {
    background-color: rgb(248 250 252);
  }
}

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

  .motion-interactive:active:not(:disabled):not([aria-disabled="true"]),
  .motion-lift:hover:not(:disabled):not([aria-disabled="true"]),
  .motion-dropdown[data-motion-state],
  .motion-modal-panel,
  .motion-slideover-panel,
  .motion-toast,
  .motion-toast[data-motion-state="closing"] {
    transform: none;
  }
}