Fix blurry mobile menu: use GPU-friendly opacity+transform instead of max-height transition

src/components/mobile-nav.tsx

@@ -62,7 +62,11 @@ export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Clo
       <div
         id="mobile-menu"
         role="menu"
-        className={`${open ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"} overflow-y-auto transition-all duration-300 ease-in-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
+        className={`${
+          open
+            ? "max-h-[80vh] opacity-100 translate-y-0"
+            : "max-h-0 opacity-0 translate-y-[-6px] pointer-events-none md:pointer-events-auto"
+        } overflow-y-auto transition-[opacity,transform] duration-200 ease-out md:!max-h-none md:!opacity-100 md:!translate-y-0 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
         style={{ backgroundColor: "var(--color-navbar)" }}
       >
         <div