feat(story): reel scrollytelling scrubbed por scroll com palco WebGL 3D

app/components/cinematic/CinematicHome.tsx

@@ -9,6 +9,7 @@ import type {
 import Hero from "../Hero";
 import Projects from "../Projects";
 import { SectionLoading } from "../SectionLoading";
+import ScrollStory from "../story/ScrollStory";
 import CinematicSection from "./CinematicSection";
 
 const About = dynamic(() => import("../About"), {
@@ -49,7 +50,7 @@ export default function CinematicHome({
   skillCategories: PortfolioSkillCategory[];
 }) {
   return (
-    <div className="flex min-h-screen flex-col overflow-x-hidden">
+    <div className="flex min-h-screen flex-col overflow-x-clip">
       <main className="ds-main">
         <Hero />
 
@@ -58,6 +59,16 @@ export default function CinematicHome({
           <ScrollVelocityText text="SOFTWARE ENGINEERING" baseVelocity={-1.5} />
         </div>
 
+        {/* Reel scrollytelling: timeline scrubbed pelo scroll (estilo product-page) */}
+        <ScrollStory
+          projectsCount={projects.length}
+          experiencesCount={experiences.length}
+          skillsCount={skillCategories.reduce(
+            (acc, cat) => acc + cat.skills.length,
+            0,
+          )}
+        />
+
         <CinematicSection effect="parallax-depth">
           <About />
         </CinematicSection>