Move the food-icon backdrop onto the empty basket/orders cards and animate it

Confine MenuBackdrop to whatever card renders it instead of the whole
viewport: it's now position: absolute inset:0 within its container
(previously position: fixed, spanning the page) with a gentle floating
animation per icon (staggered delay, respects prefers-reduced-motion).
Wired it into the empty basket and empty orders states instead of the
menu list page.

Also gives .empty on both pages position: relative + z-index: 0 so it
forms its own stacking context — without an explicit z-index, the
backdrop's z-index: -1 child was escaping to the document root and
painting either fully behind everything or (on the basket page, where
motion.div meant `.empty` never picked up a context on its own) above
the card's own text, depending on the surrounding markup.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ordering/MenuBackdrop.module.scss

@@ -1,7 +1,17 @@
 @use '../../styles/variables' as *;
 
+@keyframes menu-backdrop-float {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--icon-rotate, 0deg));
+  }
+  50% {
+    transform: translateY(-6px) rotate(calc(var(--icon-rotate, 0deg) + 6deg));
+  }
+}
+
 .backdrop {
-  position: fixed;
+  position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
@@ -11,7 +21,12 @@
 .icon {
   position: absolute;
   color: $color-primary;
-  opacity: 0.08;
+  opacity: 0.16;
+  transform: rotate(var(--icon-rotate, 0deg));
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: menu-backdrop-float 5s ease-in-out infinite;
+  }
 
   svg {
     width: 100%;

src/components/ordering/MenuBackdrop.tsx

@@ -1,3 +1,5 @@
+import type { CSSProperties } from 'react'
+
 import styles from './MenuBackdrop.module.scss'
 
 const PizzaIcon = () => (
@@ -47,20 +49,17 @@ const ICONS = [PizzaIcon, BurgerIcon, FriesIcon]
 
 // Fixed, hand-placed positions rather than random ones — random values would
 // differ between the server-rendered and first client-rendered HTML and
-// trigger a hydration mismatch.
+// trigger a hydration mismatch. Positioned as percentages of the containing
+// card, not the viewport, so this only ever covers whatever box renders it.
 const PLACEMENTS = [
-  { top: '6%', left: '6%', size: 72, rotate: -14 },
-  { top: '14%', left: '86%', size: 56, rotate: 20 },
-  { top: '30%', left: '46%', size: 64, rotate: -6 },
-  { top: '46%', left: '10%', size: 52, rotate: 10 },
-  { top: '58%', left: '90%', size: 68, rotate: -18 },
-  { top: '72%', left: '30%', size: 58, rotate: 14 },
-  { top: '82%', left: '68%', size: 60, rotate: -8 },
-  { top: '4%', left: '40%', size: 44, rotate: 8 },
-  { top: '38%', left: '78%', size: 46, rotate: -22 },
-  { top: '64%', left: '52%', size: 40, rotate: 16 },
-  { top: '90%', left: '12%', size: 50, rotate: -10 },
-  { top: '20%', left: '20%', size: 42, rotate: 24 },
+  { top: '10%', left: '8%', size: 32, rotate: -14, delay: 0 },
+  { top: '14%', left: '82%', size: 26, rotate: 18, delay: 0.5 },
+  { top: '40%', left: '20%', size: 24, rotate: 8, delay: 1.1 },
+  { top: '55%', left: '80%', size: 30, rotate: -10, delay: 0.3 },
+  { top: '78%', left: '14%', size: 26, rotate: 16, delay: 1.6 },
+  { top: '82%', left: '58%', size: 22, rotate: -20, delay: 0.8 },
+  { top: '22%', left: '48%', size: 20, rotate: 6, delay: 1.3 },
+  { top: '62%', left: '44%', size: 24, rotate: -6, delay: 0.2 },
 ]
 
 export const MenuBackdrop = () => (
@@ -71,13 +70,16 @@ export const MenuBackdrop = () => (
         <span
           key={index}
           className={styles.icon}
-          style={{
-            top: placement.top,
-            left: placement.left,
-            width: placement.size,
-            height: placement.size,
-            transform: `rotate(${placement.rotate}deg)`,
-          }}
+          style={
+            {
+              top: placement.top,
+              left: placement.left,
+              width: placement.size,
+              height: placement.size,
+              animationDelay: `${placement.delay}s`,
+              '--icon-rotate': `${placement.rotate}deg`,
+            } as CSSProperties
+          }
         >
           <Icon />
         </span>