/* Finite, composited motion. Both menus remain visible during the handoff. */
.menu-motion-surface{will-change:transform,opacity;transform-origin:50% 48%;backface-visibility:hidden}
#menuTransitionFX{position:fixed;inset:0;overflow:hidden;z-index:115;pointer-events:none;contain:strict;--transition-accent:#8eeaff}
#menuTransitionFX[hidden]{display:none}
.transition-facet{position:absolute;top:-25%;left:38%;width:12vw;height:150%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--transition-accent) 24%,transparent),transparent);border-right:1px solid color-mix(in srgb,var(--transition-accent) 65%,transparent);opacity:0}
.transition-facet:nth-child(2){left:48%;width:4vw}
.transition-facet:nth-child(3){left:60%;width:20vw;border-right:0;border-left:1px solid color-mix(in srgb,var(--transition-accent) 45%,transparent)}
.transition-ring{position:absolute;top:50%;left:50%;width:min(52vw,65vh);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--transition-accent) 55%,transparent);border-radius:24%;box-shadow:0 0 32px color-mix(in srgb,var(--transition-accent) 12%,transparent),inset 0 0 25px color-mix(in srgb,var(--transition-accent) 8%,transparent);opacity:0}
[data-route="modes-horde"] .transition-ring{border-radius:8%;border-width:2px}
[data-route="modes-battle"] .transition-ring{border-radius:50%}
[data-route^="panel-"] .transition-ring,[data-route^="close-"] .transition-ring{display:none}
.menu-motion-ghost{user-select:none;overflow:hidden!important}
@media(prefers-reduced-motion:reduce){#menuTransitionFX{display:none!important}.menu-motion-surface{will-change:auto}}