.modal-motion {
    --modal-motion-distance: 18px;
}

.modal-motion-in {
    animation: modalFadeIn 180ms ease-out both;
}

.modal-motion-out {
    animation: modalFadeOut 160ms ease-in both;
}

.modal-motion-panel {
    transform-origin: center;
}

.modal-motion-in .modal-motion-panel {
    animation: modalPanelIn 220ms cubic-bezier(.2, .9, .2, 1) both;
}

.modal-motion-out .modal-motion-panel {
    animation: modalPanelOut 160ms ease-in both;
}

.modal-motion-backdrop {
    transform-origin: center;
}

.modal-motion-in .modal-motion-backdrop {
    animation: modalBackdropIn 180ms ease-out both;
}

.modal-motion-out .modal-motion-backdrop {
    animation: modalBackdropOut 160ms ease-in both;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalBackdropIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes modalBackdropOut {
    from {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
    to {
        opacity: 0;
        backdrop-filter: blur(0);
    }
}

@keyframes modalPanelIn {
    from {
        opacity: 0;
        transform: translateY(var(--modal-motion-distance)) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalPanelOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-motion-in,
    .modal-motion-out,
    .modal-motion-in .modal-motion-panel,
    .modal-motion-out .modal-motion-panel,
    .modal-motion-in .modal-motion-backdrop,
    .modal-motion-out .modal-motion-backdrop {
        animation-duration: 1ms !important;
    }
}