.motion-dialog {
  opacity: 0;
  translate: 0 20px;
  scale: .975;
  transform-origin: 50% 50%;
  transition: opacity 320ms ease, translate 420ms cubic-bezier(.2,.75,.2,1), scale 420ms cubic-bezier(.2,.75,.2,1);
}
.motion-dialog::backdrop { opacity: 0; transition: opacity 320ms ease; }
.motion-dialog[data-modal-state="open"] { opacity: 1; translate: 0 0; scale: 1; }
.motion-dialog[data-modal-state="open"]::backdrop { opacity: 1; }
.motion-dialog[data-modal-state="closing"] { opacity: 0; translate: 0 12px; scale: .985; transition-duration: 260ms; transition-timing-function: ease-in; }
.motion-dialog[data-modal-state="closing"]::backdrop { opacity: 0; transition-duration: 260ms; }
@media (prefers-reduced-motion: reduce) {
  .motion-dialog, .motion-dialog::backdrop { transition: none; }
  .motion-dialog { translate: none; scale: none; }
}