.project-dialog.is-opening,
.project-dialog.is-closing {
  will-change: opacity, transform;
}

.project-dialog.is-opening {
  animation: project-dialog-enter 240ms cubic-bezier(.22, .61, .36, 1) both;
}

.project-dialog.is-closing {
  animation: project-dialog-leave 160ms cubic-bezier(.4, 0, 1, 1) both;
}

.project-dialog.is-opening::backdrop {
  animation: project-backdrop-enter 240ms ease-out both;
}

.project-dialog.is-closing::backdrop {
  animation: project-backdrop-leave 160ms ease-in both;
}

@keyframes project-dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes project-dialog-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(.992); }
}

@keyframes project-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes project-backdrop-leave {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .project-dialog.is-opening,
  .project-dialog.is-closing,
  .project-dialog.is-opening::backdrop,
  .project-dialog.is-closing::backdrop {
    animation: none !important;
    will-change: auto;
  }
}