fix: stabilize reveals and update contact email

app/components/About.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { motion, useReducedMotion, type Variants } from "framer-motion";
+import { motion, type Variants } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import profilePhoto from "@/public/edev.jpg";
 import { DrawLine } from "./animations/DrawLine";
 import { LazyRevealImage } from "./animations/LazyRevealImage";

app/components/Contact.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import { motion, type Variants } from "framer-motion";
 import type React from "react";
 import { useEffect, useState } from "react";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import { buildWhatsAppUrl, getWhatsAppDisplayNumber } from "@/lib/whatsapp";
-import { motion, type Variants, useReducedMotion } from "framer-motion";
-import { Section } from "./Section";
 import { DrawLine } from "./animations/DrawLine";
 import MagneticButton from "./cinematic/MagneticButton";
-
+import { Section } from "./Section";
 
 export default function Contact() {
   const shouldReduceMotion = useReducedMotion();

app/components/Experience.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { motion, type Variants } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import type { PortfolioExperience } from "@/lib/portfolio-data";
-import { motion, type Variants, useReducedMotion } from "framer-motion";
-import { Section } from "./Section";
 import { DrawLine } from "./animations/DrawLine";
+import { Section } from "./Section";
 
 export default function Experience({
   experiences,

app/components/Footer.test.tsx

@@ -13,7 +13,7 @@ describe("Footer Component - Contact Information", () => {
   it("should render email address", () => {
     render(<Footer />);
 
-    const emailLink = screen.getByText("evandro@dev.br");
+    const emailLink = screen.getByText("evandro[email protected]");
     expect(emailLink).toBeInTheDocument();
     expect(emailLink.tagName).toBe("A");
   });
@@ -21,14 +21,17 @@ describe("Footer Component - Contact Information", () => {
   it("should have mailto link for email", () => {
     render(<Footer />);
 
-    const emailLink = screen.getByText("evandro@dev.br");
+    const emailLink = screen.getByText("evandro[email protected]");
-    expect(emailLink).toHaveAttribute("href", "mailto:[email protected]");
+    expect(emailLink).toHaveAttribute(
+      "href",
+      "mailto:[email protected]",
+    );
   });
 
   it("should apply correct styling classes to email link", () => {
     render(<Footer />);
 
-    const emailLink = screen.getByText("evandro@dev.br");
+    const emailLink = screen.getByText("evandro[email protected]");
     const classes = emailLink.className;
 
     expect(classes).toContain("text-[12px]");

app/components/Footer.tsx

@@ -64,11 +64,11 @@ export default function Footer() {
                 </p>
                 <MagneticButton
                   as="a"
-                  href="mailto:evandro@dev.br"
+                  href="mailto:evandro[email protected]"
                   className="inline-block text-[18px] font-bold text-[var(--ink)] transition-colors duration-200 hover:text-[var(--slash)]"
                   strength={0.2}
                 >
-                  evandro@dev.br
+                  evandrofonsecajunior@gmail.com
                 </MagneticButton>
               </div>
             </div>

app/components/LighthouseMetrics.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { motion, useReducedMotion } from "framer-motion";
+import { motion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import { Section } from "./Section";
 
 const METRICS = [

app/components/Logo.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { motion, useReducedMotion } from "framer-motion";
+import { motion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface LogoProps {
   variant?: "mark" | "wordmark" | "icon";

app/components/Projects.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { motion, type Variants } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import type { PortfolioProject } from "@/lib/portfolio-data";
-import { motion, type Variants, useReducedMotion } from "framer-motion";
-import { Section } from "./Section";
-import MagneticButton from "./cinematic/MagneticButton";
 import { DrawLine } from "./animations/DrawLine";
+import MagneticButton from "./cinematic/MagneticButton";
+import { Section } from "./Section";
 
 export default function Projects({
   projects,

app/components/Reveal.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { motion } from "framer-motion";
 import type { ReactNode } from "react";
 import { useState } from "react";
-import { motion, useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface RevealProps {
   children: ReactNode;

app/components/RouteTransition.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { AnimatePresence, motion } from "framer-motion";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface RouteTransitionProps {
   children: ReactNode;

app/components/Section.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { motion, type Variants } from "framer-motion";
 import type React from "react";
-import { motion, type Variants, useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import { DrawLine } from "./animations/DrawLine";
 import { TextDiffuseReveal } from "./animations/TextDiffuseReveal";
 import { Reveal } from "./Reveal";

app/components/Skills.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { motion, type Variants } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import type { PortfolioSkillCategory } from "@/lib/portfolio-data";
-import { motion, type Variants, useReducedMotion } from "framer-motion";
-import { Section } from "./Section";
 import { DrawLine } from "./animations/DrawLine";
+import { Section } from "./Section";
 
 export default function Skills({
   categories,

app/components/WorkModalities.tsx

@@ -1,11 +1,12 @@
 "use client";
 
+import { motion, type Variants } from "framer-motion";
 import Link from "next/link";
-import { motion, type Variants, useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import { serviceHubLinks } from "@/lib/site-content";
-import { Section } from "./Section";
 import { DrawLine } from "./animations/DrawLine";
 import MagneticButton from "./cinematic/MagneticButton";
+import { Section } from "./Section";
 
 interface Tier {
   id: string;
@@ -246,4 +247,3 @@ export function WorkModalities() {
     </Section>
   );
 }
-

app/components/animations/CounterValue.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { useInView } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import { useInView, useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface CounterValueProps {
   value: number;

app/components/animations/DrawLine.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { motion } from "framer-motion";
 import { useState } from "react";
-import { motion, useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface DrawLineProps {
   className?: string;

app/components/animations/LazyRevealImage.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { motion } from "framer-motion";
 import Image, { type StaticImageData } from "next/image";
-import { motion, useReducedMotion } from "framer-motion";
+import { useState } from "react";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface LazyRevealImageProps {
   src: string | StaticImageData;

app/components/animations/TextDiffuseReveal.reducedMotion.test.tsx

@@ -0,0 +1,81 @@
+import { render } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+import { TextDiffuseReveal } from "./TextDiffuseReveal";
+
+let mockReducedMotion = false;
+let mockInView = true;
+let mockAnimations: Array<{ animate?: Record<string, unknown> }> = [];
+jest.mock("framer-motion", () => {
+  const React = require("react");
+
+  return {
+    motion: {
+      span: ({
+        children,
+        initial: _initial,
+        animate,
+        transition: _transition,
+        onAnimationComplete: _onAnimationComplete,
+        ...props
+      }: {
+        children?: ReactNode;
+        initial?: unknown;
+        animate?: Record<string, unknown>;
+        transition?: unknown;
+        onAnimationComplete?: () => void;
+      } & Record<string, unknown>) => {
+        mockAnimations.push({ animate });
+        return React.createElement("span", props, children);
+      },
+    },
+    useInView: () => mockInView,
+    useReducedMotion: () => mockReducedMotion,
+  };
+});
+
+describe("TextDiffuseReveal reduced motion", () => {
+  beforeEach(() => {
+    mockReducedMotion = false;
+    mockInView = true;
+    mockAnimations = [];
+  });
+
+  it("clears blur and scale when reduced motion resolves after mount", () => {
+    const { rerender } = render(<TextDiffuseReveal text="Reveal" />);
+
+    mockAnimations = [];
+    mockReducedMotion = true;
+    rerender(<TextDiffuseReveal text="Reveal" />);
+
+    expect(mockAnimations).toHaveLength(6);
+    expect(mockAnimations).toEqual(
+      expect.arrayContaining(
+        Array.from({ length: 6 }, () =>
+          expect.objectContaining({
+            animate: {
+              opacity: 1,
+              filter: "blur(0px)",
+              scale: 1,
+            },
+          }),
+        ),
+      ),
+    );
+  });
+
+  it("keeps the first render independent of the reduced-motion preference", () => {
+    mockReducedMotion = true;
+    mockInView = false;
+
+    render(<TextDiffuseReveal text="Reveal" />);
+
+    expect(mockAnimations[0]).toEqual({
+      animate: {
+        filter: "blur(12px)",
+        opacity: 0,
+        scale: 0.9,
+      },
+    });
+  });
+});

app/components/animations/TextDiffuseReveal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { motion, useInView, useReducedMotion } from "framer-motion";
+import { motion, useInView } from "framer-motion";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface TextDiffuseRevealProps {
   text: string;
@@ -101,11 +102,9 @@ export function TextDiffuseReveal({
                   }
                   animate={
                     isInView
-                      ? shouldReduceMotion
+                      ? { filter: "blur(0px)", opacity: 1, scale: 1 }
-                        ? { opacity: 1 }
-                        : { filter: "blur(0px)", opacity: 1, scale: 1 }
                       : shouldReduceMotion
-                        ? { opacity: 0 }
+                        ? { filter: "blur(0px)", opacity: 0, scale: 1 }
                         : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
                   }
                   transition={{

app/components/animations/TopProgressBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { motion, useReducedMotion } from "framer-motion";
+import { motion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 interface TopProgressBarProps {
   className?: string;

app/components/cinematic/HeroBackground.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 const HeroScene = dynamic(() => import("./HeroScene"), { ssr: false });
 

app/components/cinematic/PageIntro.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 
 const EXIT_EASE: [number, number, number, number] = [0.76, 0, 0.24, 1];
 

app/hooks/useReducedMotion.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useReducedMotion as useFramerReducedMotion } from "framer-motion";
-
+import { useEffect, useState } from "react";
 /**
  * Hook que detecta a preferência prefers-reduced-motion do sistema operacional.
  * Wrapper sobre o hook useReducedMotion do Framer Motion.
@@ -20,5 +20,12 @@ import { useReducedMotion as useFramerReducedMotion } from "framer-motion";
  * ```
  */
 export function useReducedMotion(): boolean {
-  return useFramerReducedMotion() ?? false;
+  const systemPreference = useFramerReducedMotion();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted && systemPreference === true;
 }