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