fix: make hero video cover iOS notch/Dynamic Island using CSS transform

- Use transform translateY to bypass iOS safe area constraints
- Video now extends into notch/Dynamic Island area on page load
- Removed ineffective iOS-specific negative positioning rules

The transform approach works by moving the element after layout calculations,
successfully bypassing Safari's safe area boundaries.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

apps/website/components/HeroSection.vue

@@ -175,40 +175,16 @@ onMounted(() => {
 /* Hero video container positioned absolutely behind content */
 .hero-video-container {
   position: fixed;
-  top: 0;
+  top: env(safe-area-inset-top, 0); /* Start at safe area boundary */
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: calc(100vh + env(safe-area-inset-top, 0)); /* Extend height to cover full screen */
   z-index: 1;
+  transform: translateY(calc(-1 * env(safe-area-inset-top, 0))); /* Move up into notch/Dynamic Island */
   pointer-events: none;
   background: #ffffff; /* White fallback */
 }
 
-/* iOS-specific: Extend video into safe area */
-@supports (-webkit-touch-callout: none) {
-  @media (max-width: 768px) {
-    .hero-video-container {
-      /* Extend beyond safe area on iOS to ensure coverage */
-      top: calc(-1 * env(safe-area-inset-top, 0));
-      height: calc(100vh + env(safe-area-inset-top, 0));
-    }
-
-    /* Support for dynamic viewport height */
-    @supports (height: 100dvh) {
-      .hero-video-container {
-        height: calc(100dvh + env(safe-area-inset-top, 0));
-      }
-    }
-
-    /* Support for large viewport height (iOS 15+) */
-    @supports (height: 100lvh) {
-      .hero-video-container {
-        height: calc(100lvh + env(safe-area-inset-top, 0));
-      }
-    }
-  }
-}
-
 /* Video fade-in transition to prevent flash */
 .hero-video {
   opacity: 0;