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,7 +1,8 @@
 <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">
+      <div ref="videoContainer" class="hero-video-container hero-video-teleported">
         <!-- White overlay that fades out when video is ready -->
         <div
           class="video-white-overlay"
@@ -30,6 +31,7 @@
         <div class="hero-overlay gradient-warm" />
         <div class="hero-overlay gradient-depth" />
       </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 {