fix(perf): refactor HeroVideo to provide immediate Next.js optimized LCP image behind video

components/blocks/HeroVideo.tsx

@@ -46,27 +46,29 @@ export function HeroVideo(props: HeroVideoProps) {
       {/* Background color while video loads */}
       <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {videoUrl ? (
+      {/* ALWAYS render the Next.js optimized Image as the LCP element */}
-        <video
-          key={`${pathname}-${videoUrl}`}
-          className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
-          src={videoUrl}
-          autoPlay
-          muted
-          loop
-          playsInline
-          preload="auto"
-        />
-      ) : (
       <Image
         key={`img-${pathname}-${posterSrc}`}
         src={posterSrc}
         alt={posterAlt}
         fill
-          className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
+        className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
         sizes="100vw"
         priority
       />
+
+      {/* Render video on top if available, but don't force aggressive preload */}
+      {videoUrl && (
+        <video
+          key={`${pathname}-${videoUrl}`}
+          className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
+          src={videoUrl}
+          autoPlay
+          muted
+          loop
+          playsInline
+          preload="metadata"
+        />
       )}
       
       {/* Cinematic Color Grading Overlay */}