/* Mobile Menu Animations */
#mobile-menu {
    /* Initial state - hidden off-screen */
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 300ms cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

#mobile-menu.mobile-menu-open {
    /* Open state - visible on-screen */
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}


/* Hamburger icon animation */
#mobile-menu-button .material-symbols-outlined {
    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

#mobile-menu-button:hover .material-symbols-outlined {
    transform: scale(1.1);
}

/* Close icon animation */
#close-menu-button .material-symbols-outlined {
    transition: transform 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

#close-menu-button:hover .material-symbols-outlined {
    transform: rotate(90deg);
}

/* Menu items stagger animation */
#mobile-menu.mobile-menu-open .flex.flex-col > a,
#mobile-menu.mobile-menu-open .flex.flex-col > button,
#mobile-menu.mobile-menu-open .pt-8 > a,
#mobile-menu.mobile-menu-open .pt-8 > button {
    animation: slideInLeft 400ms cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
}

#mobile-menu.mobile-menu-open .flex.flex-col > a:nth-child(1) { animation-delay: 50ms; }
#mobile-menu.mobile-menu-open .flex.flex-col > a:nth-child(2) { animation-delay: 100ms; }
#mobile-menu.mobile-menu-open .flex.flex-col > a:nth-child(3) { animation-delay: 150ms; }
#mobile-menu.mobile-menu-open .flex.flex-col > a:nth-child(4) { animation-delay: 200ms; }
#mobile-menu.mobile-menu-open .flex.flex-col > a:nth-child(5) { animation-delay: 250ms; }

#mobile-menu.mobile-menu-open .pt-8 > a:nth-child(1) { animation-delay: 100ms; }
#mobile-menu.mobile-menu-open .pt-8 > a:nth-child(2) { animation-delay: 150ms; }
#mobile-menu.mobile-menu-open .pt-8 > div:nth-child(1) { animation-delay: 200ms; }

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