Fix Shop issues

- Move ButtonCart from nav to position it on top right
- ButtonCart amount indicator position (center left => top left)
- Bring back updating label when changing cart (+ other transitions)
- Make ShopHeader picture gradient a bit bigger

src/components/organisms/Cart.svelte

@@ -150,7 +150,7 @@
                     />
                 {/each}
             {:else}
-                <div class="cart__empty shadow-small">
+                <div class="cart__empty shadow-small" transition:fade={{ duration: 600 }}>
                     <div class="icon">
                         <Icon icon="bag" label="Shopping bag icon" />
                     </div>
@@ -159,7 +159,10 @@
             {/if}
 
             {#if !$cartData || $cartIsUpdating}
-                <div class="cart__update" transition:fade={{ duration: 400 }}>
+                <div class="cart__update"
+                    in:fly={{ y: -4, duration: 600, easing: quartOut }}
+                    out:fly={{ y: 4, duration: 600, easing: quartOut }}
+                >
                     <p>Updating…</p>
                 </div>
             {/if}

src/components/organisms/ShopHeader.svelte

@@ -53,7 +53,7 @@
 
         // Hero title
         timeline.add({
-            targets: '.shop-page__intro h1',
+            targets: '.shop-page__title h1',
             translateY: [32, 0],
             opacity: [0, 1],
         }, 500)
@@ -67,8 +67,10 @@
 
         // Intro navbar
         timeline.add({
-            targets: '.shop-page__nav .container > *',
+            targets: '.shop-page__nav .container > *, .shop-page__intro .button-cart',
+            opacity: [0, 1],
             translateY: [100, 0],
+            translateZ: 0,
             delay: anime.stagger(250),
         }, 700)
 
@@ -93,7 +95,9 @@
         </a>
     </div>
 
-    <h1>Shop</h1>
+    <div class="shop-page__title">
+        <h1>Shop</h1>
+    </div>
 
     <nav class="shop-page__nav">
         <div class="container">
@@ -109,11 +113,11 @@
                     {/each}
                 </ul>
             </nav>
-
-            <ButtonCart />
         </div>
     </nav>
 
+    <ButtonCart />
+
     <Image
         class="shop-page__background"
         id={shop.page_heroimage.id}