:root {
    --modal-enter-duration: 240ms;
    --modal-exit-duration: 180ms;
    --modal-motion-easing: cubic-bezier(.22, 1, .36, 1);
}

.modal.fade {
    transition: opacity var(--modal-enter-duration) ease;
}

.modal.fade .modal-dialog {
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: transform var(--modal-enter-duration) var(--modal-motion-easing), opacity var(--modal-enter-duration) ease;
}

.modal.show .modal-dialog {
    opacity: 1;
    transform: none;
}

.modal-backdrop.fade {
    transition: opacity var(--modal-enter-duration) ease;
}

dialog.modal-motion-opening::backdrop {
    animation: modal-backdrop-enter var(--modal-enter-duration) ease both;
}

dialog.modal-motion-closing::backdrop {
    animation: modal-backdrop-exit var(--modal-exit-duration) ease both;
}

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

@keyframes modal-backdrop-exit {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade,
    .modal.fade .modal-dialog,
    .modal-backdrop.fade {
        transition: none !important;
    }

    dialog.modal-motion-opening::backdrop,
    dialog.modal-motion-closing::backdrop {
        animation: none !important;
    }
}