Add entering transition on Shop and fix some styling

- Center intro title vertically
- Cart item styling tweaks
- Add cart button quantity label inside of button so it's clickable

src/routes/shop/__layout.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+    import { browser } from '$app/env'
     import { onMount } from 'svelte'
     import { shopLocations, cartOpen, cartNotifications } from '$utils/stores/shop'
+    import anime from 'animejs'
+    import type { AnimeTimelineInstance } from 'animejs'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -31,7 +34,45 @@
     })
 
 
-    onMount(async () => {
+    /**
+     * Transition: Anime timeline
+     */
+     let timeline: AnimeTimelineInstance
+
+    if (browser) {
+        requestAnimationFrame(() => {
+            timeline = anime.timeline({
+                duration: 1600,
+                easing: 'easeOutQuart',
+                autoplay: false,
+            })
+
+            // Hero image
+            timeline.add({
+                targets: '.shop-page__background',
+                scale: [1.06, 1],
+                opacity: [0, 1],
+                duration: 2400,
+            }, 400)
+
+            // Intro top elements
+            timeline.add({
+                targets: '.shop-page__intro .top > *',
+                translateY: [-100, 0],
+                delay: anime.stagger(250),
+            }, 400)
+
+            // Intro navbar
+            timeline.add({
+                targets: '.shop-page__nav .container > *',
+                translateY: [100, 0],
+                delay: anime.stagger(250),
+            }, 700)
+        })
+    }
+
+
+    onMount(() => {
         // Reveal the nav past the Intro
         navObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
@@ -43,6 +84,11 @@
         })
         navObserver.observe(introEl)
 
+        // Transition in
+        requestAnimationFrame(() => {
+            timeline.play()
+        })
+
 
         // Destroy
         return () => {
@@ -96,6 +142,7 @@
         </nav>
 
         <Image
+            class="shop-page__background"
             id={shop.page_heroimage.id}
             alt="photo"
             sizeKey="hero"