/*
 * =====================================================
 * ТЕСТОВЫЙ ФАЙЛ: Анимация карточек мобильного меню
 * Стиль: медленная волна снизу вверх (stagger)
 *
 * Чтобы ОТКАТИТЬ: удалите из HTML строку:
 * <link rel="stylesheet" href="mobile-menu-animate.css">
 * =====================================================
*/

@media (max-width: 1024px) {

    /* Базовое состояние: все карточки скрыты снизу */
    .nav > .nav-link,
    .nav > .nav-item {
        opacity: 0;
        transform: translateY(40px);
        transition:
            opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* При открытии меню — карточки появляются */
    .header.menu-open .nav > .nav-link,
    .header.menu-open .nav > .nav-item {
        opacity: 1;
        transform: translateY(0);
    }

    /* Медленная волна: шаг 160мс между карточками */
    .header.menu-open .nav > *:nth-child(1) { transition-delay: 0.12s; }
    .header.menu-open .nav > *:nth-child(2) { transition-delay: 0.28s; }
    .header.menu-open .nav > *:nth-child(3) { transition-delay: 0.44s; }
    .header.menu-open .nav > *:nth-child(4) { transition-delay: 0.60s; }
    .header.menu-open .nav > *:nth-child(5) { transition-delay: 0.76s; }
    .header.menu-open .nav > *:nth-child(6) { transition-delay: 0.92s; }

    /* При закрытии — убираем мгновенно без задержек */
    .header:not(.menu-open) .nav > .nav-link,
    .header:not(.menu-open) .nav > .nav-item {
        transition-delay: 0s !important;
        transition-duration: 0.18s !important;
    }

    /* Плавная анимация самой сетки nav */
    .nav {
        transition:
            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
}