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/assets/css/main.css

@@ -10,6 +10,9 @@ html {
   -webkit-overflow-scrolling: touch;
   /* Proper iOS viewport handling */
   height: -webkit-fill-available;
+  /* Prevent horizontal scrolling */
+  overflow-x: hidden !important;
+  max-width: 100vw !important;
 }
 
 body {
@@ -19,6 +22,10 @@ body {
   min-height: -webkit-fill-available;
   /* Prevent double-tap zoom on mobile */
   touch-action: manipulation;
+  /* Prevent horizontal scrolling */
+  overflow-x: hidden !important;
+  max-width: 100vw !important;
+  position: relative;
 }
 
 /* Accessibility: Reduced Motion */
@@ -490,7 +497,8 @@ body {
 /* Video Background Optimization */
 .hero-video {
   @apply absolute w-full h-full object-cover;
-  transform: scale(1.1);
+  /* Removed transform scale to prevent overflow */
+  /* transform: scale(1.1); */
 }
 
 /* Loading States */
@@ -502,11 +510,14 @@ body {
 @media (max-width: 768px) {
   html {
     font-size: 16px; /* Keep base font size for readability */
+    overflow-x: hidden !important;
+    max-width: 100vw !important;
   }
 
   body {
     width: 100%;
-    overflow-x: hidden;
+    overflow-x: hidden !important;
+    max-width: 100vw !important;
   }
 
   /* Ensure all containers use full width */

apps/website/assets/css/voyage-layout.css

@@ -199,7 +199,9 @@ body {
     font-family: var(--font-sans);
     color: var(--text-dark);
     background: var(--bg-light);
-    overflow-x: hidden;
+    overflow-x: hidden !important;
+    max-width: 100vw !important;
+    position: relative;
     line-height: 1.6;
     transition: background 0.3s ease, color 0.3s ease;
 }
@@ -207,6 +209,8 @@ body {
 /* Smooth Scrolling */
 html {
     scroll-behavior: smooth;
+    overflow-x: hidden !important;
+    max-width: 100vw !important;
 }
 
 
@@ -400,6 +404,10 @@ html {
     /* Prevent iOS overscroll bounce */
     overscroll-behavior-y: none;
     -webkit-overflow-scrolling: touch;
+    /* Prevent horizontal overflow */
+    overflow-x: hidden !important;
+    max-width: 100vw !important;
+    contain: layout;
 }
 
 .hero-video-container {
@@ -409,12 +417,15 @@ html {
     width: 100%;
     height: 100%;
     z-index: 1;
+    overflow: hidden;
 }
 
 .hero-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    /* Ensure video doesn't cause overflow */
+    max-width: 100%;
 }
 
 .hero-image-fallback {
@@ -1668,6 +1679,8 @@ html {
         min-height: 100dvh;
         height: 100vh;
         height: 100dvh;
+        overflow-x: hidden !important;
+        max-width: 100vw !important;
     }
 
     .hero-content {

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>