feat(hero): hero redesenhada, titulo visivel no HTML (LCP) e cena 3D so depois do idle

- titulo fluido (clamp ate 88px) com destaque em 'sob medida', eyebrow mono, seta no CTA e brilho de fundo
- numeros reais na hero (anos de experiencia, projetos publicados, demos online) calculados em app/page.tsx a partir dos dados do portfolio
- remove o opacity:0 inicial do motion: o texto nasce visivel; a entrada anima so a posicao (CSS)
- HeroSystem monta a cena Three.js via requestIdleCallback (timeout 2,5s), depois de pintar e hidratar o essencial
- capas decorativas (sem captura) escondidas no celular

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

app/page.tsx

@@ -1,10 +1,25 @@
 import { loadFeaturedProjects, portfolio } from "@/lib/portfolio-data";
 import CinematicHome from "./components/cinematic/CinematicHome";
 
+/** Anos de experiência vêm do próprio texto do portfólio ("5 anos de experiência"); sem o trecho, o número some. */
+function yearsOfExperience() {
+  const match = portfolio.personal.summary.match(/(\d+)\s+anos de experi/i);
+  return match ? Number(match[1]) : undefined;
+}
+
 export default async function Home() {
+  const projects = await loadFeaturedProjects();
   return (
     <CinematicHome
-      projects={await loadFeaturedProjects()}
+      heroStats={{
+        years: yearsOfExperience(),
+        projects: projects.length,
+        demos: projects.filter(
+          (project) =>
+            project.demoUrl && project.demoAvailability !== "unavailable",
+        ).length,
+      }}
+      projects={projects}
       experiences={portfolio.experiences}
       skillCategories={portfolio.skills.technical}
     />