Redesign Instituto +Brasal — Stacks D, E e F (com referência) · v3

stack-{d|e|f}-.../
├── DESIGN.md                      # identidade visual do Instituto (JÁ EXISTE — copiar para cada stack)
├── referencia/
│   ├── motions-guia.md            # o guia de 17 motions (copiar o arquivo enviado)
│   ├── images/                    # screenshots da referência (conferência visual)
│   └── videos/                    # gravações de navegação (conferência de feel)
└── images/                        # assets do Instituto (preenchida no Passo 0 do prompt)

npx skills add vercel-labs/agent-skills
npx skills add greensock/gsap-skills
npx impeccable install

# REDESIGN COM REFERÊNCIA — INSTITUTO +BRASAL (HOME) — STACK D: EXECUÇÃO GSAP

## Fontes da verdade (nesta ordem; conflito entre elas = me pergunte antes)
1. DESIGN.md (raiz): identidade visual do Instituto (cores, fontes, espaçamento, elementos). Siga à risca, nada de inventar tokens.
2. ./referencia/motions-guia.md: catálogo de 17 motions da referência com prompts de implementação. É a especificação de motion deste projeto.
3. https://www.brasal.com.br/instituto/: conteúdo (textos verbatim, menu, seções). Imutável.
4. ./referencia/images/ e ./referencia/videos/: conferência visual de feel e ritmo da referência.

## Contexto
Redesign da home em Next.js 15 (App Router) + TypeScript + Tailwind. SOMENTE a home nesta fase.
Conteúdo 100% idêntico ao site atual. Identidade 100% do DESIGN.md. Motion 100% conforme o guia.

## Engine (conforme o guia — uma engine por domínio)
- GSAP 3.13+ + @gsap/react + ScrollTrigger + SplitText: espinha dorsal (reveals, timelines, split, pin/scrub).
- Framer Motion (pacote motion): SOMENTE micro-UI (menu overlay, banner de cookies, estados de formulário, hover de CTAs).
- Lenis: smooth scroll global, sincronizado conforme o Prompt 0 do guia.
- Embla Carousel: timeline horizontal e carrosséis.
Leia a seção "Armadilhas clássicas" do guia ANTES de escrever qualquer componente e siga todas: useGSAP com scope, cleanup do Lenis em 3 passos, gsap.matchMedia, ScrollTrigger.refresh() pós-load, autoSplit pós-fontes, autoAlpha contra FOUC, título do hero animado uma única vez.

## Passo 0 — Infraestrutura
Execute o PROMPT 0 do guia (./referencia/motions-guia.md) exatamente como especificado: SmoothScrollProvider com Lenis + sincronização ScrollTrigger + cleanup completo, lib/gsap.ts com plugins registrados, hook usePrefersReducedMotion, layout.tsx atualizado.

## Passo 1 — Inventário e assets
1. Acesse https://www.brasal.com.br/instituto/ e extraia o conteúdo REAL da home (textos verbatim, ordem das seções, itens de menu com URLs).
2. Baixe para ./images/: logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), imagens institucionais e dos 3 eixos, ODS (4-ods.jpg), capas dos 5 relatórios, e TODOS os logos de instituições e parceiros (brand-*.png, Logo-*.jpg). Gere o favicon a partir do logo.
3. Motion 5 (vídeo de fundo do hero): o arquivo institucional ainda não foi entregue. Implemente o componente pronto para /hero.webm + /hero.mp4 conforme o guia, com FALLBACK ativo de imagem com zoom lento (Ken Burns, scale 1.0→1.06 em loop suave) usando uma foto institucional. Troca para o vídeo deve exigir só a adição dos arquivos em /public.

## Passo 2 — Build por seção (conteúdo do site atual + motion do guia)
Implemente a home nesta ordem de seções, aplicando o motion indicado com o PROMPT correspondente do guia, parametrizado com o conteúdo real:

