fix: various issues to reduce effect_update_depth_exceeded

+ use `scroll` from Motion One for parallax

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -5,7 +5,7 @@
 <script lang="ts">
     import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
     import { page, navigating } from '$app/stores'
-    import { stagger, timeline } from 'motion'
+    import { scroll, stagger, timeline } from 'motion'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime'
     import { quartOut } from '$animations/easings'
@@ -13,6 +13,7 @@
     import { DELAY } from '$utils/constants'
     import { seenLocations } from '$utils/stores'
     import { photoFields } from '$utils/api'
+    import { lerp } from 'utils/math'
     import { padZero } from 'utils/string'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -34,14 +35,13 @@
 
     dayjs.extend(relativeTime)
 
-    let introEl = $state<HTMLElement>()
+    let introEl: HTMLElement
     let photosListEl = $state<HTMLElement>()
-    let scrollY = $state<number>()
     let observerPhotos: IntersectionObserver
     let mutationPhotos: MutationObserver
     let currentPage = $state(1)
     let currentPhotosAmount = $derived(photos.length)
-    let heroOffsetY = $state(0)
+    let heroParallax = $state(0)
 
     const ended = $derived(currentPhotosAmount === totalPhotos)
     const latestPhoto = $derived(photos[0])
@@ -50,23 +50,7 @@
     /**
      * Load photos
      */
-    /** Load more photos from CTA */
-    const loadMorePhotos = async () => {
-        // Append more photos from API
-        const newPhotos: any = await loadPhotos(currentPage + 1)
-
-        if (newPhotos) {
-            photos = [...photos, ...newPhotos]
-
-            // Define actions if the number of new photos is the expected ones
-            if (newPhotos.length === Number(PUBLIC_LIST_INCREMENT)) {
-                // Increment the current page
-                currentPage++
-            }
-        }
-    }
-
-    // Load photos helper
+    /** Load photos helper */
     const loadPhotos = async (page?: number) => {
         const res = await fetch('/api/data', {
             method: 'POST',
@@ -94,15 +78,21 @@
         }
     }
 
+    /** Load more photos from CTA */
+    const loadMorePhotos = async () => {
+        // Append more photos from API
+        const newPhotos: any[] = await loadPhotos(currentPage + 1)
 
-    /**
-     * Add parallax on illustration when scrolling
-     */
-    $effect(() => {
-        if (scrollY && scrollY < introEl.offsetHeight) {
-            heroOffsetY = scrollY * 0.1
+        if (newPhotos) {
+            photos = [...photos, ...newPhotos]
+
+            // Define actions if the number of new photos is the expected ones
+            if (newPhotos.length === Number(PUBLIC_LIST_INCREMENT)) {
+                // Increment the current page
+                currentPage++
+            }
         }
-    })
+    }
 
 
     $effect(() => {
@@ -147,6 +137,15 @@
         }
 
 
+        /**
+         * Add parallax on illustration when scrolling
+         */
+        scroll(({ y }) => heroParallax = lerp(-15, 10, y.progress), {
+            target: introEl,
+            offset: ['start end', 'end start'],
+        })
+
+
         /**
          * Animations
          */
@@ -205,8 +204,6 @@
     })
 </script>
 
-<svelte:window bind:scrollY />
-
 <Metas
     title="Houses Of {location.name}"
     description="Discover {totalPhotos} beautiful homes from {location.name}, {location.country.name}"
@@ -215,7 +212,7 @@
 
 
 <main class="location-page">
-    <section class="location-page__intro grid" bind:this={introEl}>
+    <section bind:this={introEl} class="location-page__intro grid">
         <h1 class="title" class:is-short={location.name.length <= 4}>
             <span class="housesof mask">
                 <strong class="word">Houses</strong>
@@ -269,7 +266,7 @@
         </div>
 
         {#if location?.hero?.id}
-            <picture class="location-page__hero" style:--parallax-y="{heroOffsetY}px">
+            <picture class="location-page__hero" style:--parallax="{heroParallax}%">
                 <source media="(min-width: 1200px)" srcset={getAssetUrlKey(location.hero.id, 'hero-large')}>
                 <source media="(min-width: 768px)" srcset={getAssetUrlKey(location.hero.id, 'hero-small')}>
                 <img