fix(home): transicoes estaveis, diagrama desenhado na entrada, rolagem suave nos links e transicao entre paginas

- visibilidade de cada cena calculada pela posicao da rolagem: nada vaza antes
  da passagem nem aparece atras de transparencias depois
- sem scale em ancestrais do canvas do notebook (tela desalinhada)
- IA -> qualidade em 2D (abertura em portas); a rotacao 3D adiava a pintura
  do diagrama, que agora se desenha junto com a entrada
- iris com aceleracao gradual; hero para de desenhar ao fim do mergulho
- links internos rolam suavemente ate o fim da transicao do destino
- navegacao entre paginas com ViewTransition (app/template.tsx)

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

app/components/cinematic/HeroField.tsx

@@ -30,6 +30,8 @@ export default function HeroField() {
   const [visible, setVisible] = useState(false);
   const [ready, setReady] = useState(false);
   const [failed, setFailed] = useState(false);
+  // fim do mergulho: a cena já está no escuro e o hero se dissolve; parar o desenho poupa a GPU para o notebook
+  const [done, setDone] = useState(false);
 
   useEffect(() => {
     const section = rootRef.current?.closest<HTMLElement>(".hero");
@@ -42,6 +44,7 @@ export default function HeroField() {
       const p = Math.min(1, Math.max(0, -rect.top / span));
       progressRef.current = p;
       section.style.setProperty("--hero-p", p.toFixed(4));
+      setDone(p >= 0.999);
     };
     const queue = () => {
       if (!frame) frame = requestAnimationFrame(update);
@@ -92,7 +95,7 @@ export default function HeroField() {
       {mount && !failed && (
         <Scene
           progressRef={progressRef}
-          visible={visible}
+          visible={visible && !done}
           onReady={handleReady}
           onError={handleError}
         />