feat(home): wix-style hero — pinned landscape, larger kicker/title, scaled stag

Replace the in-flow background image with a viewport-fixed element so
the Pyrenees landscape stays put while everything else scrolls. Stand
the hero up to min-h-screen and centre the kicker / title / stag stack
vertically. Bump the kicker size from text-xs to text-xl→text-4xl with
tighter tracking and a drop-shadow so it stays legible against the
bright sky portion of the photo. Pull the title down one size step at
each breakpoint to leave room for the bigger stag, which roughly
doubles in size to dominate the composition the way it does in the
Wix source. Drop the bottom gradient stop (was fading to opaque green
and blocking the photo) — fades cleanly to transparent now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/views/HomeView.vue

@@ -35,32 +35,40 @@ const featuredEvents = [
 
 <template>
   <div>
-    <!-- Hero: landscape backdrop + stag overlay + script title -->
+    <!-- Pinned landscape backdrop: viewport-fixed so it stays put while
-    <section class="relative isolate overflow-hidden">
+         content scrolls over it. Visible behind the transparent hero;
-      <img
+         covered by the opaque welcome/bouge/etc sections as the user
-        :src="heroLandscape"
+         scrolls down. -->
-        alt=""
+    <img
-        class="absolute inset-0 -z-20 h-full w-full object-cover"
+      :src="heroLandscape"
-      />
+      alt=""
+      aria-hidden="true"
+      class="fixed inset-0 -z-50 h-screen w-screen object-cover"
+    />
+
+    <!-- Hero: full-viewport, transparent over the pinned backdrop -->
+    <section class="relative isolate flex min-h-screen flex-col items-center justify-center overflow-hidden">
       <div
-        class="absolute inset-0 -z-10 bg-gradient-to-b from-background/20 via-background/40 to-background"
+        class="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-background/55 to-transparent"
       ></div>
 
       <div
-        class="relative mx-auto flex max-w-7xl flex-col items-center px-4 pt-16 pb-8 text-center lg:px-6 lg:pt-24 lg:pb-12"
+        class="relative mx-auto flex max-w-7xl flex-col items-center px-4 text-center lg:px-6"
       >
-        <p class="font-display text-xs uppercase tracking-[0.4em] text-accent">
+        <p
+          class="font-display text-xl uppercase tracking-[0.25em] text-accent drop-shadow-[0_1px_4px_rgba(0,0,0,0.85)] md:text-3xl lg:text-4xl"
+        >
           {{ t('common.tagline') }}
         </p>
         <h1
-          class="mt-4 font-script text-7xl leading-none text-foreground drop-shadow-md md:text-8xl lg:text-9xl"
+          class="mt-4 font-script font-bold text-6xl leading-none text-foreground drop-shadow-md md:text-7xl lg:text-8xl"
         >
           Château du Faune
         </h1>
         <img
           :src="cosmicStag"
           alt=""
-          class="-mt-4 h-72 w-72 object-contain md:h-96 md:w-96 lg:h-[28rem] lg:w-[28rem]"
+          class="mt-4 h-80 w-80 object-contain md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem] xl:h-[42rem] xl:w-[42rem]"
         />
       </div>
     </section>