@keyframes dialog-in {
  0% { opacity: 0; transform: translateY(22px) scale(.96); }
  45% { opacity: 1; transform: translateY(-3px) scale(1.008); }
  70% { transform: translateY(1px) scale(.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dialog-out {
  to { opacity: 0; transform: translateY(12px) scale(.97); }
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { to { opacity: 0; } }
@keyframes view-in {
  from { opacity: 0; transform: scale(.96) translateY(7px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.motion-dialog.motion-opening { animation: dialog-in 579ms both; }
.motion-dialog.motion-opening::backdrop { animation: backdrop-in 260ms both; }
.motion-dialog.motion-closing { animation: dialog-out 220ms ease-in both; pointer-events: none; }
.motion-dialog.motion-closing::backdrop { animation: backdrop-out 220ms ease-in both; }
.motion-view-enter { animation: view-in 260ms cubic-bezier(.3,.7,.1,1) both; }
.motion-overlay-enter { animation: backdrop-in 260ms both; }
.motion-overlay-enter .modal-card { animation: dialog-in 579ms both; }
.motion-overlay-exit { animation: backdrop-out 220ms ease-in both; pointer-events: none; }
.motion-overlay-exit .modal-card { animation: dialog-out 220ms ease-in both; }
@media (prefers-reduced-motion: reduce) {
 .motion-dialog.motion-opening,.motion-dialog.motion-closing,
 .motion-dialog.motion-opening::backdrop,.motion-dialog.motion-closing::backdrop,
 .motion-view-enter,.motion-overlay-enter,.motion-overlay-enter .modal-card,
 .motion-overlay-exit,.motion-overlay-exit .modal-card { animation: none; }
}