/**
 * Custom Mobile Menu Animations
 * 
 * Csak mobil nézetben (max-width: 921px)
 */

@media (max-width: 921px) {
    /* Dropdown típusú mobil menü - #ast-mobile-header - alapállapotban átlátszó */
    #ast-mobile-header[data-type="dropdown"] {
        background: transparent !important;
        box-shadow: none !important;
        transition: box-shadow 0.4s ease !important;
    }

    /* Fehér háttér csak akkor, amikor a menü megnyílik - :has() szelektor - azonnali váltás */
    #ast-mobile-header[data-type="dropdown"]:has(.main-header-bar-navigation.toggle-on) {
        background: white !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        transition: box-shadow 0.4s ease !important;
    }

    /* Fallback: ha a :has() nem támogatott, akkor a navigation elem kapja a fehér hátteret */
    /* Ebben az esetben a navigation elem kitölti az egész header területet */
    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on {
        background: white !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        transition: box-shadow 0.4s ease !important;
    }

    /* Alapállapotban a navigation rejtett */
    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation:not(.toggle-on) {
        transform: translateY(-20px) !important;
        opacity: 0 !important;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    /* Dropdown menü megnyitva - amikor a toggle-on osztály megjelenik - felülről lecsúszik */
    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on {
        transform: translateY(0) !important;
        opacity: 1 !important;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        animation: slideDownFromTop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    }

    @keyframes slideDownFromTop {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Mobil header tartalom animáció - amikor a toggle-on osztály megjelenik */
    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .ast-mobile-header-content,
    #ast-mobile-header[data-type="dropdown"] .toggle-on .ast-mobile-header-content {
        animation: fadeInSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both !important;
    }

    /* Menü elemek animációja - amikor a toggle-on osztály megjelenik */
    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item,
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item,
    #ast-mobile-header[data-type="dropdown"] nav.toggled .menu-item {
        animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
        opacity: 0;
        transform: translateY(15px);
    }

    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item:nth-child(1),
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item:nth-child(1) {
        animation-delay: 0.15s;
    }

    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item:nth-child(2),
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item:nth-child(2) {
        animation-delay: 0.2s;
    }

    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item:nth-child(3),
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item:nth-child(3) {
        animation-delay: 0.25s;
    }

    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item:nth-child(4),
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item:nth-child(4) {
        animation-delay: 0.3s;
    }

    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item:nth-child(5),
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item:nth-child(5) {
        animation-delay: 0.35s;
    }

    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item:nth-child(6),
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item:nth-child(6) {
        animation-delay: 0.4s;
    }

    #ast-mobile-header[data-type="dropdown"] .main-header-bar-navigation.toggle-on .menu-item:nth-child(n+7),
    #ast-mobile-header[data-type="dropdown"] .toggle-on .menu-item:nth-child(n+7) {
        animation-delay: 0.45s;
    }

    /* Mobil popup drawer pozíció és alapállapot */
    #ast-mobile-popup-wrapper .ast-mobile-popup-drawer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                    opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    visibility 0s linear 0.5s !important;
    }

    /* Mobil popup megnyitva - felülről lecsúszik */
    body.ast-mobile-popup-active #ast-mobile-popup-wrapper .ast-mobile-popup-drawer,
    #ast-mobile-popup-wrapper .ast-mobile-popup-drawer.active,
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-drawer {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                    opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    visibility 0s linear 0s !important;
    }

    /* Mobil popup tartalom - késleltetett animáció */
    body.ast-mobile-popup-active .ast-mobile-popup-content,
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content,
    #ast-mobile-popup-wrapper .ast-mobile-popup-drawer.active .ast-mobile-popup-content {
        animation: fadeInSlideDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both !important;
    }

    @keyframes fadeInSlideDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Mobil popup bezárás animáció */
    #ast-mobile-popup-wrapper.ast-closing .ast-mobile-popup-drawer,
    body:not(.ast-mobile-popup-active) #ast-mobile-popup-wrapper:not(.active) .ast-mobile-popup-drawer {
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19), 
                    opacity 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19),
                    visibility 0s linear 0.4s !important;
    }

    /* Menü elemek - sorban animáció (stagger effect) */
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item,
    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item,
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item {
        animation: fadeInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
        opacity: 0;
        transform: translateY(20px);
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(1),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(1),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(1) {
        animation-delay: 0.2s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(2),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(2),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(2) {
        animation-delay: 0.25s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(3),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(3),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(3) {
        animation-delay: 0.3s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(4),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(4),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(4) {
        animation-delay: 0.35s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(5),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(5),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(5) {
        animation-delay: 0.4s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(6),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(6),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(6) {
        animation-delay: 0.45s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(7),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(7),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(7) {
        animation-delay: 0.5s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(8),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(8),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(8) {
        animation-delay: 0.55s;
    }

    body.ast-mobile-popup-active .ast-mobile-popup-content nav .menu-item:nth-child(n+9),
    body.ast-mobile-popup-active .ast-mobile-popup-content .ast-builder-menu .menu-item:nth-child(n+9),
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-content .menu-item:nth-child(n+9) {
        animation-delay: 0.6s;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Bezárás gomb animáció */
    #menu-toggle-close,
    .ast-mobile-popup-header #menu-toggle-close {
        animation: rotateIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }
    
    #menu-toggle-close:hover {
        transform: rotate(90deg) scale(1.1) !important;
    }

    @keyframes rotateIn {
        from {
            opacity: 0;
            transform: rotate(-180deg) scale(0.5);
        }
        to {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
    }

    /* Overlay animáció */
    #ast-mobile-popup-wrapper .ast-mobile-popup-overlay {
        opacity: 0 !important;
        transition: opacity 0.4s ease-out !important;
    }
    
    body.ast-mobile-popup-active #ast-mobile-popup-wrapper .ast-mobile-popup-overlay,
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-overlay {
        opacity: 1 !important;
    }

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

    /* Smooth transitions menü elemekhez */
    .ast-mobile-popup-content .menu-item,
    .ast-mobile-popup-content .ast-builder-menu .menu-item a {
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    /* Hamburger gomb animáció - aktiváláskor */
    .ast-mobile-header-wrap .ast-button-wrap .mobile-menu-toggle.toggled,
    .ast-mobile-header-wrap .ast-button-wrap .mobile-menu-toggle.toggled .ast-mobile-menu-burger-icon {
        animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    }

    @keyframes bounceIn {
        0% {
            transform: scale(0.3);
            opacity: 0;
        }
        50% {
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Mobil popup backdrop blur effekt */
    #ast-mobile-popup-wrapper .ast-mobile-popup-overlay {
        backdrop-filter: blur(0px);
        transition: backdrop-filter 0.4s ease, opacity 0.4s ease !important;
    }

    body.ast-mobile-popup-active #ast-mobile-popup-wrapper .ast-mobile-popup-overlay,
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-overlay {
        backdrop-filter: blur(8px);
    }

    /* Mobil popup inner animáció */
    body.ast-mobile-popup-active .ast-mobile-popup-inner,
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-inner {
        animation: slideInFromTop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both !important;
    }

    @keyframes slideInFromTop {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Header elem animáció */
    body.ast-mobile-popup-active .ast-mobile-popup-header,
    #ast-mobile-popup-wrapper.active .ast-mobile-popup-header {
        animation: fadeInDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both !important;
    }

    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}