fix: use negative positioning to extend video into iOS safe areas

- Change top from 0 to calc(-1 * env(safe-area-inset-top, 0px))
- Increase height to calc(100vh + env(safe-area-inset-top, 0px))
- Fix object-position to 'top center' to anchor video at top edge
- This pulls the video container UP into the safe area instead of starting at its boundary

apps/website/components/HeroSection.vue

@@ -116,12 +116,12 @@ onMounted(() => {
   const videoHTML = `
     <div id="ios-video-bg" style="
       position: fixed;
-      top: 0;
+      top: calc(-1 * env(safe-area-inset-top, 0px));
       left: 0;
       right: 0;
       bottom: 0;
       width: 100vw;
-      height: 100vh;
+      height: calc(100vh + env(safe-area-inset-top, 0px));
       z-index: -1;
       background: #000;
     ">
@@ -135,7 +135,7 @@ onMounted(() => {
           width: 100%;
           height: 100%;
           object-fit: cover;
-          object-position: center top;
+          object-position: top center;
         ">
         <source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
       </video>