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/orders/OrdersListView.module.scss

@@ -22,6 +22,8 @@
 }
 
 .empty {
+  position: relative;
+  z-index: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -31,6 +33,7 @@
   border: 1px dashed $color-border;
   border-radius: $radius;
   background: $color-surface;
+  overflow: hidden;
 
   @media (prefers-reduced-motion: no-preference) {
     animation: empty-state-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both;