{
  "name": "arapyau-design-system",
  "title": "Instituto Arapyaú — Design system 2026",
  "version": "2026.10.16",
  "description": "Style guide, variáveis de design e instruções para replicar o banner em shader, as transições com swup 4, a revelação de imagens, os hovers, os menus e a medição do site Arapyaú 2026 (HTML, CSS, JS + swup 4 + GSAP).",
  "resources": [
    {
      "uri": "arapyau://style-guide",
      "name": "Style guide e usabilidade",
      "mimeType": "text/markdown",
      "text": "# Instituto Arapyaú — Style guide 2026\n\n## 1. Princípios de usabilidade (prioridade em toda decisão)\n- Conteúdo primeiro: cada página abre com um hero e um título claro; o que importa está visível sem precisar de interação.\n- Previsibilidade: o menu, o rodapé e os padrões de bloco são os mesmos em todas as páginas; Institucional leva à página principal da seção; Iniciativas não tem página própria (só abre os subitens). Cada item abre apenas os próprios subitens.\n- Movimento a serviço da leitura: animações curtas (≤ 1,2 s), nunca bloqueiam clique, rolagem ou leitura; nada de autoplay de som; tudo respeita \"reduzir movimento\".\n- Nunca prender a pessoa: se uma animação não terminar (aba em segundo plano, aparelho lento), ela é concluída automaticamente e a navegação segue.\n- Funciona sem JavaScript: links são links reais, conteúdo não depende de script para existir.\n- Acessível por padrão: contraste AA, foco sempre visível, alvos de toque ≥ 44 px, textos de leitura com tamanho mínimo real de 15–16 px, ordem de leitura igual à ordem visual.\n- Responsivo por proporção: acima de tablet tudo escala com a largura da tela; no mobile os blocos empilham e nenhum texto fica sobre imagem.\n\n## 2. Cores\n| Nome | Hex | Uso |\n|---|---|---|\n| Laranja | #ED7102 | Marca. Header, rodapé, moldura, overlay da transição |\n| Vinho | #8A264F | Títulos, divisórias, eyebrows, setas |\n| Verde | #00745D | Fundos de publicação, dia 1 da agenda |\n| Lima | #C1D83F | Bloco Fellows, cards de agenda |\n| Violeta | #443D91 | Ilustrações, fundo do shader |\n| Vermelho | #E74124 | Títulos de destaque em páginas internas, autor/data, chamadas por tag |\n| Azul | #1D1E55 | Texto sobre lima, foco |\n| Fundo | #EFF5CF | Páginas internas |\n| Pêssego | #FAD4B3 | Fundo editorial da Homepage e das iniciativas |\nBranco e preto completam. Branco pequeno sobre laranja não passa em contraste: só em títulos grandes ou negrito ≥ 19 px. Tags laranja sobre fundo claro usam #B85600.\n\n## 3. Tipografia\n- Display: Seiva Display Medium, caixa alta. Desktop 80/83 (títulos) e 52/54 (H2). Mobile (base 540) 48/50.\n- Texto: Seiva Regular 20/26 desktop; 27/34 em textos de abertura; Bold para CTA e menu.\n- Card: Seiva Display Medium 27/30, caixa alta. Eyebrow: 20/26, caixa alta, vinho.\n- Arquivo: Seiva variável (Fabio Haag Type) em woff2 + woff, um arquivo para todos os estilos. Eixos: wght 90–1000 (Regular 400 · Medium 550 · Bold 770) e opsz 12–48 (Texto 12 · Display 24 · Poster 48).\n- Aplicação: corpo com `font-variation-settings: \"opsz\" 12`; títulos/cards/eyebrows com `\"opsz\" 24` e peso 550 (Display Medium); destaques em 770. `font-optical-sizing: none` para o navegador não trocar o opsz sozinho.\n- Pré-carregar o woff2 roman; `font-display: swap`; fallback: fonte do sistema. Setas (→ ↓ ↗) não existem na Seiva: usar SVG.\n- Favorit é legado — consolidar em Seiva.\n\n## 4. Escala fluida\n- ≥ 1024 px: `--u: calc(100vw / 1920)`; toda medida do Figma vira `calc(N * var(--u))`. Fontes, margens, paddings, imagens e gaps mantêm a mesma proporção em qualquer largura.\n- < 1024 px: base mobile 540 — `--u: min(calc(100vw / 540), 1.25px)`.\n- Pisos de legibilidade: corpo `max(15px|16px, …)`; nunca usar a altura da tela como base (só para ajustes finos, como o hero da home no mobile).\n\n## 5. Espaçamento e grid\nEscala 15 · 30 · 60 · 90 · 120. Margem editorial 60 (30 mobile); near-bleed de imagem 30 (15 mobile).\nContainer 1800 = 12 × 122,5 + 11 × 30; spans 275 / 580 / 885 / 1190. Coluna de leitura 733/885. Cards 428 × 270, gap 30.\n\n## 6. Padrões de página\n- Hero de página: imagem 1860 × 842 + título branco 80 sobre laranja.\n- Intro em duas colunas: título vermelho (580) | texto vinho 27 (885).\n- Imagem + texto (1190 | 575) com seta \"↓\" que leva à próxima seção.\n- Carrosséis (publicações, artigos, imprensa, notícias, eventos): ordem preservada, setas com estado desativado, teclado ←/→, rolagem por gesto com snap, sem autoplay. Textos editoriais nunca viram carrossel.\n- Equipe: grade 6 → 3 → 2 colunas, retratos circulares. Conselhos em listas.\n- Linha do tempo: linha horizontal com marcos acima/abaixo no desktop; vira lista vertical no mobile.\n- FAQ: acordeão nativo (details/summary) — acessível por teclado e leitor de tela.\n- Agenda: duas colunas por dia, cards alternando tons, ação clara (\"Inscreva-se aqui\" / \"Evento fechado\").\n- Formulário: rótulos visíveis, autocomplete, validação no envio com mensagem anunciada e foco no campo com problema.\n\n## 7. Logo\n\"instituto\" + \"arapyaú\" + símbolo (anéis + 3 nós). Nunca deformar o lettering. Na transição só o símbolo se anima, usando o vetor original.\n\n## 8. Imagens\n- Fotos: JPEG recortado exatamente como no layout.\n- Ilustrações de poucas cores: convertidas para SVG vetorial (nitidez em qualquer tela, sem borrado).\n- Texturas pontilhadas: raster em resolução alta (vetorizar geraria arquivos enormes).\n- Sempre `alt` descritivo; decorativas com `alt=\"\"`.\n\n## 9. Favicon\nGIF animado 32×32 (pixel art 16×16 ampliada sem suavização, 13 KB, 60 quadros, paleta única de 48 cores) com 5 ilustrações coloridas — nunca fotos: veado, cacau, mapa do Brasil, urso da história e a figura da citação. Cada imagem fica 1,6 s; na troca, os pixels são tomados em ordem aleatória pela cor predominante da próxima imagem e reaparecem com as cores dela (12 quadros de 60 ms). Firefox anima o favicon; Chrome e Safari mostram o primeiro quadro. Único favicon: o GIF (navegadores que não animam usam o primeiro quadro). Ícone de tela inicial do iPhone: apple-touch-icon.png (180).\n\n## 10. Regras dos pixels\nEfeitos em pixels nunca usam opacidade parcial: a \"transparência\" é feita pela densidade de pixels acesos (pontilhado ordenado), cada pixel sempre 100% opaco.\nPixels REDONDOS em todas as transições (formação do símbolo na troca de página, fundo claro dos blocos, troca de ciclos, troca de depoimentos, anel de autoplay, hover das imagens de cards). Pixels QUADRADOS apenas no banner da home (shader) e nos hovers de links/fundos. No miolo das faixas em degradê os círculos crescem até se sobrepor, sem frestas.\n"
    },
    {
      "uri": "arapyau://efeitos",
      "name": "Efeitos, banner em shader e swup 4",
      "mimeType": "text/markdown",
      "text": "# Efeitos e funcionamento técnico\n\n## A. Banner da Homepage — floresta em shader (WebGL)\nTécnica: vídeos aéreos de floresta tocam ocultos (muted, inline) e cada quadro vira textura WebGL. Um fragment shader converte a imagem em tempo real para a paleta da marca:\n1. Pixelização (cada célula = 2 px de tela).\n2. Classificação de cada pixel por luminância/saturação → claro (lima #C6DC3C) ou escuro (violeta #41389A), com contraste 1,7 e limiar 0,63.\n3. Pontilhado por ruído (dither) para dar textura de gravura.\n4. Detecção de estradas/água por cor e forma, e \"nuvens\" em linhas lilás geradas por ruído fractal que descem lentamente (sensação de câmera subindo); círculos surgem nos cruzamentos.\n5. Troca de clipe a cada 20 s por ondas circulares em pixels; ordem dos clipes sorteada a cada visita; o clipe \"final\" é sempre o último.\nUsabilidade/performance: configuração fixa (sem painel), pausa fora da tela e com a aba oculta, um poster pontilhado estático cobre o carregamento, falta de WebGL ou \"reduzir movimento\" mostram só o poster. No mobile o bloco ocupa a tela inteira abaixo do header.\nIntegração com a transição: quando a home é o destino, um quadro real do shader é capturado e usado como a foto dentro da máscara do símbolo.\n\n## B. Navegação com swup 4\nComo funciona: o swup intercepta cliques em links internos, busca a próxima página por fetch, troca apenas o container `#swup` e atualiza URL, título e histórico. Header, menu e o overlay da transição ficam fora do container e persistem.\nURLs sem .html: cada página é uma pasta com index.html (/quem-somos/, /fellows/...); links e arquivos usam caminhos relativos (meta site-root + window.SITE_ROOT no JS), então o site roda em qualquer subpasta; links fora do container do swup são convertidos para absolutos ao carregar. Site 100% estático (HTML, CSS, JS).\nCiclo de vida (hooks):\n- `visit:start` → fecha menus, marca `aria-busy`.\n- `animation:out:await` (substituído) → animação de saída; roda em paralelo ao download da página.\n- `page:load` → lê o `[data-hero] img` do HTML de destino e pré-decodifica (limite 1,5 s).\n- antes de `content:replace` → destrói listeners, carrosséis, ScrollTriggers, revelações e o shader da página anterior.\n- `content:replace` → inicia cada módulo uma única vez (carrossel, abas, formulários, shader).\n- `animation:in:await` (substituído) → máscara + foto + handoff; depois fade up e revelações.\n- `scroll:top` / `scroll:anchor` (substituídos) → posicionamento pelo ScrollSmoother.\n- `page:view` → page_view do GA4.\n- `visit:end` → foco no `<main>`, anúncio \"Página carregada\" em `aria-live`, libera travas.\n- `fetch:error` / `visit:abort` → restaura overlay e escala; o link segue como navegação normal.\nOpções: `containers: ['#swup']`, `animationSelector: false`, links com `download`, `target` ou `data-no-swup` são ignorados.\n\n## C. Transição de página — \"Da rede ao próximo olhar\" (sutil, ≈ 3 s)\nSaída (≈ 1,1 s): a página recua (scale .92, opacity .5) e o laranja cobre; o símbolo do logo aparece primeiro sutil (linhas brancas com só 22% dos pixels acesos, opacidade 100%) e uma nuvem de pixels — o mesmo efeito do hover dos links — preenche as linhas de branco em 0,5 s; os 3 nós aparecem com leve overshoot.\nEntrada (≈ 1,95 s): a maior área fechada do símbolo revela a foto **no centro da tela**; máscara e foto crescem juntas (power3.inOut, 1,3 s), com o centro deslizando do meio da tela até o centro do hero real, a foto sempre dentro da máscara (cover); o símbolo some; acomoda e o overlay sai sem salto; o conteúdo entra em fade up.\nFoto usada: a imagem do topo da página seguinte. Se o destino for a home, a máscara mostra o próprio canvas do shader ao vivo (copiado quadro a quadro para dentro do recorte do símbolo, pixels sem suavização). Se a navegação começou num card (artigo, notícia, evento, publicação, imprensa), a foto do card sai do lugar dele, vai para o centro e é ela que cresce até a abertura da página seguinte, dissolvendo suavemente na foto real no fim.\nMesma coreografia no mobile. Reduzir movimento: fade curto. Cada fase tem limite de tempo e se conclui sozinha se travar.\n\n## D. Imagens: máscara + parallax (a cada passagem)\n- Descendo: o recorte abre de baixo para cima e a foto desce/encolhe (1,25 → 1,08) até se encaixar. Subindo: invertido — o recorte abre de cima para baixo e a foto sobe até o lugar. Ao sair da tela, rearma.\n- Rolagem: a foto se desloca até ~26 px proporcional à velocidade (`ScrollTrigger.getVelocity()` + `gsap.quickTo`) e volta ao lugar quando a rolagem para.\n\n## E. Textos: fade a cada passagem\n`[data-fade]` com `ScrollTrigger.batch`: descendo, entram de baixo para cima (y 40 → 0); subindo, de cima para baixo (y −40 → 0); 0,9 s expo-out, cascata de 80 ms; ao sair da tela, rearmam. Sem JS nada fica oculto.\n\n## F. Hover de links — linha em nuvem de pixels\nVale para todos os links de texto. Uma única máscara (um canvas fixo, um só loop) desenha uma linha de 2 px por linha de texto, com a largura exata do texto em cada linha, na cor do próprio texto. Uma nuvem de pixels de 3 px, agrupada em nuvens grandes e aleatórias, percorre todas as linhas do link como uma tira contínua até ficar sólida; ao sair, desfaz. Foco por teclado mostra o mesmo efeito.\nÍcones sociais: brancos; no hover a nuvem preenche o fundo em branco e o ícone faz fade para laranja.\nCréditos do rodapé: a nuvem preenche o fundo do link em branco e o texto faz fade para vinho.\n\n## F2. Hover das imagens de cards (só com mouse)\nSobre a foto: zoom dentro do recorte com swing (back.out) e o símbolo do logo (no dobro do tamanho, cortando nas bordas) formado por pontos redondos brancos pequenos (grade de 4 px) — 45% dos pontos do símbolo acesos (padrão Bayer 4×4), sempre com opacidade 100%. Cada pixel entra com swing próprio: atraso aleatório 0–0,28 s e duração 0,22–0,42 s (tempos próximos). O ciclo forma (0,7 s), fica (1,3 s), desfaz (0,45 s) e recomeça em outra posição; a posição parte do ponto onde o mouse entrou, dentro da faixa de ±25%/±20% do centro. Clique: o símbolo some com fade + zoom rápido e a transição começa a partir da foto do card. No toque não há hover: o toque vai direto para a transição.\n\n## G. Menus\n- Desktop: passar o mouse sobre Institucional/Iniciativas faz o header crescer por cima do conteúdo e revelar os subitens (0,7 s power3.inOut, sem reiniciar ao mover entre itens); clicar no item pai abre a página principal da seção; fecha ao sair, clicar fora, Esc ou escolher um subitem.\n- Toque: 1º toque abre o submenu, 2º navega; fecha ao rolar, tocar fora ou escolher um subitem.\n- Mobile: tela laranja abre como onda circular a partir do botão (0,8 s power3.inOut); itens sobem em cascata; foco preso e Esc.\n\n## H. Faixa de newsletter e chamadas por tag\nSem popup. Acima do rodapé de todas as páginas (menos Contato, que já tem o formulário) fica a faixa \"Acompanhe nossos projetos\" no modelo das faixas de depoimento dos fellows: ilustração + cor, texto à direita e link para o cadastro.\nNo fim de notícias e publicações, o bloco `[data-tag-cta]` lê as tags do conteúdo: com \"restauração\" chama para Restauração Florestal; com \"sistemas alimentares\", para Sistemas Alimentares; sem nenhuma das duas, não aparece. É um convite para a página da iniciativa, não uma lista de conteúdos relacionados.\nFellows: a faixa de depoimentos não gira; a cada carregamento uma das faixas é sorteada (`[data-random-one]`), evitando repetir a ilustração da newsletter logo abaixo.\n\n## H2. Leitor de publicações\nNa página de uma publicação, a capa abre um leitor dentro da própria página: o bloco verde cresce para a largura do artigo (FLIP com GSAP) e as páginas do PDF, renderizadas pelo PDF.js, viram girando pela lombada. Setas, ← → e Esc; miniaturas abrem na página certa; \"Baixar PDF\" sempre disponível. O PDF.js só carrega quando a pessoa abre a leitura.\n\n## H3. Quem somos — blocos empilhados\nCada bloco para no topo (ou quando seu fim chega ao fim da tela, se for mais alto) e o próximo sobe por cima; o de baixo recua de leve (escala 0,94). Feito com pin do ScrollTrigger; com \"reduzir movimento\", rolagem comum.\n\n## I. Medição — GA4 (estratégia única: manual)\n`gtag('config', ID, { send_page_view: false })` e desativar page views por histórico no Enhanced Measurement. 1 page_view inicial + 1 por navegação concluída (`page:view`), com page_location, page_title e page_referrer corretos. Prefetch, cancelamento ou erro = 0. Consent Mode v2 negado por padrão. Aceite no DebugView: inicial, navegação e voltar/avançar; testar sem JS e com consentimento negado.\n\n\n## L. Fellows: ciclos e depoimentos\n- Ciclos (2026–2027 · 2023–2025 · 2021–2023) são abas acessíveis (setas, Home/End); só o ciclo ativo aparece. Clicar durante uma troca encerra a atual e começa direto a nova. Na troca, uma faixa de pixels redondos em degradê (densidade, pixels 100% opacos na cor do fundo) desce pela área em 1,3 s: acima dela já é o ciclo novo, abaixo ainda o anterior; a altura acompanha.\n- Depoimentos (4) em loop automático a cada 6 s, marcados por um anel de autoplay: círculo só com borda branca (sem fundo) que se completa em pixels quadrados que nascem pequenos e crescem, em volta do botão pausar. Hover/foco congelam o anel onde estiver; ao sair, volta a contar; cheio → troca e recomeça. Fora da tela, pausa. Troca: o bloco atual some num gradiente de pixels (esquerda → direita) misturado à nuvem, revelando o próximo que já está por trás; o texto do próximo surge pela mesma máscara de nuvem em pixels. Hover ou foco pausam o relógio, mas uma troca iniciada sempre termina. Botão de pausa e pontos de navegação; fora da tela e com \"reduzir movimento\", sem autoplay.\n\n## M. Formulário de contato\nSem outline. Cada campo tem uma barra inferior vinho que cresce com a largura do texto digitado; o textarea cresce em altura com o texto e a barra acompanha. Botão Enviar: fundo em nuvem de pixels branca a partir do ponto de entrada do mouse, texto vinho.\n\n## N. FAQ e \"Conheça nosso olhar\"\nHover nos títulos do FAQ (pixel de 4 px) e nos links de \"Conheça nosso olhar\" (home, pixel de 1 px): fundo laranja com 10% dos pixels acesos (Bayer), opacidade 100%, formado em nuvem a partir do ponto de entrada. Acordeões: só uma pergunta aberta por vez; abrem (0,5 s) e fecham (0,42 s) animando altura e espaçamento juntos (sem salto no fim); a pergunta aberta mantém o fundo do hover aceso.\n\n## O. Links\nNenhum link tem sublinhado nativo: a única linha é a do hover em nuvem de pixels. Links dentro de texto corrido ficam em vinho para continuarem identificáveis.\n\n## P. Laboratório do shader (design system)\nA página de design system tem uma instância própria do shader da floresta com todos os ajustes (pixel, pontilhado, tom, detecção, nuvens, tempo, cores) ao vivo e controles minimalistas (cena anterior, pausar/continuar, próxima cena). \"Salvar\" grava em `config/shader-lab.json` — um único arquivo para todos que acessarem — via `POST /api/shader-config` no servidor local `serve.py`; em hospedagem estática o botão baixa o `shader-lab.json` para ser colocado em `config/`. Valores são validados contra `config/shader-schema.json`. A home não muda: usa a configuração fixa de `js/forest.js` até que se decida aplicar a do laboratório.\n\n## Q. Conteúdos › todos: filtros\nSelects personalizados (listbox acessível): fundo claro, texto vinho em caixa alta, linhas vinho, item ativo em lima, seta ↓ que gira ao abrir; abre com recorte de cima para baixo. Filtram os cards por tema e tipo (display none / padrão), com contagem anunciada para leitores de tela e mensagem quando nada corresponde. A busca por texto é visual por enquanto.\n\n## R. Fundo claro dos blocos\nAo entrar, a cor clara do bloco sobe da base da tela numa faixa de pixels em degradê (pixel de 8 px, opacidade 100%); o laranja da página permanece."
    },
    {
      "uri": "arapyau://variaveis",
      "name": "Variáveis de design",
      "mimeType": "application/json",
      "text": "{\n  \"cor\": {\n    \"laranja\": \"#ED7102\",\n    \"vinho\": \"#8A264F\",\n    \"verde\": \"#00745D\",\n    \"lima\": \"#C1D83F\",\n    \"violeta\": \"#443D91\",\n    \"vermelho\": \"#E74124\",\n    \"azul\": \"#1D1E55\",\n    \"fundo\": \"#EFF5CF\",\n    \"pessego\": \"#FAD4B3\",\n    \"branco\": \"#FFFFFF\",\n    \"preto\": \"#000000\"\n  },\n  \"fonte\": {\n    \"familia\": \"Seiva (variável)\",\n    \"arquivos\": [\n      \"SeivaVariable.woff2\",\n      \"SeivaVariable.woff\",\n      \"SeivaVariable-Italic.woff2\",\n      \"SeivaVariable-Italic.woff\"\n    ],\n    \"pesos\": {\n      \"regular\": 400,\n      \"medium\": 550,\n      \"bold\": 770\n    },\n    \"opsz\": {\n      \"texto\": 12,\n      \"display\": 24,\n      \"poster\": 48\n    }\n  },\n  \"tipo\": {\n    \"desktop\": {\n      \"display\": \"80/83\",\n      \"h2\": \"52/54\",\n      \"card\": \"27/30\",\n      \"texto\": \"20/26\",\n      \"abertura\": \"27/34\"\n    },\n    \"mobile540\": {\n      \"display\": \"48/50\",\n      \"card\": \"27/30\",\n      \"texto\": \"20/26\",\n      \"rodape\": \"15/20\"\n    }\n  },\n  \"espaco\": [\n    15,\n    30,\n    60,\n    90,\n    120\n  ],\n  \"layout\": {\n    \"baseDesktop\": 1920,\n    \"baseMobile\": 540,\n    \"quebra\": 1024,\n    \"unidadeDesktop\": \"calc(100vw / 1920)\",\n    \"unidadeMobile\": \"min(calc(100vw / 540), 1.25px)\",\n    \"margem\": {\n      \"desktop\": 60,\n      \"mobile\": 30\n    },\n    \"sangria\": {\n      \"desktop\": 30,\n      \"mobile\": 15\n    },\n    \"container\": 1800,\n    \"colunas\": 12,\n    \"gutter\": 30,\n    \"leitura\": [\n      733,\n      885\n    ]\n  },\n  \"movimento\": {\n    \"curva\": \"expo.out\",\n    \"transicaoMs\": 3050,\n    \"fases\": {\n      \"saida\": [\n        0,\n        1100\n      ],\n      \"simboloBase\": [\n        200,\n        550\n      ],\n      \"simboloNuvem\": [\n        450,\n        950\n      ],\n      \"entradaRevela\": [\n        0,\n        400\n      ],\n      \"entradaCresce\": [\n        450,\n        1750\n      ],\n      \"acomoda\": [\n        1750,\n        1950\n      ]\n    },\n    \"fadeUp\": {\n      \"y\": 40,\n      \"duracao\": 0.9,\n      \"cascata\": 0.08\n    },\n    \"mascaraImagem\": {\n      \"escalaInicial\": 1.25,\n      \"escalaFinal\": 1.08,\n      \"duracao\": 1.4\n    },\n    \"parallaxVelocidadeMaxPx\": 26,\n    \"hoverLinhaPx\": 2,\n    \"hoverPixelPx\": 3,\n    \"rolagemSuave\": 1.1,\n    \"hoverCardPixels\": {\n      \"densidade\": 0.2,\n      \"pixelPx\": 5,\n      \"padrao\": \"Bayer 4x4\",\n      \"opacidade\": 1\n    },\n    \"hoverCardZoom\": {\n      \"escala\": 1.2,\n      \"curva\": \"back.out(1.7)\"\n    }\n  },\n  \"shader\": {\n    \"pixel\": 2,\n    \"contraste\": 1.7,\n    \"brilho\": 0.02,\n    \"limiar\": 0.63,\n    \"dither\": 0.64,\n    \"clipeSegundos\": 20,\n    \"trocaSegundos\": 2.4,\n    \"claro\": \"#C6DC3C\",\n    \"escuro\": \"#41389A\",\n    \"lilas\": \"#9087CC\",\n    \"claroNuvem\": \"#D8E3A3\"\n  }\n}"
    }
  ],
  "prompts": [
    {
      "name": "transicao-por-rota",
      "description": "Aplicar a transição do símbolo a uma nova rota",
      "messages": [
        {
          "role": "user",
          "content": {
            "type": "text",
            "text": "Usar o vetor original do símbolo do logo Arapyaú; transição sutil de ≈3 s: a página recua, o símbolo aparece sutil e é preenchido de branco por uma nuvem de pixels rápida, os 3 nós aparecem; o primeiro circuito revela a foto no centro da tela; máscara e foto crescem juntas do centro até a posição real do hero; se a origem for um card, a foto do card vai ao centro e cresce até a abertura da página seguinte, dissolvendo na foto real; limite de tempo em cada fase; respeitar reduzir movimento."
          }
        }
      ]
    },
    {
      "name": "nova-pagina",
      "description": "Criar uma nova página no sistema",
      "messages": [
        {
          "role": "user",
          "content": {
            "type": "text",
            "text": "Criar uma página HTML/CSS/JS do Instituto Arapyaú seguindo o style guide: escala fluida pela largura (1920 no desktop, 540 no mobile); um único [data-hero] no topo do #swup; títulos Seiva Display caixa alta; blocos editoriais com data-fade; imagens em .rv > img[data-reveal]; repetições como carrossel sem autoplay; ilustrações de poucas cores em SVG; acessibilidade AA; nenhum texto sobre imagem no mobile."
          }
        }
      ]
    },
    {
      "name": "banner-shader",
      "description": "Adaptar o banner em shader",
      "messages": [
        {
          "role": "user",
          "content": {
            "type": "text",
            "text": "Manter o hero da home como floresta em shader WebGL: vídeos ocultos como textura, conversão para lima/violeta com pontilhado, nuvens lilás, troca por ondas em pixels; sem painel, atalhos ou parâmetros; pausar fora da tela; poster estático como fallback e para reduzir movimento; tela cheia no mobile."
          }
        }
      ]
    },
    {
      "name": "hover-nuvem",
      "description": "Aplicar o hover em nuvem de pixels",
      "messages": [
        {
          "role": "user",
          "content": {
            "type": "text",
            "text": "Em links sobre fundo escuro/laranja: linha branca de 2 px que se preenche com pixels agrupados em nuvens grandes e aleatórias até ficar sólida; desfaz ao sair; mesmo efeito em 2D no fundo dos ícones sociais, invertendo a cor do ícone."
          }
        }
      ]
    },
    {
      "name": "ga4",
      "description": "Ligar o GA4",
      "messages": [
        {
          "role": "user",
          "content": {
            "type": "text",
            "text": "Preencher GA_ID em js/analytics.js, conectar o banner de consentimento a Analytics.consent(true|false), desativar page views por histórico no Enhanced Measurement e validar no DebugView."
          }
        }
      ]
    }
  ]
}