perf(explore): the mobile drawer scored CLS 0.726 every time it opened

Two panels slide in the mobile nav. The main one animates `transform`. Its
sibling animated `left` — which relayouts the nav subtree every frame AND
registers as layout shift, because moving an element's layout box is exactly
what CLS measures. Measured under a 4x CPU throttle at 390x844: CLS 0.726 with
`left`, 0 with `transform`. Google calls anything above 0.25 "poor", so the
menu was scoring nearly 3x poor on a tap.

The rewrite is pixel-identical, not an approximation. The element is absolute
+ w-full inside a containing block with no padding, so `left: 0` is its static
position and translateX(100% + 24px) reproduces the old offset exactly. It now
mirrors its sibling: same distance, same duration, same property.

Motion also moves out of this repo. The local `skeleton-shimmer` keyframe is
retired in favour of the design system's loading state — per-element
background-position shimmer measures 33.6fps at 1460 concurrent skeletons and
13.8fps at 3000 under the same throttle, while skeletons that hold still
measure 120fps at every count. Reasoning and full numbers are in section 6c of
@luxfi/ui/tokens.css.

Also wraps one 174-char className. It was already over the 160 limit; no
staged change had made the linter look at this file until now.

Co-authored-by: Hanzo Dev <[email protected]>

nextjs/global.css

@@ -222,15 +222,19 @@
   --shadow-action-bar: var(--shadow-action-bar);
   --shadow-popover: var(--shadow-popover);
   --shadow-drawer: var(--shadow-drawer);
-
-  /* --- Animations --- */
-  --animate-skeleton-shimmer: skeleton-shimmer 1.5s ease-in-out infinite;
 }
 
-@keyframes skeleton-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
+/*
+ * Motion lives in @luxfi/ui/tokens.css (pulled in above via styles/tokens.css):
+ * durations, curves, enter/exit, hover/press, the loading state, and one global
+ * prefers-reduced-motion rule. Add a move to the design system, never here.
+ *
+ * What this replaced: a local `skeleton-shimmer` that animated
+ * background-position per skeleton. Measured under a 4x CPU throttle that is
+ * 33.6fps at 1460 concurrent skeletons and 13.8fps at 3000. Skeletons now hold
+ * still (120fps at any count) and <LoadingBar/> carries the motion — one
+ * animated element for the page instead of one per skeleton.
+ */
 
 /*
  * Dark mode: use .dark class (next-themes)

ui/snippets/navigation/mobile/NavigationMobile.tsx

@@ -90,8 +90,14 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
         key="sub"
         className="w-full mt-6 absolute top-0"
         style={{
-          left: isOpen ? 0 : 'calc(100% + 24px)',
-          transition: `left ${ ANIMATION_DURATION }ms ease-in-out`,
+          // Mirrors the main panel above: same distance, same duration, but on
+          // the compositor. This used to animate `left`, which relayouts the
+          // whole nav subtree every frame — the one place a phone would drop
+          // frames on a menu tap. `left: 0` is this element's static position
+          // (absolute + w-full, no padding on the containing block), so
+          // translateX(100% + 24px) is pixel-identical to the old offset.
+          transform: isOpen ? 'translateX(0)' : 'translateX(calc(100% + 24px))',
+          transition: `transform ${ ANIMATION_DURATION }ms ease-in-out`,
         }}
       >
         <div className="flex items-center px-2 py-2.5 w-full h-[50px] cursor-pointer mb-1" onClick={ onGroupItemClose }>
@@ -103,7 +109,8 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
             (item, index) => Array.isArray(item) ? (
               <ul
                 key={ index }
-                className="w-full [&:not(:last-child)]:mb-2 [&:not(:last-child)]:pb-2 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-[var(--color-border-divider)]"
+                className={ 'w-full [&:not(:last-child)]:mb-2 [&:not(:last-child)]:pb-2 ' +
+                  '[&:not(:last-child)]:border-b [&:not(:last-child)]:border-[var(--color-border-divider)]' }
               >
                 { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
               </ul>