feat(template-card): add media placeholder and smooth video fade-in

add gradient background media placeholder for empty states
update video to use 0.18s ease opacity fade-in transition
add videoReady state to track when video is ready to display
adjust z-indexes for correct media layer stacking
fix video rendering condition and add state reset watchers
update template media container background color

src/pages-aigc/home/components/TemplateCard/styles/index.scss

@@ -42,18 +42,45 @@
   flex: 0 0 var(--template-card-media-height, 358px);
   height: var(--template-card-media-height, 358px);
   overflow: hidden;
-  background: #0f7069;
+  background: #0a4d46;
 }
 
+.template-media-placeholder,
 .template-image,
 .template-video {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   display: block;
 }
 
+.template-media-placeholder {
+  background:
+    radial-gradient(
+      90% 48% at 50% 30%,
+      rgba(255, 255, 255, 0.12),
+      rgba(255, 255, 255, 0) 70%
+    ),
+    linear-gradient(160deg, #17383a 0%, #0f7069 58%, #0a4d46 100%);
+}
+
+.template-image {
+  z-index: 1;
+}
+
 .template-video {
+  z-index: 2;
+  opacity: 0;
   pointer-events: none;
+  transition: opacity 0.18s ease;
+}
+
+.template-video.is-ready {
+  opacity: 1;
 }
 
 .template-media-shade {
@@ -62,6 +89,7 @@
   right: 0;
   bottom: 0;
   left: 0;
+  z-index: 3;
   background:
     radial-gradient(
       92% 45% at 50% 28%,