Fix video loading flash and horizontal scroll on mobile

- Change video preload from metadata to auto for faster loading
- Add fade-in transition for smooth video appearance
- Remove transform scale(1.1) that caused horizontal overflow
- Add comprehensive overflow-x: hidden to html, body, and hero containers
- Add max-width: 100vw constraints at multiple levels
- Add contain: layout to hero section for better overflow control
- Implement proper loading states to prevent fallback image flash

apps/website/components/HeroSection.vue

@@ -7,9 +7,10 @@
         loop
         muted
         playsinline
-        preload="metadata"
+        preload="auto"
         poster="/golden_gate.jpg"
         class="hero-video"
+        :class="{ 'video-loaded': videoLoaded }"
         @canplaythrough="handleVideoLoaded"
       >
         <source
@@ -167,5 +168,29 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Additional animations defined in voyage-layout.css */
+/* Video fade-in transition to prevent flash */
+.hero-video {
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
+.hero-video.video-loaded {
+  opacity: 1;
+}
+
+/* Ensure the fallback image fades out smoothly */
+.hero-image-fallback {
+  transition: opacity 0.5s ease-in-out;
+}
+
+.hero-image-fallback.fade-out {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Container to prevent horizontal overflow */
+.hero-voyage {
+  overflow-x: hidden !important;
+  max-width: 100vw !important;
+}
 </style>