Extend hero through PWA safe areas

public/manifest.webmanifest

@@ -6,7 +6,7 @@
   "scope": "/",
   "id": "/",
   "display": "standalone",
-  "display_override": ["standalone"],
+  "display_override": ["fullscreen", "standalone"],
   "orientation": "portrait",
   "background_color": "#0a0a0a",
   "theme_color": "#0a0a0a",

src/App.vue

@@ -2423,7 +2423,7 @@ watch(mobileMenuOpen, (open) => {
 
     <section
       v-if="isHomeRoute"
-      class="hero-fold relative isolate min-h-screen overflow-hidden"
+      class="hero-fold relative isolate overflow-hidden"
       :style="{ '--safe-area-bg-image': `url(${currentHeroBackground})` }"
     >
       <div class="hero-bg-layer">

src/style.css

@@ -51,13 +51,16 @@ body.menu-open {
 
 .hero-bg-layer {
   position: absolute;
-  inset: -5rem 0;
+  inset:
+    calc(-5rem - env(safe-area-inset-top))
+    0
+    calc(-5rem - env(safe-area-inset-bottom));
   transform: translate3d(0, var(--hero-bg-y, 0px), 0) scale(1.03);
   will-change: transform;
 }
 
 .hero-fold {
-  min-height: 100svh;
+  min-height: calc(100svh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
 .hero-bg {