/* Анимация для плавного появления модальных окон */
@keyframes modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 
 * Применяем анимацию к модальному окну, когда оно становится видимым.
 * Этот селектор сработает, если JavaScript добавляет `display: flex` или `display: block`
 * как инлайн-стиль для отображения окна. Это позволяет добиться плавности
 * без изменения JavaScript кода.
 */
.modal[style*="display: flex"],
.modal[style*="display: block"] {
    animation: modal-fade-in 0.4s ease-out;
}