refactor: rethink ProcessStep transition + use tick in transitions

apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte

@@ -3,18 +3,18 @@
 </style>
 
 <script lang="ts">
+    import { scale } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
     import { scaleFade } from '$animations/transitions'
     // Components
     import Image from '$components/atoms/Image.svelte'
     import { getAssetUrlKey } from '$utils/api'
 
     let {
-        index,
         text,
         image,
         video,
     }: {
-        index: number
         text: string
         image?: any
         video?: any
@@ -25,9 +25,8 @@
 
 <div
     class="step grid"
-    style:--index={index}
     in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
-    out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
+    out:scale={{ start: 0.9, duration: 750, easing: quartOut }}
 >
     {#if image || video}
         <div class="media">