:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.modal.fade .modal-dialog {
  -webkit-transform: scale(0.96);
  -ms-transform: scale(0.96);
  -o-transform: scale(0.96);
  transform: scale(0.96);
  -webkit-transform: scale(var(--modal-scale));
  -ms-transform: scale(var(--modal-scale));
  -o-transform: scale(var(--modal-scale));
  transform: scale(var(--modal-scale));
  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
  -o-transition: -o-transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transition: -webkit-transform var(--modal-close-dur) var(--modal-ease);
  -o-transition: -o-transform var(--modal-close-dur) var(--modal-ease);
  transition: transform var(--modal-close-dur) var(--modal-ease);
  will-change: transform;
}

.modal.in .modal-dialog {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  transition-duration: 250ms;
  -webkit-transition-duration: var(--modal-open-dur);
  -o-transition-duration: var(--modal-open-dur);
  transition-duration: var(--modal-open-dur);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .modal.in .modal-dialog {
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}