fix: restore hero section with simplified video positioning

- Removed CSS contain properties that were preventing video from extending into safe area
- Implemented Vue 3 Teleport to bypass DOM containment for iOS video extension
- Video now renders at body level to properly utilize safe area insets
- Kept Safari fallbacks for env() bug workaround

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

apps/website/assets/css/main.css

@@ -79,10 +79,7 @@ body {
 }
 
 /* Optimize scroll performance */
-.hero-voyage {
+/* Removed contain property to allow video to extend into safe area */
-  will-change: scroll-position;
-  contain: layout style paint;
-}
 
 /* Accessibility: Reduced Motion */
 @media (prefers-reduced-motion: reduce) {

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

@@ -443,7 +443,7 @@ html {
     overscroll-behavior-y: none;
     -webkit-overflow-scrolling: touch;
     max-width: 100vw !important;
-    contain: layout;
+    /* Removed contain: layout to allow video to extend into safe area */
     /* NO padding here - let container fill entire viewport */
     /* Safe areas will be applied to content only */
 }

apps/website/components/HeroSection.vue

@@ -1,35 +1,37 @@
 <template>
   <section class="hero-voyage" id="heroSection">
-    <!-- Hero video background container - will be absolutely positioned -->
+    <!-- Hero video background teleported to body for proper safe area extension -->
-    <div ref="videoContainer" class="hero-video-container">
+    <Teleport to="body">
-      <!-- White overlay that fades out when video is ready -->
+      <div ref="videoContainer" class="hero-video-container hero-video-teleported">
-      <div
+        <!-- White overlay that fades out when video is ready -->
-        class="video-white-overlay"
+        <div
-        :class="{ 'fade-out': videoLoaded }"
+          class="video-white-overlay"
-      />
+          :class="{ 'fade-out': videoLoaded }"
+        />
 
-      <video
+        <video
-        ref="videoElement"
+          ref="videoElement"
-        autoplay
+          autoplay
-        loop
+          loop
-        muted
+          muted
-        playsinline
+          playsinline
-        preload="auto"
+          preload="auto"
-        class="hero-video"
+          class="hero-video"
-        :class="{ 'video-loaded': videoLoaded }"
+          :class="{ 'video-loaded': videoLoaded }"
-        @loadeddata="handleVideoLoaded"
+          @loadeddata="handleVideoLoaded"
-        @canplaythrough="handleVideoLoaded"
+          @canplaythrough="handleVideoLoaded"
-        @play="handleVideoLoaded"
+          @play="handleVideoLoaded"
-      >
-        <source
-          src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
-          type="video/mp4"
         >
-      </video>
+          <source
+            src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4"
+            type="video/mp4"
+          >
+        </video>
 
-      <div class="hero-overlay gradient-warm" />
+        <div class="hero-overlay gradient-warm" />
-      <div class="hero-overlay gradient-depth" />
+        <div class="hero-overlay gradient-depth" />
-    </div>
+      </div>
+    </Teleport>
 
     <div class="hero-content" :class="{ 'is-ready': videoLoaded }">
       <div class="hero-main">
@@ -186,6 +188,12 @@ onMounted(() => {
   background: #ffffff;
 }
 
+/* Teleported video container - positioned at body level to bypass DOM containment */
+.hero-video-teleported {
+  position: fixed !important;
+  z-index: 1 !important;
+}
+
 /* Use @supports with max() as recommended by Apple for safe area */
 @supports(padding: max(0px)) {
   .hero-video-container {