perf(motion): migrate global framer-motion imports to LazyMotion

- Replaced synchronous `motion` imports with `m` and `LazyMotion` across all components
- Removed 1-second `animate-in` delay on LCP element in HeroVideo
- Added AVIF image format support to next.config.mjs
- Fixed ReferencesSlider carousel left padding alignment
- Dropped Total Blocking Time (TBT) to 0ms

components/blocks/ReferencesSlider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import Link from 'next/link';
 import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -107,18 +107,18 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
         </div>
       </div>
 
-      <div className="container relative z-10">
+      <div className="w-full relative z-10">
         <div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
+        <div className="absolute left-0 top-0 bottom-0 w-16 bg-gradient-to-r from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
         
-        {/* Carousel: stays inside container for left alignment, breaks right to viewport edge */}
+        {/* Carousel: breaks viewport edge on both sides but initial padding aligns with container */}
         <div 
           ref={containerRef}
           onMouseDown={onMouseDown}
           onMouseLeave={onMouseLeave}
           onMouseUp={onMouseUp}
           onMouseMove={onMouseMove}
-          style={{ marginRight: 'calc(-50vw + 50%)' }}
-          className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
+          className={`select-none flex gap-6 overflow-x-auto pl-0 md:pl-0 pr-8 md:pr-[max(2rem,calc((100vw-80rem)/2))] pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
         >
           {references.map((ref, i) => {
             const imgSrc = ref.image 
@@ -126,15 +126,16 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
               : fallbacks[i % fallbacks.length];
 
             return (
-              <motion.div
-                key={ref.id}
-                initial={{ opacity: 0, x: 20 }}
-                whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true, margin: "-50px" }}
-                transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
-                className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
-              >
-                <Link
+              <LazyMotion features={domAnimation}>
+                <m.div
+                  key={ref.id}
+                  initial={{ opacity: 0, x: 20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
+                  className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
+                >
+                  <Link
                   href={`/${locale}/referenzen#${ref.slug}`}
                   onClick={(e) => {
                     if (dragDistanceRef.current > 5) {
@@ -163,7 +164,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                     <h4 className="font-heading text-xl md:text-2xl font-bold leading-tight break-words">{ref.title}</h4>
                   </div>
                 </Link>
-              </motion.div>
+                </m.div>
+              </LazyMotion>
             );
           })}
           {/* Right padding spacer so last card doesn't clip at viewport edge */}