/* --- СОВРЕМЕННАЯ И ЗАМЕДЛЕННАЯ АНИМАЦИЯ ДЛЯ TILDA --- */

/* 1. Наш класс-активатор, который мы добавляем к блоку вручную */
.modern-animation .t-block,
.modern-animation .t-cover__wrapper,
.modern-animation .t396__artboard { /* Добавили селектор для Zero-блоков */
    /* Задаем НАЧАЛЬНОЕ состояние ДО появления блока */
    opacity: 0 !important;
    transform: translateY(40px) scale(0.98) !important;
    
    /* 
    !!! ГЛАВНЫЕ ИЗМЕНЕНИЯ ЗДЕСЬ !!!
    - Длительность анимации движения (transform) увеличена с 0.8s до 1.2s.
    - Длительность появления (opacity) увеличена с 0.7s до 1.0s.
    - Добавлена задержка в 0.2s перед стартом анимации.
    */
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.2s, opacity 1.0s ease-out 0.2s !important;
    
    will-change: transform, opacity;
}

/* 2. Используем внутренний класс Tilda "t-animate_started" */
/* Это ФИНАЛЬНОЕ состояние ПОСЛЕ того, как блок появился на экране */
.modern-animation.t-animate_started .t-block,
.modern-animation.t-animate_started .t-cover__wrapper,
.modern-animation.t-animate_started .t396__artboard {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* 3. Дополнительные "плюшки": тень и эффект при наведении */
.modern-animation .t-block,
.modern-animation .t-cover__wrapper,
.modern-animation .t396__artboard {
    border-radius: 20px !important;
    /* Переход для тени делаем отдельным, чтобы он не задерживался */
    transition: box-shadow 0.4s ease-out;
}

.modern-animation:hover .t-block,
.modern-animation:hover .t-cover__wrapper,
.modern-animation:hover .t396__artboard {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
    
/* 4. Принудительно устанавливаем шрифты */
.modern-animation [data-elem-type="title"] {
    font-family: 'Noto Serif', serif !important;
}
.modern-animation [data-elem-type="text"] {
    font-family: 'Montserrat', sans-serif !important;
}