feat(home): rolagem suave (Lenis) e seis transicoes de secao ligadas a rolagem

Cada passagem segura a secao que sai e a que entra na tela enquanto a
transicao acontece: dissolucao do hero no notebook, cartao, iris, corte
lateral, perspectiva, cortina diagonal e zoom. Medidas pelo layout
(offsetTop) para nao confundir os gatilhos com os transforms.
Remove letreiros e divisores entre secoes.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

app/components/cinematic/CinematicHome.tsx

@@ -16,9 +16,9 @@ import Projects from "../Projects";
 import Skills from "../Skills";
 import NotebookStory from "../story/NotebookStory";
 import { WorkModalities } from "../WorkModalities";
+import { useRef } from "react";
 import ExperienceDisclosure from "./ExperienceDisclosure";
-import ScrollVelocityText from "./ScrollVelocityText";
-import SectionDivider from "./SectionDivider";
+import { useCinematicScroll } from "./useCinematicScroll";
 import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";
 
 export default function CinematicHome({
@@ -33,44 +33,39 @@ export default function CinematicHome({
   skillCategories: PortfolioSkillCategory[];
 }) {
   const onLayoutReady = useHomeFragmentNavigation();
+  const mainRef = useRef<HTMLElement>(null);
+  useCinematicScroll(mainRef);
 
   return (
     <div className="flex min-h-screen flex-col overflow-x-clip">
-      <main className="ds-main">
+      {/* Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. */}
+      <main ref={mainRef} className="ds-main relative z-0">
         <Hero stats={heroStats} />
 
-        <div className="overflow-hidden bg-[var(--ink)] py-6 text-[rgba(244,242,237,0.06)]">
-          <ScrollVelocityText text="SOFTWARE SOB MEDIDA" direction="left" />
-        </div>
-
         <NotebookStory projects={projects} onLayoutReady={onLayoutReady} />
 
         <Projects projects={projects} />
 
-        <SectionDivider variant="waveform" />
-
         <WorkModalities />
 
         <EngineeringWithAI />
 
         <LighthouseMetrics />
 
-        <SectionDivider variant="pulse" />
+        <div className="bg-[var(--paper)]">
+          <About />
 
-        <About />
-
-        <ExperienceDisclosure>
-          <Skills categories={skillCategories} />
-          <Experience experiences={experiences} />
-        </ExperienceDisclosure>
-
-        <div className="overflow-hidden bg-[var(--ink)] py-6 text-[rgba(244,242,237,0.05)]">
-          <ScrollVelocityText text="VAMOS CONSTRUIR" direction="left" />
+          <ExperienceDisclosure>
+            <Skills categories={skillCategories} />
+            <Experience experiences={experiences} />
+          </ExperienceDisclosure>
         </div>
 
         <Contact />
       </main>
-      <Footer />
+      <div className="relative z-10">
+        <Footer />
+      </div>
     </div>
   );
 }