1. Header: logo + menu completo atual (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [Brasal Refrigerantes, Incorporações, Veículos, Combustíveis, Energia, Corretora, SIA Park Hotel] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato) → MOTION 1 (overlay fullscreen com stagger; dropdowns viram grupos dentro do overlay) + MOTION 16 nos CTAs.
2. Banner de cookies → MOTION 2, componente pronto porém DESATIVADO por flag; me apresente o texto LGPD para aprovação antes de ativar.
3. Hero Edital 2026 — Programa Vamos Juntos (texto atual + CTA "Confira o Edital 2026 / Clique aqui") → MOTIONS 3+4+5 em timeline única (o 4 substitui o tween do 3; título anima UMA vez) + fundo conforme Passo 1.3.
4. "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" (parágrafo atual + CTAs "Mais sobre o Instituto" e "Conheça o Programa") → MOTION 10 nos blocos de texto + MOTION 12 (parallax multicamadas) nas fotos institucionais.
5. Vídeo: https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np → facade lazy (thumbnail + play, iframe só no clique) com reveal padrão 7/10 na moldura.
6. EIXOS DE ATUAÇÃO (3 cards, textos atuais, "Saiba+") → MOTION 7 (cascata + hover zoom).
7. Números de impacto ("Desde a sua criação, geramos uma rede de impacto de"): Doamos +181.100 itens · Beneficiamos 434.100 pessoas · Instituições apoiadas + de 480 projetos · Regiões administrativas no DF, GO e MG → MOTION 9 (contadores). ATENÇÃO: a home atual tem dois blocos de contadores divergentes (65.100/269.100 vs 181.100/434.100); use os valores desktop e me reporte a divergência no final.
8. TRANSPARÊNCIA (5 relatórios com links para os PDFs atuais) → MOTION 6 (timeline horizontal 2021→2025 com Embla). Se julgar o MOTION 11 mais adequado ao conteúdo, justifique e registre a escolha.
9. ODS DA ONU (texto atual + 4 ODS com descrições) → MOTION 8 (seção pinada; cada ODS é um step). Teste o pin com Lenis com cuidado, conforme o guia.
10. INSTITUIÇÕES APOIADAS (~27 logos) → MOTION 7 em grid com stagger.
11. PARCEIROS QUE SOMAM → MOTION 14 (marquee infinito pausável no hover).
12. MAPA antes do footer: iframe Google Maps (q="SIA Trecho 1 Lote 630 a 780, Bloco 5, Edifício Praça Capital, Sala 318, Brasília - DF, 71200-011", output=embed, lazy) → reveal padrão 10.
13. Footer (conteúdo atual: Institucional Brasal, (61)3462-8077, endereço, institutomaisbrasal@brasal.com.br, Seg–Sex 08:00–18:00, redes, menu, copyright) → MOTION 16 nos links; MOTION 14 decorativo só se o DESIGN.md comportar.
14. Global: MOTION 17 ADAPTADO (sem i18n, site só pt-BR; implemente apenas o fade de transição de rota, preparado para as futuras páginas internas). MOTION 13 (frame sequence) é OPCIONAL: se identificar uma aplicação de alto valor (ex.: emblema na seção de impacto), me proponha antes de implementar; caso contrário, registre "não aplicado" e o motivo.

## Regras transversais
- prefers-reduced-motion em TODOS os motions (via hook do Prompt 0), com versão estática digna.
- Animar apenas transform/opacity (autoAlpha); nada de layout thrashing; 60fps no mobile (gsap.matchMedia para simplificar animações em telas pequenas).
- Nada de conteúdo inventado; dúvida sobre texto = me pergunte.
- Identidade: qualquer cor, fonte ou raio fora do DESIGN.md é bug.

## Entrega e validação
- `npm run dev` com a home completa e responsiva (mobile-first).
- ./images/ organizada; DESIGN.md intocado (se achar que ele precisa evoluir, proponha a mudança, não aplique).
- TABELA DE CONFORMIDADE ao final: Motion do guia → seção onde foi aplicado → status (implementado / adaptado / não aplicado + motivo).
- Lista de todos os ScrollTriggers criados (seção → efeito → cleanup ok).
- Reporte da divergência dos contadores.

1. /impeccable critique
   (aplicar TODAS as correções antes de seguir)

2. "Confira a home contra os vídeos em ./referencia/videos/: para cada motion
   implementado, o feel está equivalente ao da referência (ritmo, easing,
   overlap da timeline)? Liste as diferenças por severidade e corrija."

3. /impeccable polish

4. "Passe de performance GSAP: cleanup de todos os ScrollTriggers e do Lenis
   (3 passos), gsap.matchMedia para mobile e reduced-motion,
   ScrollTrigger.refresh() após load de imagens/fontes, will-change só onde
   necessário, teste do pin do Motion 8 com Lenis. 60fps no mobile."

npx skills add vercel-labs/agent-skills
npx skills@latest add emilkowalski/skills
npx skills add 199-biotechnologies/motion-dev-animations-skill
npx skills add Leonxlnx/taste-skill

# (título) REDESIGN COM REFERÊNCIA — INSTITUTO +BRASAL (HOME) — STACK E: CRAFT & FEEL

