Add 3D parallax tilt effect to title cards on hover

Spring-animated 3D tilt, parallax image shift, and glare reflection
follow the cursor using motion values for zero-rerender performance.
Respects prefers-reduced-motion. Carousel overflow adjusted to prevent
clipping of the tilt effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/explore/filterable-title-row.tsx

@@ -191,9 +191,9 @@ function FilterableTitleRowInner({
               containScroll: "trimSnaps",
             }}
             plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
-            className="-mx-4 sm:-mx-0"
+            className="-mx-6 sm:-mx-2 carousel-tilt"
           >
-            <CarouselContent className="px-4 sm:px-0">
+            <CarouselContent className="px-6 sm:px-2">
               {items.slice(0, 20).map((item) => (
                 <CarouselItem
                   key={`${item.type}-${item.tmdbId}`}

app/(pages)/explore/title-row.tsx

@@ -64,9 +64,9 @@ export function TitleRow({
         <Carousel
           opts={{ align: "start", dragFree: true, containScroll: "trimSnaps" }}
           plugins={[WheelGesturesPlugin({ forceWheelAxis: "x" })]}
-          className="-mx-4 sm:-mx-0"
+          className="-mx-6 sm:-mx-2 carousel-tilt"
         >
-          <CarouselContent className="px-4 sm:px-0">
+          <CarouselContent className="px-6 sm:px-2">
             {items.map((item) => (
               <CarouselItem
                 key={`${item.type}-${item.tmdbId}`}

app/globals.css

@@ -142,4 +142,10 @@
   .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
+
+  /* Allow tilt/scale effects to overflow carousel viewport vertically */
+  .carousel-tilt > [data-slot="carousel-content"] {
+    overflow-x: clip;
+    overflow-y: visible;
+  }
 }