feat(home): animated stag morph in the hero with reduced-motion fallback

Replace the static cosmic-stag.avif in the hero with a five-stag
seamless morph loop (15 stags-per-transition × 5 transitions, 18.5 s
total, alpha preserved):

- Primary: 1024×1024 VP9 WebM with alpha (5.2 MB) — Chrome / Firefox /
  Edge / Safari 17+. Autoplay + muted + loop + playsinline.
- Browser fallback: 480×480 animated WebP (23 MB) inside the <video>
  as the standards-compliant <img> Safari uses when it can't play
  any <source>.
- Reduced-motion fallback: the static cosmic-stag.avif renders via a
  sibling <img> that's display:none under motion-safe and
  display:block under motion-reduce (Tailwind motion-reduce:block).

Header, footer and favicon stay on the static AVIF — animating a
36 px logo or favicon doesn't read.

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

src/views/HomeView.vue

@@ -4,6 +4,8 @@ import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import cosmicStag from '@/assets/cosmic-stag.avif'
+import cosmicStagMorphWebm from '@/assets/cosmic-stag-morph-1024.webm'
+import cosmicStagMorphWebp from '@/assets/cosmic-stag-morph-fallback.webp'
 import heroLandscape from '@/assets/hero-landscape.webp'
 import sectionTile from '@/assets/section-tile.webp'
 
@@ -74,10 +76,21 @@ const featuredEvents = [
         >
           Château du Faune
         </h1>
+        <video
+          autoplay
+          muted
+          loop
+          playsinline
+          aria-hidden="true"
+          class="mt-4 h-80 w-80 object-contain motion-reduce:hidden md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem] xl:h-[42rem] xl:w-[42rem]"
+        >
+          <source :src="cosmicStagMorphWebm" type="video/webm" />
+          <img :src="cosmicStagMorphWebp" alt="" />
+        </video>
         <img
           :src="cosmicStag"
           alt=""
-          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]"
+          class="mt-4 hidden h-80 w-80 object-contain motion-reduce:block md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem] xl:h-[42rem] xl:w-[42rem]"
         />
       </div>
     </section>