/* Menu Overlay Animation */
#mobile-menu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
}

#mobile-menu.menu-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Menu Items Animation */
.menu-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-20px);
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.menu-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(247, 255, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.menu-item:active::after {
    width: 200px;
    height: 200px;
}

#mobile-menu.menu-open .menu-item {
    transform: translateY(0);
    opacity: 1;
}

#mobile-menu.menu-open .menu-item:nth-child(1) {
    transition-delay: 0.1s;
}

#mobile-menu.menu-open .menu-item:nth-child(2) {
    transition-delay: 0.2s;
}

#mobile-menu.menu-open .menu-item:nth-child(3) {
    transition-delay: 0.3s;
}

#mobile-menu.menu-open .menu-item:nth-child(4) {
    transition-delay: 0.4s;
}

/* Hover effect for menu items */
.menu-item:hover {
    transform: translateX(10px);
    color: #f7ff00;
}

/* Hamburger button animation */
#mobile-menu-button {
    transition: all 0.3s ease;
    cursor: pointer;
}

#mobile-menu-button .hamburger-bar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu-button.menu-open .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#mobile-menu-button.menu-open .hamburger-bar:nth-child(2) {
    opacity: 0;
}

#mobile-menu-button.menu-open .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Close button animation */
#close-menu-button {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#close-menu-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(247, 255, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

#close-menu-button:active::after {
    width: 100px;
    height: 100px;
}

#close-menu-button:hover {
    transform: rotate(90deg);
    color: #f7ff00;
} 

.menu-item {
    transition: all 0.3s ease;
}

.menu-item.animate-out {
    transform: translateY(0) !important;
    opacity: 0 !important;
}

#mobile-menu {
    transition: all 0.3s ease;
}

#mobile-menu.closing {
    opacity: 0;
    visibility: hidden;
}

/* Neon pulsating logo effect */
.logo-link {
    position: relative;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    animation: neonPulse 1.5s ease-in-out infinite alternate;
}

@keyframes neonPulse {
    from {
        text-shadow:
            0   0   5px  #f7ff00,
            0   0  10px  #f7ff00,
            0   0  20px  #f7ff00;
    }
    to {
        text-shadow:
            0   0  10px  #f7ff00,
            0   0  20px  #f7ff00,
            0   0  30px  #f7ff00;
    }
}

.logo-link:hover {
    animation-duration: 0.8s;
    text-shadow:
        0   0  20px  #f7ff00,
        0   0  30px  #f7ff00,
        0   0  40px  #f7ff00;
}