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/ContactForm.tsx

@@ -98,7 +98,7 @@ export default function ContactForm() {
   if (status === 'error') {
     return (
       <Card
-        className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up"
+        className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 "
         role="alert"
         aria-live="assertive"
       >
@@ -134,7 +134,7 @@ export default function ContactForm() {
   }
 
   return (
-    <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
+    <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl ">
       <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
         {t('form.title')}
       </Heading>

components/DatasheetDownload.tsx

@@ -15,7 +15,7 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
   const { trackEvent } = useAnalytics();
 
   return (
-    <div className={cn('mt-8 animate-slight-fade-in-from-bottom', className)}>
+    <div className={cn('mt-8 ', className)}>
       <a
         href={datasheetPath}
         target="_blank"

components/ExcelDownload.tsx

@@ -15,7 +15,7 @@ export default function ExcelDownload({ excelPath, className }: ExcelDownloadPro
   const { trackEvent } = useAnalytics();
 
   return (
-    <div className={cn('mt-4 animate-slight-fade-in-from-bottom', className)}>
+    <div className={cn('mt-4 ', className)}>
       <a
         href={excelPath}
         target="_blank"

components/ProductSidebar.tsx

@@ -26,7 +26,7 @@ export default function ProductSidebar({
   const t = useTranslations('Products');
 
   return (
-    <aside className={cn('flex flex-col gap-4 animate-slight-fade-in-from-bottom', className)}>
+    <aside className={cn('flex flex-col gap-4 ', className)}>
       {/* Request Quote Form Card */}
       <div className="bg-white rounded-3xl border border-neutral-medium shadow-sm transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 overflow-hidden group/card">
         <div className="bg-primary p-6 text-white relative overflow-hidden">

components/RequestQuoteForm.tsx

@@ -84,7 +84,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
   if (status === 'success') {
     return (
       <div
-        className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center animate-fade-in !mt-0 w-full"
+        className="bg-accent/5 border border-accent/20 text-primary-dark p-4 rounded-xl text-center  !mt-0 w-full"
         role="alert"
         aria-live="polite"
       >
@@ -126,7 +126,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
   if (status === 'error') {
     return (
       <div
-        className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0 w-full"
+        className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center  !mt-0 w-full"
         role="alert"
         aria-live="assertive"
       >

components/annotator-local/Annotator.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion';
 import { MessageSquare, X, Check, Image as ImageIcon, Type, StickyNote, Download, Trash2, List } from "lucide-react";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -289,7 +289,7 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
         {isActive && (
           <div className="fixed inset-0 pointer-events-none z-[9998]">
             {hoveredRect && (
-              <motion.div
+              <m.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
@@ -304,7 +304,7 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
             )}
 
             {selectedRect && (
-              <motion.div
+              <m.div
                 initial={{ scale: 0.9, opacity: 0 }}
                 animate={{ scale: 1, opacity: 1 }}
                 className="absolute border-2 border-yellow-400 bg-yellow-400/20 rounded-sm"
@@ -324,7 +324,7 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
       <AnimatePresence>
         {selectedElement && (
           <div className="fixed inset-0 flex items-center justify-center z-[10000] bg-black/40 backdrop-blur-sm">
-            <motion.div
+            <m.div
               initial={{ opacity: 0, y: 20, scale: 0.95 }}
               animate={{ opacity: 1, y: 0, scale: 1 }}
               exit={{ opacity: 0, y: 20, scale: 0.95 }}
@@ -475,7 +475,7 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
                 <Check size={20} />
                 Speichern
               </button>
-            </motion.div>
+            </m.div>
           </div>
         )}
       </AnimatePresence>
@@ -484,14 +484,14 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
       <AnimatePresence>
         {showList && (
           <>
-            <motion.div
+            <m.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
               onClick={() => setShowList(false)}
               className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[10001]"
             />
-            <motion.div
+            <m.div
               initial={{ x: "100%" }}
               animate={{ x: 0 }}
               exit={{ x: "100%" }}
@@ -618,7 +618,7 @@ export function Annotator({ assets = [], onSubmit }: AnnotatorProps) {
                   </button>
                 </div>
               )}
-            </motion.div>
+            </m.div>
           </>
         )}
       </AnimatePresence>

components/blocks/BenefitGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion, Variants } from 'framer-motion';
+import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 import { LogoArcs } from '@/components/ui/LogoArcs';
 
@@ -94,7 +94,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
           )}
         </div>
 
-        <motion.div 
+        <m.div 
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
           variants={containerVariants}
           initial="hidden"
@@ -116,7 +116,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
             const animationClass = animationClasses[index % animationClasses.length];
 
             return (
-              <motion.div
+              <m.div
                 key={benefit.id}
                 variants={itemVariants}
                 className="group relative overflow-hidden bg-neutral-50/50 border border-neutral-200/60 rounded-3xl p-8 transition-all duration-500 hover:bg-white hover:border-primary/30 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1"
@@ -144,10 +144,10 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
                   )}
                 </div>
               </div>
-            </motion.div>
+            </m.div>
           );
         })}
-        </motion.div>
+        </m.div>
       </div>
     </section>
   );

components/blocks/CertificatesBlock.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { Container } from '@/components/ui/Container';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -122,7 +122,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
       <Container className="relative z-10">
         {!hideHeader && (
           <div className="text-center max-w-3xl mx-auto mb-16">
-            <motion.div
+            <m.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-50px" }}
@@ -131,11 +131,11 @@ export function CertificatesBlock({ badge, title, description, certificates = de
               <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
               <h3 className="font-heading text-2xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>
               <p className="text-lg text-neutral-600">{descriptionText}</p>
-            </motion.div>
+            </m.div>
           </div>
         )}
 
-        <motion.div 
+        <m.div 
           className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
           variants={containerVariants}
           initial="hidden"
@@ -144,7 +144,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
         >
           {certificates.map((cert, index) => {
             const isIso = cert.type === 'iso';
-            const Wrapper = cert.pdfUrl ? motion.a : motion.div;
+            const Wrapper = cert.pdfUrl ? m.a : m.div;
             const wrapperProps = cert.pdfUrl ? {
               href: encodeURI(cert.pdfUrl),
               target: "_blank",
@@ -219,7 +219,7 @@ export function CertificatesBlock({ badge, title, description, certificates = de
               </Wrapper>
             );
           })}
-        </motion.div>
+        </m.div>
       </Container>
     </section>
   );

components/blocks/CompanyTimeline.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { Building2, Compass, Layers, ArrowDownToLine, Wrench, Factory, Zap, MapPin, CheckCircle2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -102,7 +102,7 @@ export function CompanyTimeline({
           
           {/* Animated Central Line */}
           <div className="absolute left-[38px] md:left-1/2 top-0 bottom-0 w-1.5 -translate-x-1/2 rounded-full overflow-hidden">
-            <motion.div 
+            <m.div 
               className="w-full bg-primary drop-shadow-[0_0_8px_rgba(130,237,32,0.8)]"
               style={{ height: lineHeight }}
             />
@@ -114,7 +114,7 @@ export function CompanyTimeline({
               const Icon = iconMap[milestone.iconName] || Building2;
               
               return (
-                <motion.div 
+                <m.div 
                   key={i}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
@@ -159,7 +159,7 @@ export function CompanyTimeline({
                     </div>
 
                   </div>
-                </motion.div>
+                </m.div>
               );
             })}
           </div>

components/blocks/CompetenceBentoGrid.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -103,7 +103,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
 
             if (isAccent) {
               return (
-                <motion.div 
+                <m.div 
                   key={idx}
                   initial={{ opacity: 0, y: 20 }}
                   whileInView={{ opacity: 1, y: 0 }}
@@ -125,12 +125,12 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                   <AnimatedGlossyBorder color="white" className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={1} />
                   <h4 className="font-heading font-extrabold text-2xl md:text-3xl relative z-10 leading-snug">{item.title}</h4>
                   {item.description && <p className="text-white/80 text-base md:text-lg mt-3 relative z-10 font-medium">{item.description}</p>}
-                </motion.div>
+                </m.div>
               );
             }
 
             return (
-              <motion.div 
+              <m.div 
                 key={idx}
                 initial={{ opacity: 0, y: 20, scale: 0.98 }}
                 whileInView={{ opacity: 1, y: 0, scale: 1 }}
@@ -182,7 +182,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                     </p>
                   )}
                 </div>
-              </motion.div>
+              </m.div>
             );
           })}
         </div>

components/blocks/ContactSection.tsx

@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
 import { Section, Container } from '@/components/ui';
 import { ContactForm } from '@/components/forms/ContactForm';
 import dynamic from 'next/dynamic';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 
 const ContactMap = dynamic(() => import('@/components/ContactMap'), {
   ssr: false,
@@ -44,21 +44,21 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
     <Section className="bg-neutral-light relative overflow-hidden">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
-          <motion.div 
+          <m.div 
             className="lg:col-span-5 flex flex-col justify-center"
             variants={containerVariants}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true, margin: "-50px" }}
           >
-            <motion.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</motion.h2>
+            <m.h2 variants={itemVariants} className="text-primary font-bold tracking-wider uppercase text-sm mb-3">Direktkontakt</m.h2>
-            <motion.h3 variants={itemVariants} className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</motion.h3>
+            <m.h3 variants={itemVariants} className="font-heading text-3xl md:text-4xl font-extrabold text-neutral-dark mb-6">Wir sind für Sie da.</m.h3>
-            <motion.p variants={itemVariants} className="text-lg text-text-secondary mb-8 leading-relaxed">
+            <m.p variants={itemVariants} className="text-lg text-text-secondary mb-8 leading-relaxed">
               Haben Sie Fragen zu unseren Leistungen oder möchten Sie ein konkretes Projekt besprechen? Rufen Sie uns an oder schreiben Sie uns eine E-Mail.
-            </motion.p>
+            </m.p>
             
             <div className="space-y-6">
-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                 </div>
@@ -68,9 +68,9 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                     <a href="tel:+4935616857733">+49 (0) 3561 / 68577 33</a>
                   </p>
                 </div>
-              </motion.div>
+              </m.div>
 
-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                 </div>
@@ -80,9 +80,9 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                     <a href="mailto:info@e-tib.com">info@e-tib.com</a>
                   </p>
                 </div>
-              </motion.div>
+              </m.div>
 
-              <motion.div variants={itemVariants} className="group flex items-start gap-4">
+              <m.div variants={itemVariants} className="group flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary shrink-0 transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                 </div>
@@ -94,12 +94,12 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
                     Deutschland
                   </p>
                 </div>
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
           
           {showForm && (
-            <motion.div 
+            <m.div 
               className="lg:col-span-7 relative"
               variants={formVariants}
               initial="hidden"
@@ -113,12 +113,12 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
               >
                 <ContactForm />
               </Suspense>
-            </motion.div>
+            </m.div>
           )}
         </div>
       </Container>
       {showMap && (
-        <motion.section 
+        <m.section 
           initial={{ opacity: 0 }}
           whileInView={{ opacity: 1 }}
           viewport={{ once: true }}
@@ -135,7 +135,7 @@ export const ContactSection: React.FC<ContactSectionProps> = (props) => {
               ]}
             />
           </Suspense>
-        </motion.section>
+        </m.section>
       )}
     </Section>
   );

components/blocks/DataGridPulse.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function DataGridPulse() {
@@ -19,12 +19,12 @@ export function DataGridPulse() {
       />
 
       {/* Pulsing horizontal lines (Data Flow) */}
-      <motion.div 
+      <m.div 
         animate={{ x: ["-100%", "100%"] }}
         transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
         className="absolute top-1/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/30 to-transparent blur-[1px]"
       />
-      <motion.div 
+      <m.div 
         animate={{ x: ["100%", "-100%"] }}
         transition={{ duration: 7, repeat: Infinity, ease: "linear" }}
         className="absolute top-2/3 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/25 to-transparent blur-[1px]"

components/blocks/DeepDrillAnimation.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function DeepDrillAnimation() {
@@ -33,17 +33,17 @@ export function DeepDrillAnimation() {
 
         {/* The Drill Path */}
         <div className="relative w-2 h-96 bg-white/10 rounded-full mb-16">
-          <motion.div 
+          <m.div 
             className="absolute top-0 left-0 w-full bg-primary rounded-full"
             style={{ height: drillDepth, boxShadow: '0 0 20px rgba(130,237,32,0.6)' }}
           >
             {/* The Drill Head */}
             <div className="absolute -bottom-2 -left-2 w-6 h-6 bg-white rounded-full border-4 border-primary shadow-[0_0_15px_rgba(255,255,255,1)]" />
-          </motion.div>
+          </m.div>
         </div>
 
         {/* The Reveal Data */}
-        <motion.div 
+        <m.div 
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-50px" }}
@@ -56,7 +56,7 @@ export function DeepDrillAnimation() {
           <div className="text-sm font-bold uppercase tracking-widest text-primary">
             {locale === 'en' ? 'Drilled distance since 2023' : 'Gebohrte Strecke seit 2023'}
           </div>
-        </motion.div>
+        </m.div>
 
       </div>
     </div>

components/blocks/GrowthChart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 
 export function GrowthChart() {
@@ -42,7 +42,7 @@ export function GrowthChart() {
                 {/* Kabelverlegung Bar */}
                 <div className="flex items-center gap-4">
                   <div className="flex-1 bg-neutral-100 rounded-full h-6 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${kabelWidth}%` }}
                       viewport={{ once: true, margin: "-50px" }}
@@ -58,7 +58,7 @@ export function GrowthChart() {
                 {/* Offener Tiefbau Bar */}
                 <div className="flex items-center gap-4">
                   <div className="flex-1 bg-neutral-100 rounded-full h-5 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${offenerWidth}%` }}
                       viewport={{ once: true, margin: "-50px" }}
@@ -74,7 +74,7 @@ export function GrowthChart() {
                 {/* HDD Bar */}
                 <div className="flex items-center gap-4">
                   <div className="flex-1 bg-neutral-100 rounded-full h-4 overflow-hidden relative">
-                    <motion.div
+                    <m.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${hddWidth}%` }}
                       viewport={{ once: true, margin: "-50px" }}

components/blocks/HeroSection.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { Badge, Container, Heading } from '@/components/ui';
 import { Button } from '@/components/ui/Button';
 
@@ -47,7 +47,7 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
       className={`relative min-h-[35vh] md:min-h-[50vh] flex items-center pt-28 pb-10 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
     >
       {bgSrc && (
-        <motion.div 
+        <m.div 
           key={`hero-bg-${pathname}`}
           className="absolute inset-0 z-0"
           initial={{ scale: 1.05, opacity: 0 }}
@@ -74,10 +74,10 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
           
           {/* Top Fade for Header Navigation Readability */}
           <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
-        </motion.div>
+        </m.div>
       )}
       <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
-        <motion.div 
+        <m.div 
           key={`hero-content-${pathname}`}
           className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
           variants={containerVariants}
@@ -85,26 +85,26 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
           animate="visible"
         >
           {badge && (
-            <motion.div variants={itemVariants}>
+            <m.div variants={itemVariants}>
               <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                 {badge}
               </Badge>
-            </motion.div>
+            </m.div>
           )}
-          <motion.div variants={itemVariants}>
+          <m.div variants={itemVariants}>
             <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
               {title}
             </Heading>
-          </motion.div>
+          </m.div>
           {subtitle && (
-            <motion.div variants={itemVariants}>
+            <m.div variants={itemVariants}>
               <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                 {subtitle}
               </p>
-            </motion.div>
+            </m.div>
           )}
           {ctaLabel && ctaHref && (
-            <motion.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
+            <m.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
               <Button
                 href={ctaHref}
                 variant="accent"
@@ -115,9 +115,9 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
                   &rarr;
                 </span>
               </Button>
-            </motion.div>
+            </m.div>
           )}
-        </motion.div>
+        </m.div>
       </Container>
     </section>
   );

components/blocks/HeroVideo.tsx

@@ -118,7 +118,7 @@ export function HeroVideo(props: HeroVideoProps) {
       <div className="container relative z-[4] text-center px-4">
         <div
           key={`hero-content-${pathname}`}
-          className="animate-in fade-in slide-in-from-bottom-10 duration-1000 ease-out fill-mode-both"
+          className="relative"
         >
           <h1 
             className="font-heading font-bold text-3xl sm:text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"

components/blocks/InteractiveGermanyMap.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useRef, useCallback, useMemo } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
 import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
@@ -62,7 +62,7 @@ const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: L
       {(isHQ || isBranch) && (
         <div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
       )}
-      <motion.div
+      <m.div
         initial={{ scale: 0 }}
         animate={{ scale: 1 }}
         transition={{ type: 'spring', delay: idx * 0.1 }}
@@ -75,7 +75,7 @@ const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: L
         }`}
       >
         {(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
-      </motion.div>
+      </m.div>
     </div>
   );
 });
@@ -233,7 +233,7 @@ export function InteractiveGermanyMap({
 
               <AnimatePresence>
                 {activeLocation && (
-                  <motion.div
+                  <m.div
                     key="tooltip"
                     initial={{ opacity: 0, y: 10, scale: 0.95 }}
                     animate={{ opacity: 1, y: 0, scale: 1 }}
@@ -317,7 +317,7 @@ export function InteractiveGermanyMap({
                         )}
                       </div>
                     </div>
-                  </motion.div>
+                  </m.div>
                 )}
               </AnimatePresence>
             </div>

components/blocks/JobListingBlock.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 import { useTranslations } from 'next-intl';
 
 export interface JobListingBlockProps {
@@ -72,7 +72,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
       <div className="container mx-auto">
         {showFairs && (
           <div className="mb-12 md:mb-24 relative">
-            <motion.h3 
+            <m.h3 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true, margin: "-50px" }}
@@ -81,8 +81,8 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
             >
               <span className="w-12 h-1.5 bg-primary rounded-full" />
               {fairsTitle}
-            </motion.h3>
+            </m.h3>
-            <motion.div 
+            <m.div 
               variants={containerVariants}
               initial="hidden"
               whileInView="visible"
@@ -159,25 +159,25 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
 
                 if (isLink) {
                   return (
-                    <motion.a variants={itemVariants} key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
+                    <m.a variants={itemVariants} key={`fair-${idx}`} href={messe.url} target="_blank" rel="noopener noreferrer" className={`${baseClasses} cursor-pointer`}>
                       {innerContent}
-                    </motion.a>
+                    </m.a>
                   );
                 }
 
                 return (
-                  <motion.div variants={itemVariants} key={`fair-${idx}`} className={baseClasses}>
+                  <m.div variants={itemVariants} key={`fair-${idx}`} className={baseClasses}>
                     {innerContent}
-                  </motion.div>
+                  </m.div>
                 );
               })}
-            </motion.div>
+            </m.div>
           </div>
         )}
 
         {showJobs && (
           <div className="mb-12">
-            <motion.h2 
+            <m.h2 
               initial={{ opacity: 0, x: -20 }}
               whileInView={{ opacity: 1, x: 0 }}
               viewport={{ once: true, margin: "-50px" }}
@@ -185,10 +185,10 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
               className="font-heading font-extrabold text-3xl md:text-4xl text-neutral-dark mb-6 md:mb-8"
             >
               {title}
-            </motion.h2>
+            </m.h2>
             
             {jobs.length > 0 ? (
-              <motion.div 
+              <m.div 
                 variants={containerVariants}
                 initial="hidden"
                 whileInView="visible"
@@ -196,7 +196,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                 className="grid gap-6"
               >
                 {jobs.map((job: any) => (
-                  <motion.div variants={itemVariants} key={job.id}>
+                  <m.div variants={itemVariants} key={job.id}>
                     <Link 
                       href={`/karriere/${job.slug}`}
                       className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6 block"
@@ -214,11 +214,11 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                         <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                       </div>
                     </Link>
-                  </motion.div>
+                  </m.div>
                 ))}
-              </motion.div>
+              </m.div>
             ) : (
-              <motion.div 
+              <m.div 
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: "-50px" }}
@@ -229,7 +229,7 @@ export const JobListingBlock = (props: JobListingBlockProps) => {
                 <Button href={emptyStateLinkHref} variant="primary" className="mt-6">
                   {emptyStateLinkText}
                 </Button>
-              </motion.div>
+              </m.div>
             )}
           </div>
         )}

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 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'}`}
-          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'}`}
         >
           {references.map((ref, i) => {
             const imgSrc = ref.image 
@@ -126,15 +126,16 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
               : fallbacks[i % fallbacks.length];
 
             return (
-              <motion.div
+              <LazyMotion features={domAnimation}>
-                key={ref.id}
+                <m.div
-                initial={{ opacity: 0, x: 20 }}
+                  key={ref.id}
-                whileInView={{ opacity: 1, x: 0 }}
+                  initial={{ opacity: 0, x: 20 }}
-                viewport={{ once: true, margin: "-50px" }}
+                  whileInView={{ opacity: 1, x: 0 }}
-                transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
+                  viewport={{ once: true, margin: "-50px" }}
-                className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
+                  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
+                >
+                  <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 */}

components/blocks/ScaleOfImpact.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
+import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
 import { useLocale } from 'next-intl';
 
 export function ScaleOfImpact() {
@@ -26,14 +26,14 @@ export function ScaleOfImpact() {
       className="relative w-full min-h-[40vh] md:min-h-[70vh] bg-[#050B14] py-12 md:py-0 flex flex-col items-center justify-center overflow-hidden border-y border-neutral-800"
     >
       {/* Massive Watermark Numbers */}
-      <motion.div 
+      <m.div 
         style={{ opacity: bgOpacity }}
         className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none select-none overflow-hidden mix-blend-overlay"
       >
         <div className="font-heading font-black text-[20vw] leading-none text-white opacity-20 whitespace-nowrap">
           <span className="font-mono tracking-tighter">1.435.223</span>
         </div>
-      </motion.div>
+      </m.div>
 
       {/* Foreground Content */}
       <div className="relative z-10 container max-w-7xl mx-auto px-4 flex flex-col items-center text-center">
@@ -70,7 +70,7 @@ export function ScaleOfImpact() {
               strokeWidth="2"
             />
             {/* Glowing animated line */}
-            <motion.path 
+            <m.path 
               d="M0,50 Q250,0 500,50 T1000,50" 
               fill="none" 
               stroke="#ffc107" // warning/yellow color

components/blocks/ServiceDetailGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion, Variants } from 'framer-motion';
+import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 export interface ServicePanelData {
@@ -133,7 +133,7 @@ export function ServiceDetailGrid({
         </div>
 
         {(problemStatement || solutionStatement) && (
-          <motion.div 
+          <m.div 
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: "-50px" }}
@@ -165,10 +165,10 @@ export function ServiceDetailGrid({
                 <p className="text-text-secondary leading-relaxed">{solutionStatement.text}</p>
               </div>
             )}
-          </motion.div>
+          </m.div>
         )}
 
-        <motion.div 
+        <m.div 
           className="grid grid-cols-1 md:grid-cols-2 gap-8"
           variants={containerVariants}
           initial="hidden"
@@ -180,7 +180,7 @@ export function ServiceDetailGrid({
             const number = String(idx + 1).padStart(2, '0');
             
             return (
-              <motion.div
+              <m.div
                 key={panel.id}
                 variants={itemVariants}
                 className={`group relative overflow-hidden bg-white border border-neutral-200 rounded-3xl p-6 md:p-12 transition-all duration-500 hover:border-primary/40 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1 select-none ${isFullWidth ? 'md:col-span-2' : ''}`}
@@ -224,10 +224,10 @@ export function ServiceDetailGrid({
                     </ul>
                   ))}
                 </div>
-              </motion.div>
+              </m.div>
             );
           })}
-        </motion.div>
+        </m.div>
       </div>
     </section>
   );

components/blocks/SubCompanyTiles.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { motion, Variants } from 'framer-motion';
+import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
 import Image from 'next/image';
 import Link from 'next/link';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
@@ -80,7 +80,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
         
         <div className="relative -mx-4 md:mx-0">
           <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" />
-          <motion.div 
+          <m.div 
             className="flex overflow-x-auto md:overflow-visible snap-x snap-mandatory pb-6 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 px-4 md:px-0 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
             variants={containerVariants}
             initial="hidden"
@@ -235,7 +235,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
             }`;
 
             return (
-              <motion.div 
+              <m.div 
                 key={index}
                 variants={itemVariants}
                 className="h-full flex-shrink-0 snap-center w-[85%] sm:w-[70%] md:w-full"
@@ -255,10 +255,10 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                     {CardContent}
                   </div>
                 )}
-              </motion.div>
+              </m.div>
             );
           })}
-          </motion.div>
+          </m.div>
         </div>
       </div>
     </section>

components/blocks/SupportCTA.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import TrackedLink from '@/components/analytics/TrackedLink';
 import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 
 export interface SupportCTAProps {
   title: string;
@@ -39,7 +39,7 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
   const { title, description, buttonLabel, buttonHref } = props;
 
   return (
-    <motion.div 
+    <m.div 
       variants={containerVariants}
       initial="hidden"
       whileInView="visible"
@@ -48,9 +48,9 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
     >
       <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform duration-700 group-hover:translate-x-1/3" />
       <div className="relative z-10 max-w-2xl">
-        <motion.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</motion.h3>
+        <m.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</m.h3>
-        <motion.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</motion.p>
+        <m.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</m.p>
-        <motion.div variants={itemVariants}>
+        <m.div variants={itemVariants}>
           <TrackedLink
             href={buttonHref}
             className={getButtonClasses('accent', 'lg')}
@@ -66,8 +66,8 @@ export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
             </span>
             <ButtonOverlay variant="accent" />
           </TrackedLink>
-        </motion.div>
+        </m.div>
       </div>
-    </motion.div>
+    </m.div>
   );
 };

components/blocks/TeamGrid.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 Image from 'next/image';
 import { useTranslations } from 'next-intl';
 
@@ -40,7 +40,7 @@ export function TeamGrid({ members }: TeamGridProps) {
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-10">
           {members.map((member, i) => (
-            <motion.div
+            <m.div
               key={member.id}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -104,7 +104,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                   )}
                 </div>
               </div>
-            </motion.div>
+            </m.div>
           ))}
         </div>
       </div>

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>
   );
 }

components/forms/ContactForm.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 { Button } from '@/components/ui/Button';
 import { sendContactFormAction } from '@/app/actions/contact';
 
@@ -37,7 +37,7 @@ export function ContactForm() {
       </div>
 
       {status === 'success' ? (
-        <motion.div 
+        <m.div 
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
           className="bg-primary/10 border border-primary text-primary p-6 rounded-xl flex items-start gap-4"
@@ -49,9 +49,9 @@ export function ContactForm() {
             <h4 className="font-bold text-lg mb-1">Anfrage erfolgreich gesendet</h4>
             <p>Vielen Dank für Ihr Interesse an der E-TIB Gruppe. Ein Ansprechpartner wird sich zeitnah mit Ihnen in Verbindung setzen.</p>
           </div>
-        </motion.div>
+        </m.div>
       ) : status === 'error' ? (
-        <motion.div 
+        <m.div 
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
           className="bg-red-500/10 border border-red-500 text-red-600 p-6 rounded-xl flex items-start gap-4 mb-6"
@@ -64,7 +64,7 @@ export function ContactForm() {
             <p>Leider ist ein Fehler aufgetreten. Bitte versuchen Sie es später noch einmal oder kontaktieren Sie uns direkt per E-Mail oder Telefon.</p>
             <Button variant="outline" size="sm" className="mt-4" onClick={() => setStatus('idle')}>Erneut versuchen</Button>
           </div>
-        </motion.div>
+        </m.div>
       ) : null}
       
       {status !== 'success' && status !== 'error' && (

components/home/Experience.tsx

@@ -13,7 +13,7 @@ export default function Experience({ data }: { data?: any }) {
           src="/uploads/2024/12/1694273920124-copy-2.webp"
           alt={data?.subtitle || t('subtitle')}
           fill
-          className="object-cover object-center scale-105 animate-slow-zoom"
+          className="object-cover object-center scale-105 "
           sizes="100vw"
           quality={100}
         />
@@ -34,7 +34,7 @@ export default function Experience({ data }: { data?: any }) {
           </div>
 
           <dl className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
-            <div className="animate-fade-in">
+            <div className="">
               <dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
                 {data?.badge1 || t('certifiedQuality')}
               </dt>
@@ -42,7 +42,7 @@ export default function Experience({ data }: { data?: any }) {
                 {data?.badge1Text || t('vdeApproved')}
               </dd>
             </div>
-            <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
+            <div className="" style={{ animationDelay: '100ms' }}>
               <dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
                 {data?.badge2 || t('fullSpectrum')}
               </dt>

components/home/Hero.tsx

@@ -105,7 +105,7 @@ export default function Hero({ data }: { data?: any }) {
                         )
                         .replace(
                           /<\/green>/g,
-                          '</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>',
+                          '</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 " style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>',
                         ),
                     }}
                   />
@@ -117,7 +117,7 @@ export default function Hero({ data }: { data?: any }) {
                           {chunks}
                         </span>
                         <div
-                          className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
+                          className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 "
                           style={{ animationDelay: '500ms' }}
                         >
                           <Scribble variant="circle" />
@@ -199,12 +199,12 @@ export default function Hero({ data }: { data?: any }) {
           </div>
         </Container>
 
-        <div className="relative md:absolute inset-0 z-0 w-full h-[35vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both">
+        <div className="relative md:absolute inset-0 z-0 w-full h-[35vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none ">
           <HeroIllustration />
         </div>
 
         <div
-          className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out fill-mode-both"
+          className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block "
           style={{ animationDelay: '2000ms' }}
         >
           <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">

components/home/MeetTheTeam.tsx

@@ -15,7 +15,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
           src="/uploads/2024/12/DSC08036-Large.webp"
           alt={data?.subtitle || t('subtitle')}
           fill
-          className="object-cover scale-105 animate-slow-zoom"
+          className="object-cover scale-105 "
           sizes="100vw"
           quality={100}
         />
@@ -24,7 +24,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
       </div>
 
       <Container className="relative z-10">
-        <div className="max-w-3xl text-white animate-slide-up">
+        <div className="max-w-3xl text-white ">
           <Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white mb-8">
             <span className="text-white">{data?.title || t('title')}</span>
           </Heading>

components/home/VideoSection.tsx

@@ -37,7 +37,7 @@ export default function VideoSection({ data }: { data?: any }) {
         </video>
       )}
       <div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center pointer-events-none">
-        <div className="max-w-5xl px-6 text-center animate-slide-up pointer-events-auto">
+        <div className="max-w-5xl px-6 text-center  pointer-events-auto">
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-[1.1]">
             {data?.title ? (
               <span

components/layout/Header.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { TransitionLink } from '@/components/ui/TransitionLink';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import { motion, useScroll, useTransform, AnimatePresence } from 'framer-motion';
 import { LanguageSwitcher } from './LanguageSwitcher';
 
 export interface NavLink {
@@ -25,21 +24,30 @@ export function Header({ navLinks }: HeaderProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
   const pathname = usePathname() || '/';
 
-  // Scroll bound shine effect (continuous looping as user scrolls)
+  const shineRef = React.useRef<HTMLDivElement>(null);
-  const { scrollY } = useScroll();
-  const shineX = useTransform(scrollY, (y) => {
-    const adjustedY = Math.max(0, y - 20); // Start after the solid mode kicks in
-    const range = 800; // 1 full sweep per 800px scrolled
-    const progress = (adjustedY % range) / range;
-    return `${-150 + progress * 300}%`;
-  });
 
   // Determine current locale from pathname
   const currentLocale = pathname.startsWith('/en') ? 'en' : 'de';
 
   React.useEffect(() => {
+    let animationFrameId: number;
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 20);
+      
+      if (shineRef.current) {
+        const y = window.scrollY;
+        const adjustedY = Math.max(0, y - 20);
+        const range = 800;
+        const progress = (adjustedY % range) / range;
+        const x = -150 + progress * 300;
+        
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = requestAnimationFrame(() => {
+          if (shineRef.current) {
+             shineRef.current.style.transform = `translateX(${x}%)`;
+          }
+        });
+      }
     };
     window.addEventListener('scroll', handleScroll);
     
@@ -88,8 +96,8 @@ export function Header({ navLinks }: HeaderProps) {
         >
           {/* Scroll bound shine effect */}
           <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden rounded-full">
-            <motion.div 
+            <div 
-              style={{ x: shineX }}
+              ref={shineRef}
               className={`absolute top-0 h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-20deg] mix-blend-overlay transition-opacity duration-300 ${isSolidMode ? 'opacity-100' : 'opacity-0'}`}
             />
           </div>
@@ -256,12 +264,10 @@ function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink
           </svg>
         )}
         
-        {/* Framer Motion Active Indicator */}
+        {/* Active Indicator */}
         {isActive && !link.children && (
-          <motion.div 
+          <div 
-            layoutId="header-active-indicator"
             className={`absolute -bottom-1 left-0 right-0 h-0.5 rounded-full ${isSolidMode ? 'bg-primary' : 'bg-white'}`}
-            transition={{ type: 'spring', stiffness: 400, damping: 30 }}
           />
         )}
         
@@ -269,15 +275,13 @@ function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink
         <span className={`absolute -bottom-1 left-1/2 w-0 h-0.5 -translate-x-1/2 rounded-full transition-all duration-300 ease-out group-hover:w-full ${isSolidMode ? 'bg-primary/30' : 'bg-white/30'} ${isActive ? 'opacity-0' : 'opacity-100'}`} />
       </TransitionLink>
 
-      <AnimatePresence>
+      <>
-        {isHovered && link.children && (
+        {link.children && (
-          <motion.div
+          <div
-            initial={{ opacity: 0, y: 10, scale: 0.95, rotateX: -10 }}
+            className={`absolute top-full left-1/2 -translate-x-1/2 pt-6 w-64 z-50 transition-all duration-300 origin-top ${
-            animate={{ opacity: 1, y: 0, scale: 1, rotateX: 0 }}
+              isHovered ? 'opacity-100 scale-100 translate-y-0 visible' : 'opacity-0 scale-95 translate-y-2 invisible'
-            exit={{ opacity: 0, y: 10, scale: 0.95, rotateX: -10 }}
+            }`}
-            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
+            style={{ perspective: 1000 }}
-            style={{ perspective: 1000, transformOrigin: 'top center' }}
-            className="absolute top-full left-1/2 -translate-x-1/2 pt-6 w-64 z-50"
           >
             <div className={`p-2.5 rounded-3xl shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] border ${isSolidMode ? 'bg-white/95 border-neutral-200/60' : 'bg-[#050B14]/95 border-white/[0.08] shadow-[0_0_40px_rgba(0,0,0,0.4)]'} backdrop-blur-2xl flex flex-col gap-1 relative overflow-hidden`}>
               {/* Top glowing accent line */}
@@ -321,9 +325,9 @@ function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink
                 );
               })}
             </div>
-          </motion.div>
+          </div>
         )}
-      </AnimatePresence>
+      </>
     </div>
   );
 }

components/layout/MobileBottomNav.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { usePathname } from 'next/navigation';
 import { TransitionLink } from '@/components/ui/TransitionLink';
 import { Home, Layers, Star, Mail, Menu } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
 
 export interface NavLink {
   label: string;
@@ -113,7 +113,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
             const innerContent = (
               <>
                 {isActive && (
-                  <motion.div
+                  <m.div
                     layoutId="mobile-nav-active-bg"
                     className="absolute inset-0 bg-primary/10 rounded-2xl shadow-sm border border-primary/10"
                     transition={{ type: 'spring', stiffness: 400, damping: 25 }}
@@ -121,19 +121,19 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                 )}
                 
                 <div className="relative flex flex-col items-center justify-center z-10 w-full h-full">
-                  <motion.div 
+                  <m.div 
                     whileTap={{ scale: 0.8 }}
                     animate={{ y: isActive ? -2 : 0 }}
                     transition={{ type: 'spring', stiffness: 400, damping: 17 }}
                   >
                     {item.icon}
-                  </motion.div>
+                  </m.div>
-                  <motion.span 
+                  <m.span 
                     animate={{ y: isActive ? 0 : 2 }}
                     className="text-[10px] font-bold mt-1 tracking-wide"
                   >
                     {item.label}
-                  </motion.span>
+                  </m.span>
                 </div>
               </>
             );
@@ -144,7 +144,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                   key={item.label}
                   onClick={() => setIsFlyoutOpen(!isFlyoutOpen)}
                   className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none w-full focus:outline-none ${
-                    isActive ? 'text-primary' : 'text-neutral-800 hover:text-neutral-900'
+                    isActive ? 'text-primary-dark' : 'text-neutral-800 hover:text-neutral-900'
                   }`}
                   style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
                 >
@@ -159,7 +159,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                 href={mappedUrl}
                 onClick={() => setIsFlyoutOpen(false)}
                 className={`relative flex flex-col items-center justify-center flex-1 h-[62px] transition-colors duration-300 select-none ${
-                  isActive ? 'text-primary' : 'text-neutral-800 hover:text-neutral-900'
+                  isActive ? 'text-primary-dark' : 'text-neutral-800 hover:text-neutral-900'
                 }`}
                 style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
               >
@@ -173,7 +173,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
       <AnimatePresence>
         {isFlyoutOpen && (
           <>
-            <motion.div 
+            <m.div 
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
@@ -181,7 +181,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
               className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[9997] md:hidden"
               onClick={() => setIsFlyoutOpen(false)}
             />
-            <motion.div
+            <m.div
               initial={{ y: '100%', opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
               exit={{ y: '100%', opacity: 0 }}
@@ -222,7 +222,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
                   );
                 })}
               </div>
-            </motion.div>
+            </m.div>
           </>
         )}
       </AnimatePresence>

components/providers/InitialLoader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 
 
@@ -33,7 +33,7 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
   return (
     <AnimatePresence>
       {isLoading && (
-        <motion.div
+        <m.div
           key="initial-loader"
           initial={{ y: 0 }}
           exit={{ y: '-100%' }}
@@ -46,7 +46,7 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
           {/* Deep Glow */}
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
           
-          <motion.div 
+          <m.div 
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
@@ -70,7 +70,7 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
               <div className="absolute inset-0 bg-white/70" />
               
               {/* Sweeping intense white light */}
-              <motion.div
+              <m.div
                 className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
                 initial={{ left: '-150%' }}
                 animate={{ left: '250%' }}
@@ -84,22 +84,22 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
                 <span>System</span>
                 <span className="text-primary/80 animate-pulse">Online</span>
               </div>
-              <motion.div 
+              <m.div 
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.3 }}
                 className="h-[2px] w-full bg-white/5 overflow-hidden relative rounded-full"
               >
-                <motion.div 
+                <m.div 
                   className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-dark via-primary to-primary-light"
                   initial={{ width: "0%" }}
                   animate={{ width: "100%" }}
                   transition={{ duration: 3.8, ease: [0.16, 1, 0.3, 1] }}
                 />
-              </motion.div>
+              </m.div>
             </div>
-          </motion.div>
+          </m.div>
-        </motion.div>
+        </m.div>
       )}
     </AnimatePresence>
   );

components/providers/PageTransitionShutter.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
 import { useTransition } from './TransitionProvider';
 import Image from 'next/image';
 
@@ -11,7 +11,7 @@ export function PageTransitionShutter() {
   return (
     <AnimatePresence>
       {isTransitioning && (
-        <motion.div
+        <m.div
           key="shutter"
           initial={{ y: '-100%' }}
           animate={{ y: '0%' }}
@@ -29,7 +29,7 @@ export function PageTransitionShutter() {
           {/* Deep Glow inside the Shutter */}
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
           
-          <motion.div 
+          <m.div 
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             exit={{ opacity: 0, scale: 1.05 }}
@@ -54,7 +54,7 @@ export function PageTransitionShutter() {
               <div className="absolute inset-0 bg-white/70" />
               
               {/* Sweeping intense white light */}
-              <motion.div
+              <m.div
                 className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
                 initial={{ left: '-150%' }}
                 animate={{ left: '250%' }}
@@ -69,7 +69,7 @@ export function PageTransitionShutter() {
                   (() => {
                     const [, fromLang, toLang] = transitionMessage.split(':');
                     return (
-                      <motion.div
+                      <m.div
                         key="lang-switch-graphic"
                         initial={{ opacity: 0, scale: 0.8 }}
                         animate={{ opacity: 1, scale: 1 }}
@@ -78,7 +78,7 @@ export function PageTransitionShutter() {
                       >
                         {/* Old Language Flag - Fading out */}
                         <div className="w-20 h-20 sm:w-28 sm:h-28 rounded-[2rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-center text-5xl sm:text-7xl relative overflow-hidden group grayscale opacity-50">
-                          <motion.div 
+                          <m.div 
                             className="absolute inset-0 bg-white/10"
                             animate={{ scale: [1, 2], opacity: [0.5, 0] }}
                             transition={{ duration: 1.5, repeat: Infinity }}
@@ -88,7 +88,7 @@ export function PageTransitionShutter() {
                         
                         {/* Animated Arrow connecting them */}
                         <div className="flex flex-col items-center gap-3">
-                          <motion.div 
+                          <m.div 
                             animate={{ x: [0, 20, 0] }} 
                             transition={{ duration: 1.2, repeat: Infinity, ease: "easeInOut" }}
                             className="text-primary drop-shadow-[0_0_15px_rgba(var(--color-primary),0.8)]"
@@ -97,7 +97,7 @@ export function PageTransitionShutter() {
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                             </svg>
-                          </motion.div>
+                          </m.div>
                           <div className="flex gap-2 opacity-50">
                              <span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" />
                              <span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),1)]" style={{ animationDelay: '150ms' }} />
@@ -108,17 +108,17 @@ export function PageTransitionShutter() {
                         {/* New Language Flag - Intense Glow */}
                         <div className="w-24 h-24 sm:w-32 sm:h-32 rounded-[2.5rem] bg-primary/10 border border-primary/50 shadow-[0_0_80px_rgba(var(--color-primary),0.5)] backdrop-blur-xl flex items-center justify-center text-6xl sm:text-8xl relative overflow-hidden ring-4 ring-primary/30">
                           <span className="relative z-10 drop-shadow-[0_0_15px_rgba(255,255,255,0.6)] leading-none">{toLang}</span>
-                          <motion.div 
+                          <m.div 
                             className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg]"
                             animate={{ x: ['-100%', '100%'] }}
                             transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
                           />
                         </div>
-                      </motion.div>
+                      </m.div>
                     );
                   })()
                 ) : (
-                  <motion.div
+                  <m.div
                     key="text-message"
                     initial={{ opacity: 0, y: 15, scale: 0.9 }}
                     animate={{ opacity: 1, y: 0, scale: 1 }}
@@ -126,13 +126,13 @@ export function PageTransitionShutter() {
                     transition={{ type: "spring", stiffness: 300, damping: 25 }}
                     className="mt-10 mb-2 px-6 py-2.5 rounded-full border border-primary/40 bg-primary/10 shadow-[0_0_40px_rgba(var(--color-primary),0.3)] backdrop-blur-xl relative overflow-hidden flex items-center justify-center"
                   >
-                    <motion.div 
+                    <m.div 
                       className="absolute inset-0 w-[200%] h-full bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg]"
                       animate={{ x: ['-100%', '100%'] }}
                       transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
                     />
                     <span className="text-white font-heading tracking-[0.2em] uppercase text-xs sm:text-sm font-extrabold flex items-center gap-3 relative z-10 drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]">
-                      <motion.svg 
+                      <m.svg 
                         animate={{ rotate: 360 }}
                         transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
                         xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-primary-light" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
@@ -140,15 +140,15 @@ export function PageTransitionShutter() {
                         <circle cx="12" cy="12" r="10"></circle>
                         <line x1="2" y1="12" x2="22" y2="12"></line>
                         <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
-                      </motion.svg>
+                      </m.svg>
                       {transitionMessage}
                     </span>
-                  </motion.div>
+                  </m.div>
                 )
               )}
             </AnimatePresence>
-          </motion.div>
+          </m.div>
-        </motion.div>
+        </m.div>
       )}
     </AnimatePresence>
   );

components/providers/TransitionProvider.tsx

@@ -2,6 +2,7 @@
 
 import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import { LazyMotion, domAnimation } from 'framer-motion';
 
 interface TransitionContextType {
   isTransitioning: boolean;
@@ -68,7 +69,9 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
           setTransitionMessage={setTransitionMessage}
         />
       </React.Suspense>
-      {children}
+      <LazyMotion features={domAnimation}>
+        {children}
+      </LazyMotion>
     </TransitionContext.Provider>
   );
 }

components/ui/AnimatedCounter.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { motion, useMotionValue, useTransform, animate, useInView } from 'framer-motion';
+import { useMotionValue, useTransform, animate, useInView, m, LazyMotion, domAnimation } from 'framer-motion';
 
 interface AnimatedCounterProps {
   value: number;
@@ -41,8 +41,8 @@ export function AnimatedCounter({
   }, [inView, value, duration, delay, count]);
 
   return (
-    <motion.span ref={ref} className={className}>
+    <m.span ref={ref} className={className}>
-      {prefix}<motion.span>{rounded}</motion.span>{suffix}
+      {prefix}<m.span>{rounded}</m.span>{suffix}
-    </motion.span>
+    </m.span>
   );
 }

components/ui/decorations/StratumLines.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion, useInView } from 'framer-motion';
+import { useInView, m, LazyMotion, domAnimation } from 'framer-motion';
 import { useRef } from 'react';
 
 /**
@@ -73,7 +73,7 @@ export function StratumLines({
         {LINES.map((line, i) => {
           const isFromRight = placement.includes('right') ? !line.fromRight : line.fromRight;
           return (
-            <motion.div
+            <m.div
               key={i}
               style={{
                 width: `${line.width}%`,

next.config.mjs

@@ -438,7 +438,7 @@ const nextConfig = {
   },
   images: {
     qualities: [25, 50, 75, 100],
-    formats: ['image/webp'],
+    formats: ['image/avif', 'image/webp'],
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     remotePatterns: [
       {