:root {
    /* Neon Menu Vars */
    --hue1: 260; /* Purple */
    --hue2: 220; /* Blue */
    --border: 1px;
    --border-color: hsl(var(--hue2), 12%, 20%);
    --radius: 22px;
    --ease: cubic-bezier(0.5, 1, 0.89, 1);
}

#neon-menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition-property: visibility, opacity, filter;
    transition-duration: 0s, 0.25s, 0.25s;
    transition-delay: 0.5s, 0s, 0s;
    transition-timing-function: var(--ease);
    filter: blur(4px);

    font-family: 'Inter', sans-serif;
    color: #aab7c4;

    position: fixed;
    top: 90px; /* Below header */
    left: 1.5rem; /* Align LEFT */
    min-width: 150px;
    border-radius: var(--radius);
    border: var(--border) solid var(--border-color);
    padding: 1em;
    background: linear-gradient(235deg, hsl(var(--hue1) 50% 10% / 0.8), hsl(var(--hue1) 50% 10% / 0) 33%), linear-gradient(45deg , hsl(var(--hue2) 50% 10% / 0.8), hsl(var(--hue2) 50% 10% / 0) 33%), linear-gradient(hsl(220deg 25% 4.8% / 0.66));
    backdrop-filter: blur(12px);
    box-shadow: hsl(var(--hue2) 50% 2%) 0px 10px 16px -8px, hsl(var(--hue2) 50% 4%) 0px 20px 36px -14px;
    z-index: 2000;
}

#neon-menu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    filter: blur(0px);
}

/* Glow Animations */
#neon-menu.open::before,
#neon-menu.open::after,
#neon-menu.open .glow,
#neon-menu.open .shine {
    animation: glow 1s var(--ease) both;
}

#neon-menu.open .shine { animation-delay: 0s; animation-duration: 2s; }
#neon-menu.open .glow { animation-delay: 0.2s; }
#neon-menu.open .glow-bright { animation-delay: 0.1s; animation-duration: 1.5s; }
#neon-menu.open .shine-bottom { animation-delay: 0.1s; animation-duration: 1.8s; }
#neon-menu.open .glow-bottom { animation-delay: 0.3s; }
#neon-menu.open .glow-bright.glow-bottom { animation-delay: 0.3s; animation-duration: 1.1s; }

#neon-menu .shine, #neon-menu .glow { --hue: var(--hue1); }
#neon-menu .shine-bottom, #neon-menu .glow-bottom { --hue: var(--hue2); --conic: 135deg; }

/* Shine Elements */
#neon-menu .shine,
#neon-menu .shine::before,
#neon-menu .shine::after {
    pointer-events: none;
    border-radius: 0;
    border-top-right-radius: inherit;
    border-bottom-left-radius: inherit;
    border: 1px solid transparent;
    width: 75%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    right: calc(var(--border) * -1);
    top: calc(var(--border) * -1);
    z-index: 1;
    --start: 12%;
    background: conic-gradient(from var(--conic, -45deg) at center, transparent var(--start,0%), hsl(var(--hue), 80%, 60%), transparent var(--end,50%)) border-box;
    mask: linear-gradient(transparent), linear-gradient(black);
    mask-repeat: no-repeat;
    mask-clip: padding-box, border-box;
    mask-composite: subtract;
}

#neon-menu .shine::before, #neon-menu .shine::after { content: ""; width: auto; inset: -2px; mask: none; }
#neon-menu .shine::after { z-index: 2; --start: 17%; --end: 33%; background: conic-gradient(from var(--conic, -45deg) at center, transparent var(--start,0%), hsl(var(--hue), 80%, 85%), transparent var(--end,50%)); }
#neon-menu .shine-bottom { top: auto; bottom: calc(var(--border) * -1); left: calc(var(--border) * -1); right: auto; }

/* Glow Elements */
#neon-menu .glow {
    pointer-events: none;
    border-top-right-radius: calc(var(--radius) * 2.5);
    border-bottom-left-radius: calc(var(--radius) * 2.5);
    border: calc(var(--radius) * 1.25) solid transparent;
    inset: calc(var(--radius) * -2);
    width: 75%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    opacity: 1;
    filter: blur(12px) saturate(1.25) brightness(0.5);
    mix-blend-mode: plus-lighter;
    z-index: 3;
}

#neon-menu .glow.glow-bottom { inset: calc(var(--radius) * -2); top: auto; right: auto; }

#neon-menu .glow::before, #neon-menu .glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border: inherit;
    border-radius: inherit;
    background: conic-gradient(from var(--conic, -45deg) at center, transparent var(--start,0%), hsl(var(--hue), 95%, 60%), transparent var(--end,50%)) border-box;
    mask: linear-gradient(transparent), linear-gradient(black);
    mask-repeat: no-repeat;
    mask-clip: padding-box, border-box;
    mask-composite: subtract;
    filter: saturate(2) brightness(1);
}

#neon-menu .glow::after { --start: 15%; --end: 35%; border-width: calc(var(--radius) * 1.75); border-radius: calc(var(--radius) * 2.75); inset: calc(var(--radius) * -0.25); z-index: 4; opacity: 0.75; }

#neon-menu .glow-bright {
    --start: 13%; --end: 37%;
    border-width: 5px;
    border-radius: calc(var(--radius) + 2px);
    inset: -7px;
    filter: blur(2px) brightness(0.66);
}
#neon-menu .glow-bright::after { content: none; }
#neon-menu .glow-bright.glow-bottom { inset: -7px; right: auto; top: auto; }

/* Menu Content */
#neon-menu .inner, #neon-menu section { display: flex; flex-direction: column; gap: 0.5em; }
#neon-menu .inner { font-size: 0.875rem; }

#neon-menu hr {
    width: 100%;
    height: 0.5px;
    background: var(--border-color);
    border: none;
    margin: 0.25em 0 0.5em;
    opacity: 0.66;
}

#neon-menu header {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0 0.66em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--highlight);
}

#neon-menu ul { list-style: none; padding: 0; margin: 0; }

#neon-menu li {
    --item-hue: var(--hue2);
    position: relative;
    padding: 0.66em;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 0.8em;
    border-radius: calc(var(--radius) * 0.33333);
    border: 1px solid transparent;
    transition: all 0.3s ease-in;
    background: linear-gradient(90deg, hsl(var(--item-hue) 29% 13% / 0), hsl(var(--item-hue) 30% 15% / 0) 24% 32%, hsl(var(--item-hue) 5% 7% / 0) 95%) border-box;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-main);
}

#neon-menu li a {
    text-decoration: none;
    color: inherit;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.8em;
}

#neon-menu li:hover {
    background: linear-gradient(90deg, hsl(var(--item-hue) 29% 13% / 0.5), hsl(var(--item-hue) 30% 15% / 0.5) 24% 32%, hsl(var(--item-hue) 5% 7% / 0) 95%) border-box;
    border-color: rgba(255,255,255,0.1);
}

#neon-menu li svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

#neon-menu li:hover svg {
    opacity: 1;
    color: var(--highlight);
}

@keyframes glow {
    0% { opacity: 0; }
    3% { opacity: 1; }
    10% { opacity: 0; }
    12% { opacity: 0.7; }
    16% { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes glowoff {
    to { opacity: 0; }
}

/* Menu Toggle Button */
.menu-toggle-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.menu-toggle-btn:hover {
    background: var(--glass-bg);
    border-color: var(--highlight);
    color: var(--highlight);
    box-shadow: 0 0 15px rgba(142, 68, 173, 0.3);
}