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/decorations/CorporateBackground.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef, useEffect } from 'react';
-import { motion, useScroll, useTransform, useSpring } from 'framer-motion';
+import { useScroll, useTransform, useSpring, m, LazyMotion, domAnimation } from 'framer-motion';
 import { LogoArcs } from '@/components/ui/LogoArcs';
 
 function MagneticRing({ 
@@ -57,13 +57,13 @@ function MagneticRing({
   }, [x, y, pullRadius, pullStrength]);
 
   return (
-    <motion.div
+    <m.div
       ref={ref}
       style={{ x, y }}
       className={className}
     >
       {children}
-    </motion.div>
+    </m.div>
   );
 }
 
@@ -80,7 +80,7 @@ export function CorporateBackground() {
   return (
     <div className="absolute inset-0 z-[50] overflow-hidden pointer-events-none hidden md:block" aria-hidden="true">
       {/* 1. Top Right - Medium, rotating moderately */}
-      <motion.div 
+      <m.div 
         style={{ 
           y: y1,
           animationDelay: '0s',
@@ -90,18 +90,18 @@ export function CorporateBackground() {
         className="absolute top-[0%] right-0 translate-x-[40%] w-[400px] h-[400px] md:w-[700px] md:h-[700px] animate-bg-pulse-20"
       >
         <MagneticRing pullRadius={700} pullStrength={40} className="w-full h-full">
-          <motion.div
+          <m.div
             animate={{ rotate: 360 }}
             transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
             className="w-full h-full text-primary"
           >
             <LogoArcs className="w-full h-full" />
-          </motion.div>
+          </m.div>
         </MagneticRing>
-      </motion.div>
+      </m.div>
 
       {/* 2. Quarter way down left - Smaller, rotating fast reverse */}
-      <motion.div 
+      <m.div 
         style={{ 
           y: y2,
           animationDelay: '3s',
@@ -111,18 +111,18 @@ export function CorporateBackground() {
         className="absolute top-[20%] left-0 -translate-x-[40%] w-[300px] h-[300px] md:w-[500px] md:h-[500px] animate-bg-pulse-15"
       >
         <MagneticRing pullRadius={500} pullStrength={50} className="w-full h-full">
-          <motion.div
+          <m.div
             animate={{ rotate: -360 }}
             transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
             className="w-full h-full text-secondary"
           >
             <LogoArcs className="w-full h-full -rotate-45" />
-          </motion.div>
+          </m.div>
         </MagneticRing>
-      </motion.div>
+      </m.div>
 
       {/* 3. Halfway down right - Medium, rotating slow */}
-      <motion.div 
+      <m.div 
         style={{ 
           y: y3,
           animationDelay: '6s',
@@ -132,18 +132,18 @@ export function CorporateBackground() {
         className="absolute top-[45%] right-0 translate-x-[30%] w-[350px] h-[350px] md:w-[600px] md:h-[600px] animate-bg-pulse-15"
       >
         <MagneticRing pullRadius={600} pullStrength={35} className="w-full h-full">
-          <motion.div
+          <m.div
             animate={{ rotate: 360 }}
             transition={{ duration: 60, repeat: Infinity, ease: "linear" }}
             className="w-full h-full text-primary"
           >
             <LogoArcs className="w-full h-full rotate-90" />
-          </motion.div>
+          </m.div>
         </MagneticRing>
-      </motion.div>
+      </m.div>
 
       {/* 4. Bottom left - Larger, rotating moderately */}
-      <motion.div 
+      <m.div 
         style={{ 
           y: y4,
           animationDelay: '9s',
@@ -153,18 +153,18 @@ export function CorporateBackground() {
         className="absolute top-[70%] left-0 -translate-x-[40%] w-[500px] h-[500px] md:w-[800px] md:h-[800px] animate-bg-pulse-20"
       >
         <MagneticRing pullRadius={800} pullStrength={30} className="w-full h-full">
-          <motion.div
+          <m.div
             animate={{ rotate: -360 }}
             transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
             className="w-full h-full text-secondary"
           >
             <LogoArcs className="w-full h-full rotate-180" />
-          </motion.div>
+          </m.div>
         </MagneticRing>
-      </motion.div>
+      </m.div>
       
       {/* 5. Deep bottom right - Smallest, very fast */}
-      <motion.div 
+      <m.div 
         style={{ 
           y: y5,
           animationDelay: '12s',
@@ -174,15 +174,15 @@ export function CorporateBackground() {
         className="absolute top-[88%] right-0 translate-x-[50%] w-[250px] h-[250px] md:w-[400px] md:h-[400px] animate-bg-pulse-15"
       >
         <MagneticRing pullRadius={400} pullStrength={60} className="w-full h-full">
-          <motion.div
+          <m.div
             animate={{ rotate: 360 }}
             transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
             className="w-full h-full text-primary"
           >
             <LogoArcs className="w-full h-full -rotate-12" />
-          </motion.div>
+          </m.div>
         </MagneticRing>
-      </motion.div>
+      </m.div>
     </div>
   );
 }

components/decorations/EUFundingBadge.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import Image from 'next/image';
 
 export function EUFundingBadge() {
   return (
-    <motion.div 
+    <m.div 
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1] }}
@@ -36,6 +36,6 @@ export function EUFundingBadge() {
           Europäischen Union
         </span>
       </div>
-    </motion.div>
+    </m.div>
   );
 }