← story.propek
STORY 6.2.6
Tier 1 Visual Enhancement (GSAP + tsParticles + canvas-confetti)
Epic: HQ Dashboard Evolution
DONE
ACCEPTANCE CRITERIA (32/32)
`squads/hq/CLAUDE.md` atualizado: adicionar exceções aprovadas de CDN ao pricípio #3
Script tags adicionados no `<head>` do HTML gerado (antes de `</head>`):
Cada biblioteca verificada antes de usar: `if (typeof gsap !== 'undefined') { ... }`
Fallback: CSS animations do Sprint 5 continuam ativas em todos os elementos — se CDN falhar, cidade ainda funciona normalmente
`prefers-reduced-motion`: tsParticles e canvas-confetti não inicializam; GSAP inicializa mas sem animar (apenas define valores finais)
**Entrada dos prédios (page load)**: `gsap.from('.building', { y: 60, opacity: 0, duration: 0.8, stagger: 0.12, ease: 'power2.out' })`
**Pulso Vivo melhorado**: substituir `setInterval` por GSAP timeline contínua
**Transição de clima via GSAP**: quando `data-weather` é definido, aplicar transição:
**AC4 Cascade melhorado**: substituir CSS `animation-delay` por GSAP timeline:
Inicializar tsParticles no script inline, após detectar `typeof tsParticles !== 'undefined'`
**Vagalumes noturnos** (`is-night` class no body):
**Chuva** (`data-weather="rain"`):
**Névoa/Neblina** (`data-weather="fog"` ou `"mist"`):
**Fumaça de chaminé** para prédios `industrial` e `factory` (traffic-ads e clone-forge):
Performance: máximo 100 partículas no total (somar todos os containers)
`prefers-reduced-motion`: bloco inteiro de tsParticles não executa
Substituir/complementar os sparkles CSS quando canvas-confetti disponível
Detectar prédios com `hasCelebration` via `document.querySelectorAll('.building[data-celebration]')`
Para cada prédio celebrando, calcular posição e disparar confetti:
Disparo acontece 500ms após `DOMContentLoaded` (dar tempo para prédios renderizarem)
Sem canvas-confetti: sparkles CSS do Sprint 5 continuam funcionando
`prefers-reduced-motion`: confetti não dispara
Declarar custom properties tipadas para as cores do céu:
`.sky` usa `background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid), var(--sky-bottom))`
Classes de tempo alteram as vars (não o background diretamente):
`transition: --sky-top 30s linear, --sky-bottom 30s linear, --sky-mid 30s linear` em `.sky`
Fallback para browsers sem @property: classes aplicam background diretamente (como Sprint 2)
`node squads/hq/scripts/sync.js` gera sem erros
HTML size aumento ≤ 2% (CDN scripts são tags de 1 linha, não inline)
Todos os features Sprint 1+2+3+4+5 continuam funcionando com ou sem CDN
Testar abertura offline: CSS fallback ativo, cidade funcional
Score visual Lux pós-Tier1: >= 9.2/10 (upgrade de 9.0 estimado)
ARQUIVOS (4)
squads/hq/scripts/sync.js MODIFICADO — CDN tags + @property CSS + particle containers + init script
squads/hq/output/hq.html GERADO
squads/hq/CLAUDE.md ATUALIZADO — expandir exceções CDN aprovadas
squads/hq/agents/MEMORY-vigil-visual.md ATUALIZAR score pós-Tier1
RETROSPECTIVA
Qualidade: ★★★☆☆
Incluir @qa no proximo ciclo
Rodar @cyber-chief antes do push