Animate the empty orders state in and make its CTA more inviting

Fades/slides the empty state in on mount, gives the icon a tinted
circle badge instead of a bare stroke icon, and gives the "Browse the
menu" button a shadow, hover lift, and a shifting arrow instead of a
flat opacity hover.

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

src/components/orders/OrdersListView.module.scss

@@ -10,6 +10,17 @@
   margin: 0 0 $space-4;
 }
 
+@keyframes empty-state-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .empty {
   display: flex;
   flex-direction: column;
@@ -21,11 +32,25 @@
   border-radius: $radius;
   background: $color-surface;
 
+  @media (prefers-reduced-motion: no-preference) {
+    animation: empty-state-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both;
+  }
+}
+
+.emptyIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: $space-2;
+  border-radius: 999px;
+  background: color-mix(in srgb, $color-primary 12%, transparent);
+
   svg {
-    width: 2.5rem;
+    width: 1.75rem;
-    height: 2.5rem;
+    height: 1.75rem;
-    margin-bottom: $space-2;
+    color: $color-primary;
-    color: $color-text-muted;
   }
 }
 
@@ -41,17 +66,37 @@
 }
 
 .emptyCta {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-1;
   padding: $space-2 $space-4;
   border-radius: $radius;
   background: $color-primary;
   color: $color-primary-contrast;
   font-weight: 600;
   text-decoration: none;
-  transition: opacity 0.15s ease;
+  box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
 
   &:hover {
-    opacity: 0.9;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px color-mix(in srgb, $color-primary 45%, transparent);
   }
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
+  }
+}
+
+.emptyCtaArrow {
+  transition: transform 0.15s ease;
+}
+
+.emptyCta:hover .emptyCtaArrow {
+  transform: translateX(3px);
 }
 
 .orders {

src/components/orders/OrdersListView.tsx

@@ -64,13 +64,18 @@ export const OrdersListView = ({ orders }: OrdersListViewProps) => {
       <h1 className={styles.heading}>Your orders</h1>
       {displayedOrders.length === 0 ? (
         <div className={styles.empty}>
-          <OrdersIcon />
+          <div className={styles.emptyIcon}>
+            <OrdersIcon />
+          </div>
           <p className={styles.emptyTitle}>No orders yet</p>
           <p className={styles.emptyText}>
             Your placed orders will show up here.
           </p>
           <Link to="/" className={styles.emptyCta}>
             Browse the menu
+            <span className={styles.emptyCtaArrow} aria-hidden="true">
+              →
+            </span>
           </Link>
         </div>
       ) : (