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/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 {