/* --- MENU OVERLAY --- */
#menu-overlay {
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
    visibility: hidden;
}

#menu-overlay.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Menu Links Hover Effect */
.menu-link {
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), color 0.4s;
    position: relative;
    /* overflow: hidden; */
}

/* Rolling Text Effect on Hover (Optional, handled via GSAP usually but simple CSS here) */
.menu-link:hover {
    transform: translateX(20px);
}

.menu-link::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) skewX(-20deg) translateX(-100px);
    opacity: 0;
    color: var(--cyan);
    filter: blur(10px);
    transition: all 0.5s;
    pointer-events: none;
    z-index: -1;
}

.menu-link:hover::before {
    opacity: 0.2;
    transform: translateY(-50%) skewX(0deg) translateX(0);
    filter: blur(0px);
}

/* Hamburger Animation */
button.open .w-4:nth-child(1) {
    transform: rotate(45deg) translate(2px, 2px);
}

button.open .w-4:nth-child(2) {
    transform: rotate(-45deg) translate(2px, -2px);
}