fix(ui): improve GSAP page transition smoothness

src/components/common/PageTransition.scss

@@ -14,6 +14,8 @@
     gap: $spacing-lg;
     min-height: 0;
     flex: 1;
+    backface-visibility: hidden;
+    transform: translateZ(0);
 
     // During animation, exit layer uses absolute positioning
     &--exit {
@@ -22,17 +24,15 @@
       z-index: 1;
       overflow: hidden;
       pointer-events: none;
+      will-change: transform, opacity;
     }
   }
 
   &--animating &__layer {
     will-change: transform, opacity;
-    backface-visibility: hidden;
-    transform-style: preserve-3d;
   }
 
-  // When both layers exist, current layer also needs positioning
+  &--animating &__layer:not(.page-transition__layer--exit) {
-  &--animating &__layer:not(&__layer--exit) {
     position: relative;
     z-index: 0;
   }

src/components/common/PageTransition.tsx

@@ -71,10 +71,6 @@ export function PageTransition({
           ? 'forward'
           : 'backward';
 
-    let cancelled = false;
-
-    queueMicrotask(() => {
-      if (cancelled) return;
     setTransitionDirection(nextDirection);
     setLayers((prev) => {
       const prevCurrent = prev[prev.length - 1];
@@ -86,11 +82,6 @@ export function PageTransition({
       ];
     });
     setIsAnimating(true);
-    });
-
-    return () => {
-      cancelled = true;
-    };
   }, [
     isAnimating,
     location,
@@ -152,8 +143,12 @@ export function PageTransition({
         opacity: 1,
         duration: TRANSITION_DURATION,
         ease: 'power2.out', // smooth settle
-        clearProps: 'transform,opacity',
         force3D: true,
+        onComplete: () => {
+          if (currentLayerRef.current) {
+            gsap.set(currentLayerRef.current, { clearProps: 'transform,opacity' });
+          }
+        },
       },
       ENTER_DELAY
     );