/* Menu container */
.menu-container {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 15px;
    background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
    box-shadow: 20px 20px 60px #c4c4c4, -20px -20px 60px #ffffff;
    position: relative;
    z-index: 2;
    overflow: hidden; /* Ensure the shine does not overflow the container */
}

/* Menu layout */
.menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Shine effect for menu-container (white transparent gradient) */
.menu-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start the shine off-screen to the left */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Angle the shine for a more natural effect */
    transition: none; /* Remove any default transitions */
}

.menu-container.shine::before {
    animation: shine-animation 1s forwards;
}

@keyframes shine-animation {
    from {
        left: -100%;
    }
    to {
        left: 100%;
    }
}

/* Additional Colorful Shine effect for menu-container on click - more subtle */
.menu-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen to the left */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(161, 18, 221, 0.3) 0%, 
        rgba(247, 198, 18, 0.2) 25%,
        rgba(237, 27, 218, 0.25) 50%,
        rgba(161, 18, 221, 0.3) 75%,
        rgba(161, 18, 221, 0.3) 100%
    );
    transform: skewX(-25deg);
    transition: none;
    opacity: 0;
    pointer-events: none;
    filter: blur(100px); /* Increased blur for even smoother, more diffused effect */
}

.menu-container.colorful-shine::after {
    animation: colorful-shine-animation 3.5s ease-in-out forwards; /* Slower animation (3.5s) */
    opacity: 0.8; /* Slightly reduced opacity */
}

@keyframes colorful-shine-animation {
    0% {
        left: -100%;
        opacity: 0.4;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        left: 100%;
        opacity: 0.4;
    }
}

/* Menu button styles */
.menu-button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(145deg, #f0f0f0, #e6e6e6);
    box-shadow: 5px 5px 10px #c4c4c4, -5px -5px 10px #ffffff;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    outline: none;
}

/* Hover effect for menu buttons */
.menu-button:hover {
    background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
    box-shadow: inset 5px 5px 10px #c4c4c4, inset -5px -5px 10px #ffffff;
    transform: translateY(-4px) scale(1.02);
}

/* Focus styles for menu buttons - only visible when using keyboard navigation */
.menu-button:focus-visible {
    box-shadow: 0 0 0 3px #a112dd;
}

/* Active state for menu buttons */
.menu-button.active {
    background: linear-gradient(145deg, #e0e0e0, #d3d3d3);
    box-shadow: inset 2px 2px 4px #c0c0c0, inset -2px -2px 4px #ffffff;
    transform: translateY(-2px);    
    color: #333333;
    transition: all 0.3s ease;
    cursor: default;
}

/* Hover effect for active menu buttons */
.menu-button.active:hover {
    background: linear-gradient(145deg, #e0e0e0, #d3d3d3);
    box-shadow: inset 2px 2px 4px #c0c0c0, inset -2px -2px 4px #ffffff;
    transform: translateY(-4px);
}

/* Fade-out effect for old buttons */
.menu-button.old-button {
    opacity: 1;
    transition: opacity 300ms ease-out;
}

.menu-button.old-button.fade-out {
    opacity: 0;
}

/* Fade-in effect for new buttons */
.menu-button.new-button {
    opacity: 0;
    transition: opacity 300ms ease-in;
}

.menu-button.new-button.fade-in {
    opacity: 1;
}

/* Hide new buttons by default */
.menu-button.new-button {
    display: none;
}

/* Ripple effect for buttons */
.menu-button {
    position: relative;
    overflow: hidden; /* Important for containing the ripple */
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none; /* Ensure the ripple doesn't interfere with clicks */
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Button press effect - more subtle and slower */
.menu-button:active:not(.active) {
    transform: scale(0.98); /* Less scaling for subtlety */
    box-shadow: 2px 2px 5px #c4c4c4, -2px -2px 5px #ffffff;
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Slower transition */
}

/* Glow effect on hover with brand color - more subtle */
.menu-button:hover:not(.active) {
    box-shadow: 0 0 10px rgba(161, 18, 221, 0.3), 5px 5px 10px #c4c4c4, -5px -5px 10px #ffffff;
    transition: all 1.2s ease; /* Slower transition for more subtle effect */
}

/* Hover animation class - slower and more subtle */
.menu-button.hover-animation {
    animation: pulse 3s infinite alternate ease-in-out; /* Slower animation (3s) with smoother easing */
}

/* Pressed state for immediate visual feedback - similar to active but more instant */
.menu-button.pressed {
    background: linear-gradient(145deg, #e0e0e0, #d3d3d3);
    box-shadow: inset 2px 2px 4px #c0c0c0, inset -2px -2px 4px #ffffff;
    transform: scale(0.98);
    transition: none; /* Remove transition to make the effect instant */
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 5px rgba(161, 18, 221, 0.2), 5px 5px 10px #c4c4c4, -5px -5px 10px #ffffff;
    }
    100% {
        box-shadow: 0 0 15px rgba(161, 18, 221, 0.4), 5px 5px 10px #c4c4c4, -5px -5px 10px #ffffff;
    }
}

/* Responsive styles for menu */
@media (max-width: 600px) {
    .menu {
        flex-direction: column;
    }

    .menu-button {
        width: 100%;
        padding: 5px 10px;
        margin-bottom: 10px;
    }
}