🚧 Limites do laço

Novo aqui? Um screenshot é uma foto parada da tela num instante exato — pixel por pixel, congelado. É a base do laço que você aprendeu no módulo 5.3: o agente tira a foto, compara com o que devia estar ali, e ajusta o CSS até bater.

Imagine pedir pra alguém julgar se uma dança ficou boa comparando duas fotos: uma do início do movimento, outra do fim. Você vai ver as duas posições dos braços — mas não vai ver a trajetória, a velocidade, se o movimento foi suave ou truncado, se o timing bateu com a música. É exatamente essa a limitação do laço de screenshot: ele mostra estados, nunca a transição entre eles.

Legenda: as duas fotos (início e fim) são tudo que o laço de screenshot enxerga. Tudo que acontece entre elas — a curva do movimento — fica invisível para uma comparação de imagens.

Antes de falar do que falta, vale reforçar onde o laço é ótimo — porque a lição deste módulo não é "não confie no laço", é "saiba onde ele para". Tudo que é estado visual estático (a aparência da tela num instante parado, sem considerar o que veio antes ou depois) o laço compara com precisão de pixel.

Novo aqui? Animação CSS é uma mudança gradual de propriedade visual (posição, cor, tamanho) ao longo do tempo, controlada pelo navegador. Hover é o estado de um elemento quando o mouse passa por cima dele — normalmente disparando uma transição. Parallax é a técnica de mover camadas de fundo em velocidades diferentes da rolagem, criando sensação de profundidade.

São duas famílias de coisas que escapam do laço:

Legenda: a bolinha em movimento (ponto ciano pulsante) percorre uma curva suave — mas as duas câmeras só capturam início e fim. O "meio" do movimento, onde mora o easing, nunca vira imagem.

Não é falta de esforço do agente — é uma limitação de ferramenta. O screenshot automatizado captura a tela num instante único (um frame, um quadro parado). Para "ver" movimento de verdade, seria preciso capturar uma sequência de frames ao longo do tempo e depois interpretar a diferença entre eles — muito mais caro, mais lento, e ainda assim mais difícil de julgar "bonito" ou "feio" do que comparar duas imagens.

Quando a peça é movimento, a solução não é insistir em mais screenshots — é mudar de método: pedir pro agente (1) ler os valores exatos de CSS que controlam o movimento (duração, easing, delay), (2) explicar o que cada valor faz em palavras simples, e (3) abrir o navegador de verdade pra você observar o movimento acontecendo ao vivo, em vez de confiar só na comparação automática de imagens.

Preciso que você ajuste a animação do botão ""
no arquivo .

Antes de mexer, faça isto:
1. Leia o CSS atual da transição/animação desse elemento e me diga, em português simples,
   qual é a duração, o easing e o delay usados hoje.
2. Não confie só em screenshot pra validar o resultado. Depois de editar, abra o navegador
   de verdade (ou peça pra eu abrir) e descreva o que observou no movimento ao vivo:
   ficou suave? ficou rápido demais? travou (jank) em algum ponto?
3. Só then ajuste o valor - o objetivo é .

Ao final, me diga exatamente qual linha de CSS mudou e por quê.

Vale fechar com o número que vai acompanhar o resto desta trilha: o laço de screenshot leva um front-end de genérico a sólido — algo como os primeiros 60% do caminho até "profissional". Os últimos 40% — movimento, timing, "feel", a diferença entre parecer produto caro e parecer template — ainda dependem de alguém olhando a tela de verdade e decidindo. Essa fronteira não é um defeito do laço, é onde a IA ajuda sozinha termina e onde entra o julgamento humano.

Legenda: a barra mostra os 60% que o laço automatizado cobre bem (estado visual) e os 40% finais, onde movimento e timing exigem alguém olhando a tela de verdade.