:root {
    /* vars */
    
    --hue1: 255;
    --hue2: 222;
    --border: 1px;
    --border-color: hsl(var(--hue2), 12%, 20%);
    --radius: 22px;
    
    --ease: cubic-bezier(0.5, 1, 0.89, 1);
    
}

#menu {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition-property: visibility, opacity, transform;
    transition-duration: 0s, 0.25s, 0.25s;
    transition-delay: 0.5s, 0s, 0s;
    transition-timing-function: var(--ease);
    transform: translateZ(0) scale(0.98);
    will-change: opacity, transform;
    
    font-family: 'Asap', sans-serif;
    color: #737985;
    
    position: unset;
    top: 140px;
    left: 2svw;
    min-height: 275px;
    border-radius: var(--radius);
    border: var(--border) solid var(--border-color);
    padding: 1em;
    /* backdrop-filter: blur(12px); */
    
    /* Force GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

#menu:not(.open)::before,
#menu:not(.open)::after,
#menu:not(.open) .glow {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
}


#menu.open {
    
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    transform: translateZ(0) scale(1);
    
    &::before,
    &::after,
    & .glow,
    & .shine {
        animation: glow 2s var(--ease) both;
    }
    & .shine {
        animation-delay: 0s;
        animation-duration: 4s;
    }
    & .glow {
        animation-delay: 0.2s;
    }
    & .glow-bright {
        animation-delay: 0.1s;
        animation-duration: 1.5s;
    }
    & .shine-bottom {
        animation-delay: 0.1s;
        animation-duration: 1.8s;
    }
    & .glow-bottom {
        animation-delay: 0.3s;
    }
    & .glow-bright.glow-bottom {
        animation-delay: 0.3s;
        animation-duration: 1.1s;
    }
}

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

#menu .shine,
#menu .shine::before,
#menu .shine::after {
    
    /* shine is the bright white-ish inner pixel-wide lights */
    
    pointer-events: none;
    
    border-radius: 0;
    border-top-right-radius: inherit;
    border-bottom-left-radius: inherit;
    border: 1px solid transparent;
    
    width: 75%;
    height: auto;
    min-height: 0px;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    right: calc(var(--border) * -1);
    top: calc(var(--border) * -1);
    left: auto;
    
    z-index: 1;
    
    --start: 12%;
    background: conic-gradient(
        from var(--conic, -45deg) at center in oklch,
        transparent var(--start,0%), hsl( var(--hue), var(--sat,80%), var(--lit,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;
    
    display: var(--hide-on-light);
    
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: opacity;
}

#menu .shine::before,
#menu .shine::after {
    content: "";
    width: auto;
    inset: -2px;
    mask: none;
}
    
#menu .shine::after { 
    z-index: 2;
    --start: 17%;
    --end: 33%;
    background: conic-gradient(
        from var(--conic, -45deg) at center in oklch,
        transparent var(--start,0%), hsl( var(--hue), var(--sat,80%), var(--lit,85%)), transparent var(--end,50%) 
    );
    
}

#menu .shine-bottom {
    top: auto;
    bottom: calc(var(--border) * -1);
    left: calc(var(--border) * -1);
    right: auto;
}

#menu .glow {
    
    /* glow is the sparse colour bleed with noise */
    
    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;
    min-height: 0px;
    aspect-ratio: 1;
    display: block;
    display: var(--hide-on-light);
    position: absolute;
    left: auto;
    bottom: auto;
    
    mask-size: 29%;
    
    opacity: 1;
    /* Simplified filter - removed blur for performance */
    filter: saturate(1.25) brightness(0.5) blur(5px);
    mix-blend-mode: plus-lighter;
    z-index: 3;
    
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: opacity;
    
    &.glow-bottom {
        inset: calc(var(--radius) * -2);
        top: auto;
        right: auto;
    }
    
    &::before, 
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        border: inherit;
        border-radius: inherit;
        background: conic-gradient(
            from var(--conic, -45deg) at center in oklch,
            transparent var(--start,0%), hsl( var(--hue), var(--sat,95%), var(--lit,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);
        
        /* GPU acceleration */
        transform: translateZ(0);
    }
    
    &::after {
        --lit: 70%;
        --sat: 100%;
        --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;
    }

}

#menu .glow-bright {
    
    /* glow-bright is a sharper colour outline to accentuate the shine */
    
    --lit: 80%;
    --sat: 100%;
    --start: 13%;
    --end: 37%;
    
    border-width: 5px;
    border-radius: calc(var(--radius) + 2px);
    inset: -7px;
    left: auto;
    /* Reduced blur significantly */
    /* filter: blur(1px) brightness(0.66); */
    filter: brightness(0.66);
    
    &::after {
        content: none;
    }
    
    &.glow-bottom {
        inset: -7px;
        right: auto;
        top: auto;
    }
}

#menu .inner,
#menu section {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

#menu .inner {
    font-size: 0.875rem;
}

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

#menu input {
    --tint2: hsl(var(--hue2) 50% 90% / 0.1);
    color: hsl(0 0 100% / 0.5);
    font-family: 'Asap', sans-serif;
    font-weight: 300;
    box-shadow: 0 0 0 1px transparent;
    border: 1px solid hsl(var(--hue2) 13% 18.5% / 0.5);
    background: linear-gradient(to bottom, hsl(var(--hue1) 20% 20% / 0.1) 50%, hsl(var(--hue1) 50% 50% / 0.8) 180%);
    background-size: 100% 300%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    border-radius: calc(var(--radius) * 0.33333);
    padding-left: 2.33em;
    transition: all 0.3s var(--ease);
    
    /* GPU acceleration */
    transform: translateZ(0);
    
    &:focus {
        border-color: hsl(var(--hue1) 20% 70% / 0.5);
        background-position: 0% 50%;
        color: hsl(var(--hue1) 20% 80% / 1);
    }
    
    &::placeholder {
        color: hsl(0 0 100% / 1);
    }
}