## Diretriz específica desta stack (inserir após o bloco "Engine")
- Diais do Taste Skill: DESIGN_VARIANCE conforme o DESIGN.md (não invente identidade), MOTION alto, DENSITY conforme o DESIGN.md.
- Nas partes Framer Motion (motions 1, 2, 15, 16), aplique os padrões de produção da skill de animações do motion.dev: springs com física coerente, AnimatePresence com exit correto, variants com stagger, reduced-motion.
- Em CADA motion GSAP implementado, faça um passe de feel antes de dar por pronto: easing e duração julgados pelos critérios da skill de review de animações (nada de ease default sem justificativa; overlaps de timeline com propósito).
- Anti-clone: o feel segue a referência, a identidade segue o DESIGN.md. Se algum componente sair visualmente idêntico ao site referência (além da gramática de motion), diferencie mantendo a mesma escola.

1. "Revise TODAS as animações com a skill de review: easing, duração, física
   dos springs (motions 1/2/15/16), overlaps das timelines GSAP, coreografia
   de scroll. Compare com os vídeos em ./referencia/videos/. Liste por
   severidade e corrija."

2. "Aplique o checklist anti-slop do Taste Skill na home inteira. O que
   estiver genérico, corrija DENTRO dos limites do DESIGN.md (não invente
   tokens novos)."

3. "Verificação anti-clone: liste os elementos visualmente idênticos ao site
   referência (além da gramática de motion) e diferencie cada um mantendo a
   mesma escola de design."

4. "Passe final de micro-interações: hover de botões, cards, itens do menu
   overlay e links do footer, tudo com física de spring, nada de transition
   linear de CSS."

npx skills add vercel-labs/agent-skills
npx skills add kylezantos/design-motion-principles
npx skills add LottieFiles/motion-design-skill

Antes de escrever qualquer código, use a skill de princípios de motion no
modo Create para gerar o PLANO DE COREOGRAFIA da home, em MOTION-PLAN.md:

Insumos (leia todos):
- DESIGN.md (raiz): identidade e tokens. Inegociável.
- ./referencia/motions-guia.md: os 17 motions da referência com técnica e
  parâmetros. Inegociável.
- ./referencia/videos/: feel e ritmo da referência.
- Mapa motion → seção definido para este projeto:
  Header→1+16 · Cookies→2 (condicional) · Hero→3+4+5 · "Prazer, nós somos"→10+12 ·
  Vídeo YouTube→reveal 7/10 + facade · Eixos→7 · Números→9 · Transparência→6 (ou 11,
  justificando) · ODS→8 (4 steps) · Instituições→7 grid · Parceiros→14 ·
  Mapa→10 · Footer→16 (+14 opcional) · Global→17 sem i18n; 13 opcional.

O plano deve conter, por seção: intenção narrativa do movimento (o que o
usuário deve sentir/entender), motion do guia aplicado com os parâmetros
(duração, easing, stagger, trigger points), como a seção se conecta à
anterior e à seguinte (transições sem corte seco), e comportamento em
reduced-motion. Aplique os 12 princípios da skill de motion design ao
justificar cada decisão. Termine com a linha do tempo global do scroll
(mapa de pins, scrubs e reveals ao longo da página).
Não escreva código ainda.

# (título) REDESIGN COM REFERÊNCIA — INSTITUTO +BRASAL (HOME) — STACK F: PRINCÍPIOS & COREOGRAFIA

## Diretriz específica desta stack (inserir após o bloco "Engine")
- O MOTION-PLAN.md (raiz) é o roteiro de coreografia aprovado: implemente
  cada seção conforme o plano. Divergência necessária durante o build =
  atualize o MOTION-PLAN.md com a justificativa, não improvise em silêncio.
- Cada decisão local de movimento deve ser defensável por um dos 12
  princípios da skill de motion design; movimento sem propósito narrativo
  não entra.
- As transições entre seções são requisito de primeira classe: a página
  deve ler como uma peça única, não como 11 blocos animados isolados.

- MOTION-PLAN.md atualizado refletindo o que foi de fato implementado.

1. "Rode a auditoria da skill de princípios de motion (modo Audit) na home,
   com as 3 lentes. Gere o relatório e corrija os problemas de severidade
   alta e média."

2. "Verificação de coesão: percorra a home do topo ao footer e avalie as
   COSTURAS entre seções (a transição hero→institucional, o entra-e-sai do
   pin das ODS com Lenis, o ritmo entre contadores e transparência). A
   página deve parecer uma coreografia única. Corrija o que destoar."

3. "Rastreabilidade: para cada item do MOTION-PLAN.md, aponte onde está
   implementado. Item sem implementação = implementar ou remover do plano
   com justificativa. Atualize a tabela de conformidade."