fix(ecommerce): video 400 error — use OSS URLs instead of data URLs for video generation

The renderScene function was passing local data URLs (data:image/png;base64,...)
as imageUrl and referenceUrls to createVideoTask, which the /api/ai/video endpoint
rejects with 400 Bad Request. The planning phase already uploads images to OSS
but the resulting URLs were not returned to the component.

- Add imageUrls field to EcommerceVideoPlanResult
- Return OSS imageUrls from runVideoPlan alongside existing plan data
- Use planResult.imageUrls[0] in handleRender instead of productImageDataUrls[0]
- Use planResult?.imageUrls[0] for sourceImage display fallback

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

src/styles/components/page-transition.css

@@ -16,43 +16,29 @@
   }
 }
 
-/* Directional page transitions */
-.page-motion--enter.is-forward {
-  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.page-motion--enter.is-backward {
-  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+/* Exit: fade + directional slide */
+.page-motion--exit {
+  animation: page-out 180ms ease forwards;
+  pointer-events: none;
 }
 
 .page-motion--exit.is-forward {
-  animation: page-slide-out-forward 180ms ease both;
+  animation: page-slide-out-forward 180ms ease forwards;
+  pointer-events: none;
 }
 
 .page-motion--exit.is-backward {
-  animation: page-slide-out-backward 180ms ease both;
+  animation: page-slide-out-backward 180ms ease forwards;
+  pointer-events: none;
 }
 
-@keyframes page-slide-in-forward {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+/* Cancel child's own entrance animation during exit */
+.page-motion--exit .page-motion {
+  animation: none !important;
 }
 
-@keyframes page-slide-in-backward {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+@keyframes page-out {
+  to { opacity: 0; transform: translateY(-6px); }
 }
 
 @keyframes page-slide-out-forward {
@@ -68,3 +54,23 @@
     transform: translateX(16px);
   }
 }
+
+/* Enter: explicit wrapper entrance animation overrides child page-motion */
+.page-motion--enter {
+  animation: page-enter-fade 220ms ease both;
+}
+
+.page-motion--enter .page-motion {
+  animation: none !important;
+}
+
+@keyframes page-enter-fade {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/styles/components/primitives.css

@@ -65,18 +65,7 @@
   min-height: 0;
 }
 
-.page-motion--exit {
-  animation: page-out 180ms ease both;
-  pointer-events: none;
-}
-
-.page-motion--exit .page-motion {
-  animation: none;
-}
-
-@keyframes page-out {
-  to { opacity: 0; transform: translateY(-6px); }
-}
+/* page-motion--exit moved to page-transition.css */
 
 .page-loading-center {
   display: flex;