#menu label {
    display: grid;
    grid-template: 1fr/1fr;
    margin-bottom: 1em;
    width: 100%;
    & > * {
        grid-area: 1/1;
        align-self: center;
    }
    
    & svg {
        margin-left: 0.5em;
        opacity: 0.5;
    }
}

#menu .search svg {
    &:has(+ input:focus) {
        stroke: hsl(var(--hue1) 60% 70% / 1);
    }
}

#menu header {
    font-size: 0.75rem;
    font-weight: 300;
    padding: 0 0.66em;
}

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

#menu li {
    --item-hue: var(--hue2);
    position: relative;
    padding: 0.66em;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 0.5em;
    border-radius: calc(var(--radius) * 0.33333);
    border: 1px solid transparent;
    transition: all 0.3s ease-in, opacity 0.3s ease-in;
    background: 
        linear-gradient(
            90deg  in oklch, 
            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;
    
    /* GPU acceleration */
    transform: translateZ(0);
    will-change: opacity;
    
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: inherit;
        background: 
            linear-gradient(
                90deg in oklch, 
                hsl(var(--item-hue) 15% 16% / 0),
                hsl(var(--item-hue) 40% 24% / 0) 20% 32%, 
                hsl(var(--item-hue) 2% 12% / 0) 95%
            ) border-box;
        mask: 
            linear-gradient(transparent), 
            linear-gradient(to right, black, transparent);
        mask-repeat: no-repeat;
        mask-clip: padding-box, border-box;
        mask-composite: subtract;
        opacity: 0;
        transition: opacity 0.3s ease-in;
        
        /* GPU acceleration */
        transform: translateZ(0);
    }
        
    &:hover,
    &.selected,
    &:focus {
        transition: all 0.1s ease-out;
        color: white;
        outline: none;
        background: 
            linear-gradient(
                90deg  in oklch, 
                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;
    }
    
    &:hover::after,
    &.selected::after,
    &:focus::after {
        opacity: 0.5;
        transition: opacity 0.1s ease-out;
        background: 
            linear-gradient(
                90deg in oklch, 
                hsl(var(--item-hue) 15% 16% / 0.5),
                hsl(var(--item-hue) 40% 24% / 0.5) 20% 32%, 
                hsl(var(--item-hue) 2% 12% / 0) 95%
            ) border-box;
    }
    
    &.selected,
    &.selected::after {
        animation: flash 0.75s ease-out 1 forwards;
    }
}

#menu section:nth-of-type(1) li {
    --item-hue: var(--hue1);
}

/* other ui stuff */

#app {
    padding: 2svw;
}

#app > header {
    display: flex;
    gap: 0.5em;
    flex-direction: column;
}

#app > header h1,
#app > header p {
    margin: 0;
    color: color-mix(in oklab, var(--fg) 70%, hsl(var(--hue1) 50% 50%));
}

#app > header p {
    color: color-mix(in oklab, var(--fg) 40%, hsl(var(--hue2) 50% 50%));
}

#app > footer {
    align-self: end;
    max-width: calc(96svw - 200px);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

#app > footer h2 {
    width: 100%;
    font-size: 1em;
}

#app > footer [type=range] {
    --tint: hsl( var(--hue2) 66% 50% );
    --tint2: hsl( var(--hue1) 66% 50% );
    width: 320px;
    margin: 0;
}
#app > footer #h1 {
    --tint: hsl( var(--hue1) 66% 50% );
    --tint2: hsl( var(--hue1) 66% 50% );
    --hue: var(--hue1);
    width: 320px;
}
#app > footer #h2 {
    --tint: hsl( var(--hue2) 66% 50% );
    --tint2: hsl( var(--hue2) 66% 50% );
    --hue: var(--hue2);
    width: 320px;
}

@media screen and (max-width: 480px) {
    #app > footer {
        gap: 1em;
    }
}

#app input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0 1px 2px 1px hsl(var(--hue) 66% 20% / 0.5);
}

#app input[type="range"]::-moz-range-thumb {
    box-shadow: 0 1px 2px 1px hsl(var(--hue) 66% 20% / 0.5);
}

#app input[type="range"]::-ms-thumb {
    box-shadow: 0 1px 2px 1px hsl(var(--hue) 66% 20% / 0.5);
}

/*#menu svg {
    fill: none;
    stroke-width: 1;
    height: 20px;
}*/

footer h2 button {
    font-family: Amaranth, sans-serif;
    font-style: italic;
    text-transform: none;
    display: inline-flex;
    padding: 0.33em 0.75em;
    margin-inline: 0.33em;
}


@keyframes glow {
    0% {
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    12% {
        opacity: 0.7;
    }
    16% {
        opacity: 0.3;
        animation-timing-function: var(--ease);
    }
    100% {
        /* opacity: 1; */
        opacity: .5;
        animation-timing-function: var(--ease);
    }
}

@keyframes flash {
    0% {
        opacity: 0;
    }
    7% {
        opacity: 0.5;
    }
    14% {
        opacity: 0;
    }
    21%, 100% {
        opacity: 1;
    }
}