/* Menu-only night-sky polish. Kept outside the glass surfaces so backdrop-filter can still sample the photo. */
.menu-starfield{
    position:fixed;
    z-index:0;
    top:0;
    left:50%;
    width:min(100vw,560px);
    height:110vh;
    height:110lvh;
    transform:translateX(-50%);
    overflow:hidden;
    pointer-events:none;
    background:radial-gradient(ellipse at 72% 11%,rgba(191,219,255,.08) 0%,rgba(191,219,255,0) 31%),
        radial-gradient(ellipse at 24% 28%,rgba(255,245,221,.045) 0%,rgba(255,245,221,0) 27%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 24%,rgba(0,0,0,.88) 27%,rgba(0,0,0,.35) 30%,transparent 33%);
    mask-image:linear-gradient(180deg,#000 0%,#000 24%,rgba(0,0,0,.88) 27%,rgba(0,0,0,.35) 30%,transparent 33%)
}
.menu-star{
    position:absolute;
    left:var(--star-x);
    top:var(--star-y);
    width:var(--star-size);
    height:var(--star-size);
    border-radius:var(--radius-round);
    background:rgba(255,255,255,.96);
    box-shadow:0 0 5px rgba(222,235,255,.58);
    opacity:.22;
    animation:MenuStarTwinkle var(--star-duration) ease-in-out var(--star-delay) infinite alternate;
    will-change:opacity,transform
}
.menu-star--bright{
    background:#fffdf4;
    box-shadow:0 0 4px rgba(255,255,255,.92),0 0 10px rgba(208,228,255,.72)
}
.menu-shooting-star{
    position:absolute;
    left:8%;
    top:13%;
    width:92px;
    height:1px;
    border-radius:var(--radius-pill);
    opacity:0;
    background:linear-gradient(90deg,transparent 0%,rgba(224,237,255,.08) 20%,rgba(255,255,255,.92) 100%);
    box-shadow:16px 0 8px rgba(229,240,255,.32);
    transform:translate3d(-110px,-52px,0) rotate(24deg);
    transform-origin:right center;
    animation:MenuShootingStar 13s cubic-bezier(.2,.72,.2,1) 4.2s infinite;
    will-change:opacity,transform
}
@keyframes MenuStarTwinkle{
    0%{opacity:.12;transform:translate3d(0,0,0) scale(.72)}
    42%{opacity:.92;transform:translate3d(var(--star-drift-x),var(--star-drift-y),0) scale(1.18)}
    100%{opacity:.28;transform:translate3d(0,0,0) scale(.86)}
}
@keyframes MenuShootingStar{
    0%,72%{opacity:0;transform:translate3d(-110px,-52px,0) rotate(24deg)}
    73%{opacity:0}
    75%{opacity:.92}
    81%{opacity:0;transform:translate3d(430px,205px,0) rotate(24deg)}
    100%{opacity:0;transform:translate3d(430px,205px,0) rotate(24deg)}
}

/* Keep the logo/footer block anchored to the bottom whenever the menu has spare vertical space. */
body[data-page="menu"] .drawer-menu-logo{
    margin-top:auto;
    margin-bottom:0;
    padding-top:42px;
    align-items:flex-end;
    flex:0 0 auto
}
body[data-page="menu"] .drawer-menu-logo .app-brand-logo{margin:0 0 var(--space-4)}
body[data-page="menu"] .drawer-footer--compact{margin-top:0;padding-top:0}

@media(min-width:700px){
    .menu-starfield{
        clip-path:inset(28px 0 calc(10vh + 28px) 0 round 34px);
        clip-path:inset(28px 0 calc(10lvh + 28px) 0 round 34px)
    }
}
@media(prefers-reduced-motion:reduce){
    .menu-star{animation:none;opacity:.52;transform:none}
    .menu-shooting-star{display:none}
}