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/components/Hero.tsx

@@ -1,8 +1,4 @@
-"use client";
-
-import { motion } from "motion/react";
 import Link from "next/link";
-import { useReducedMotion } from "@/app/hooks/useReducedMotion";
 import HeroSystem from "./cinematic/HeroSystem";
 
 const SOCIAL_LINKS = [
@@ -20,32 +16,43 @@ const SOCIAL_LINKS = [
   },
 ];
 
-export default function Hero() {
-  const shouldReduceMotion = useReducedMotion();
+/** Números reais, calculados em app/page.tsx a partir de public/portfolio-data.json (nada digitado à mão). */
+export type HeroStats = {
+  years?: number;
+  projects?: number;
+  demos?: number;
+};
+
+function statItems(stats?: HeroStats) {
+  if (!stats) return [];
+  return [
+    stats.years ? [String(stats.years), "anos de experiência"] : null,
+    stats.projects ? [String(stats.projects), "projetos publicados"] : null,
+    stats.demos ? [String(stats.demos), "com demonstração online"] : null,
+  ].filter((item): item is [string, string] => item !== null);
+}
+
+export default function Hero({ stats }: { stats?: HeroStats }) {
+  const items = statItems(stats);
 
   return (
     <section
       id="home"
-      className="w-full bg-[var(--ink)] font-display text-[#f4f2ed]"
+      className="relative w-full overflow-hidden bg-[var(--ink)] font-display text-[#f4f2ed]"
     >
-      <motion.div
-        initial={shouldReduceMotion ? false : { opacity: 0, y: 8 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{
-          duration: shouldReduceMotion ? 0 : 0.45,
-          ease: "easeOut",
-        }}
-        className="mx-auto grid w-full max-w-[max(1400px,var(--shell))] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16"
-      >
+      <div className="hero-glow" aria-hidden="true" />
+      {/* Sem opacity:0 inicial: o título já vem visível no HTML (LCP). A entrada anima só a posição, em CSS. */}
+      <div className="hero-rise relative mx-auto grid w-full max-w-[max(1400px,var(--shell))] grid-cols-1 items-center gap-sp-8 px-sp-6 pt-[calc(var(--site-header-height)+32px)] pb-sp-10 lg:grid-cols-[minmax(0,53fr)_minmax(0,47fr)] lg:gap-sp-8 lg:px-sp-12 lg:pb-sp-16">
         <div className="min-w-0">
-          <p className="mb-sp-5 text-[14px] leading-[1.5] text-[rgba(244,242,237,.72)]">
+          <p className="mb-sp-5 flex items-center gap-sp-3 font-mono text-[11px] uppercase leading-[1.5] tracking-[0.14em] text-[rgba(244,242,237,.72)] sm:text-[12px]">
+            <span aria-hidden="true" className="h-2 w-2 bg-[var(--slash)]" />
             Evandro Fonseca Junior · Engenharia de software
           </p>
-          <h1 className="max-w-[700px] text-balance text-[34px] font-semibold leading-[1.05] tracking-[-0.045em] sm:text-[48px] xl:text-[60px]">
-            Sistemas sob medida para operações que não cabem em soluções
-            prontas.
+          <h1 className="max-w-[12.5em] text-balance text-[clamp(34px,1.6rem+2.4vw,88px)] font-semibold leading-[1.04] tracking-[-0.045em]">
+            Sistemas <span className="text-[var(--slash)]">sob medida</span> para
+            operações que não cabem em soluções prontas.
           </h1>
-          <p className="mt-sp-5 max-w-[600px] text-[16px] leading-[1.55] text-[rgba(244,242,237,.8)] lg:text-[18px]">
+          <p className="mt-sp-5 max-w-[34em] text-[clamp(16px,0.95rem+0.4vw,22px)] leading-[1.55] text-[rgba(244,242,237,.8)]">
             Projeto e desenvolvo sistemas web, aplicativos e integrações, do
             entendimento do negócio à arquitetura e à entrega em produção.
           </p>
@@ -53,9 +60,19 @@ export default function Hero() {
           <div className="mt-sp-6 flex flex-col gap-sp-3 sm:flex-row sm:flex-wrap sm:items-center">
             <Link
               href="/#contact"
-              className="inline-flex min-h-12 items-center justify-center bg-[var(--slash)] px-sp-4 py-sp-3 text-center text-[15px] font-semibold leading-6 text-[var(--ink)] no-underline transition-colors hover:bg-[#d9ff40] motion-reduce:transition-none sm:px-sp-6 sm:text-[16px]"
+              className="group inline-flex min-h-12 items-center justify-center gap-sp-3 bg-[var(--slash)] px-sp-4 py-sp-3 text-center text-[15px] font-semibold leading-6 text-[var(--ink)] no-underline transition-colors hover:bg-[#d9ff40] motion-reduce:transition-none sm:px-sp-6 sm:text-[16px]"
             >
               Conversar sobre meu projeto
+              <svg
+                aria-hidden="true"
+                viewBox="0 0 16 16"
+                className="h-4 w-4 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <path d="M2 8h11M9 3.5 13.5 8 9 12.5" />
+              </svg>
             </Link>
             <Link
               href="/cases"
@@ -72,6 +89,20 @@ export default function Hero() {
           <HeroSystem />
         </div>
         <div className="min-w-0 lg:col-start-1 lg:row-start-2">
+          {items.length > 0 && (
+            <dl className="mb-sp-6 flex flex-wrap gap-x-sp-8 gap-y-sp-4 border-t border-white/10 pt-sp-5">
+              {items.map(([value, label]) => (
+                <div key={label} className="flex flex-col-reverse">
+                  <dt className="text-[13px] leading-[1.4] text-[rgba(244,242,237,.64)]">
+                    {label}
+                  </dt>
+                  <dd className="font-mono text-[clamp(26px,1.2rem+0.9vw,40px)] font-semibold leading-none tracking-[-0.03em] text-[var(--slash)]">
+                    {value}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          )}
           <ul className="flex flex-wrap gap-x-sp-5 gap-y-sp-2 text-[14px] leading-[1.5] text-[rgba(244,242,237,.8)]">
             {["Sistemas web", "Aplicativos", "Integrações"].map((service) => (
               <li key={service} className="flex items-center gap-sp-2">
@@ -101,7 +132,7 @@ export default function Hero() {
             ))}
           </div>
         </div>
-      </motion.div>
+      </div>
     </section>
   );
 }