portal_publico/docs/temas-sazonais/temas-sazonais.md

# Temas Sazonais

> Criado em 2026-09-15, seguindo o mesmo padrão das demais aplicações sem pacote Python dedicado (ver `CLAUDE.md` na raiz, "Documentação dividida por aplicação") — como o Halloween foi só o primeiro de possivelmente vários temas sazonais, faz mais sentido documentar isso como uma "aplicação" própria desde já do que deixar acumulando dentro do `CLAUDE.md` raiz. Este arquivo não é auto-carregado pelo Claude Code (não há pacote Python — o mecanismo é só frontend, `static/js`/`static/css`/templates) — leia manualmente ao mexer nisto. Ver `CLAUDE.md` na raiz para arquitetura geral/transversal do Portal.

Troca sazonal da marca P.I.D. (logo, ícone da sidebar/login, favicon, intro de abertura) por uma variante temática durante uma janela de datas — hoje dois: Halloween (mascote "vampiro", 16 a 31/10) e Aniversário (56 anos da De Paula Contadores, mascote com balões, só 15/10). O mecanismo (`pidIsHalloweenActive()`/`pidIsAniversarioActive()`/`seasonal-theme.js`) foi pensado pra ser genérico o bastante pra outro tema sazonal futuro reaproveitar o mesmo esqueleto sem reescrever nada — as duas janelas atuais nunca coincidem por desenho (15 vs 16-31/10), não por checagem explícita de conflito.

## Status atual

**Confirmado e programado** — revisão visual concluída pelo usuário. `PID_HALLOWEEN_PREVIEW_FORCE`/`PID_ANIVERSARIO_PREVIEW_FORCE = false` em `static/js/seasonal-theme.js` (deixados de propósito nas constantes, documentando a decisão, em vez de removidos): daqui pra frente só a data decide se cada tema está ativo, sem nenhuma ação manual — nem pra ligar, nem pra desligar depois. Nada mais precisa mudar de código pra isso valer.

O Halloween só começa em 16/10 (antes: outubro inteiro) desde que o tema de Aniversário foi criado — 15/10 é o aniversário da empresa e passou a ter tema próprio, então os dois janelas foram desenhadas pra nunca disputar o mesmo dia.

**"56 ANOS" é específico deste ano** — a pílula do lockup horizontal, o texto "56" da intro e os 3 arquivos `static/img/pid-aniversario-*.svg` precisam ser atualizados manualmente todo ano (novo número, nova pasta `pid-marca-<N>` de referência) — ver `leiame.md` original: "é uma marca temporária". Isso não é automatizado de propósito (não vale a complexidade pra um ajuste anual de um texto).

## Origem dos assets (Halloween)

Mascote "vampiro" (a mesma marca P.I.D. fantasiada de Drácula — capa com gola erguida e forro vinho, lápis de olho, dois dentinhos) desenhada em `C:\Users\Depaula\Documents\Logos\P.I.D. Logo Design Halloween\pid-marca-halloween\` (SVGs de referência + `leiame.md`, fora do repositório, mesmo papel de `pid-marca/` pra marca "P.I.D." normal — ver "Logos em `static/img/`" em `docs/identidade-visual/identidade-visual.md`) e a intro de abertura em `...\P.I.D. Logo Design Halloween\Logo intro animation Halloween\export-halloween\pid-intro-halloween.html` (mesmo formato de bundle "Design Canvas" do `pid-intro-escuro.html` original — ver `CLAUDE.md` raiz, "Animação de intro do login" → "Origem do arquivo"; a composição (`PidHalloween`, cenas `Rise`/`Scare`/`Settle`/`Wordmark`, 1,3s/1,5s/1,4s/1,8s) foi extraída do bundle com o mesmo processo ad-hoc (gzip+base64 por uuid) e portada fielmente pra vanilla JS/CSS). Cópias dos SVGs de referência (não usadas diretamente pela UI, que injeta o markup inline — ver abaixo) vivem em `static/img/pid-halloween-favicon.svg`/`pid-halloween-icone-escuro.svg`/`pid-halloween-logo-horizontal-escuro.svg`.

## `static/js/seasonal-theme.js`

Incluído em toda página (mesmo padrão de `confirm-modal.js`, logo depois dele) — concentra tudo que é compartilhado entre login e sidebar:

- `pidIsHalloweenActive()`/`pidIsAniversarioActive()` — a checagem de data de cada tema (mais o respectivo preview force e o opt-out do usuário, ver "Opt-out do usuário" abaixo — checado **antes** de tudo, prioridade máxima).
- `pidApplySeasonalFavicon(iconFile)` — troca `<link rel="icon">` de `pid-icone-escuro.svg` pro arquivo passado (`pid-halloween-icone-escuro.svg` ou `pid-aniversario-icone-escuro.svg`) via substring no `href` (funciona com qualquer prefixo de `STATIC_URL`). **Não** usa o favicon dedicado de cada tema (`pid-halloween-favicon.svg`/`pid-aniversario-favicon.svg`) — são variantes simplificadas (sem capa/gola ou sem balões, cores diferentes) que destoam do resto da marca sazonal na aba do navegador (bug relatado pelo usuário na revisão visual do Halloween, aplicado por precedente ao Aniversário); mesmo padrão do P.I.D. normal, cujo favicon também usa `pid-icone-escuro.svg` em vez do `pid-favicon.svg` dedicado.
- `pidApplyVampireIcon(svg)`/`pidApplyVampireFull(svg)` — substituem o `viewBox`+`innerHTML` de um `<svg>` existente (ícone 64×64 → vampiro 76×80; assinatura horizontal 300×80 → 320×96) pelo markup do vampiro, com dois grupos de rosto sempre presentes (`.pid-vamp-face--friendly`/`--scare`, cruzando opacidade) dentro de um `<g class="pid-vamp-icon-rig">` — mesma ideia de "dois estados sempre no DOM, alternando opacidade" já usada pelo crossfade da sidebar (`sidebar__logo--full`/`--icon`).
- `pidTriggerVampireScare(root)` — dispara a animação de susto (`.is-scaring`, ver `base.css`) em todo `.pid-vamp-icon-rig` dentro de `root`.
- `pidApplyAniversarioIcon(svg)`/`pidApplyAniversarioFull(svg)` — substituem só o `innerHTML` (viewBox não muda, ao contrário do vampiro) pelo markup com balões; preservam os dois `.pid-icon-eye` do ícone normal (a cara não muda nesse tema), então a piscada ao clicar continua funcionando sem nenhum código de interação dedicado.

## Troca do ícone/assinatura (sidebar + login)

Como o markup do ícone P.I.D. normal já é idêntico (copiado inline) nas 13 páginas-shell + login, a troca é feita **em runtime**, não editando cada template — `sidebar-brand.js`/`login-logo-blink.js` chamam `pidApplyVampireIcon`/`pidApplyVampireFull`/`pidApplyAniversarioIcon`/`pidApplyAniversarioFull`/`pidApplySeasonalFavicon` no próprio `DOMContentLoaded`, escolhendo o tema (`pidIsHalloweenActive()` checado primeiro, `pidIsAniversarioActive()` senão — nunca os dois juntos, mas Halloween ganha prioridade de código por clareza). Isso também é o que torna o "retorno" ao P.I.D. normal automático fora de qualquer janela: o innerHTML original nunca é tocado no arquivo, só sobrescrito em memória a cada carregamento de página enquanto alguma janela estiver ativa.

## Susto ao clicar (substitui a piscada de olhos)

Fora do Halloween, clicar na logo pisca os olhos (`.pid-icon-eye`/`is-blinking`, comportamento original, intocado). Durante o Halloween, o mesmo clique dispara `pidTriggerVampireScare()` — `.pid-vamp-icon-rig.is-scaring` (`base.css`, logo depois do bloco de piscada) toca 4 animações de 900ms em paralelo: `pidVampFaceOut`/`pidVampFaceIn` (crossfade rosto amigável → raivoso e de volta), `pidVampCapeBurst` (a capa "estufa" com scale+rotate) e `pidVampShake` (o ícone inteiro treme e ganha um brilho vermelho via `filter:drop-shadow`) — tudo CSS puro (sem `requestAnimationFrame`), disparado só pela troca de classe, mesmo padrão da piscada original. Na sidebar, a navegação pra `portal.html` é adiada `PID_HALLOWEEN_SCARE_MS - 100` (800ms, contra 260ms da piscada normal) pra dar tempo de ver o susto antes de trocar de página; no login não há navegação, é só o toque decorativo.

## Intro de abertura pós-login (`static/css/login-intro-halloween.css` + `static/js/login-intro-halloween.js`)

Variante completa de `login-intro.css`/`.js`, com seu próprio overlay (`#login-intro-halloween`, mesma estrutura de `#login-intro` em `index.html`, hidden por padrão) — reaproveita as funções de easing/animate/clamp/corner-target já globais de `login-intro.js` (`PID_INTRO_EASING`, `pidIntroAnimate`, `pidIntroClamp`, `pidIntroCornerTarget`) em vez de duplicá-las, só a coreografia é própria. `auth.js` escolhe qual intro chamar no sucesso do login (`pidPlayLoginIntroHalloween` vs `pidPlayLoginIntro`) com base em `pidIsHalloweenActive()`.

- **Cenas** (`PID_INTRO_H_CUES`/`PID_INTRO_H_TOTAL` — `Rise:0, Scare:1.3, Settle:2.8, Wordmark:4.2, Fly:6.0`, total `6.9`): `Rise` (a figura surge do escuro com a capa erguida cobrindo o rosto, só os olhos semicerrados espiando — `squint`), `Scare` (a capa se abre numa investida — `lunge`/`push`/tremida —, revelando o rosto raivoso com sobrancelhas e presas, mais um flash vermelho de tela inteira via `#login-intro-h-flash`), `Settle` (a capa volta a fechar, o rosto cruza pro amigável de sempre), `Wordmark` (a figura desliza, "P.I.D." aparece na fonte "Creepster" com régua dourado→vinho e a tagline). As primeiras 4 cenas (`Rise`/`Scare`/`Settle`/`Wordmark`, somando 6,0s) são a composição original **praticamente 1:1** — mesmas fórmulas/janelas de tempo de `pid-intro-halloween.html`, sem reproporcionar nada (ao contrário da intro normal, que teve que comprimir as cenas — aqui não foi pedido acelerar).
- **`Fly` (~0,9s, acrescentada, não existe no arquivo original)**: a composição-fonte foi pensada como vídeo solto (tudo esmaece junto no final); pra se integrar ao fluxo do Portal (a mesma razão documentada no `CLAUDE.md` raiz sobre o "voo" da intro normal), foi adicionada uma cena final equivalente à cena "Portal" da intro normal — a wordmark esmaece, o ícone encolhe e voa até o canto real da janela (mesmo `pidIntroCornerTarget()`, reaproveitado) e o stage inteiro esmaece por cima do fim do voo.
- **Reescala de tamanho**: a composição original foi autorada pra um ícone de 460px (uso como hero de vídeo); aqui o ícone roda a 200px (`PID_INTRO_H_ICON_K = 200/460`), então todo deslocamento em "px" (a subida inicial, a tremida, o desvio vertical da investida, o blur do brilho) é multiplicado por esse fator — as transformações internas do SVG (a capa abrindo, o ângulo da aba) continuam em unidades do próprio `viewBox` (76×80, igual ao das duas variantes vampiro em `static/img/`) e não precisam de reescala.
- **Tema claro**: mesmo raciocínio da intro normal — fundo acompanha `--bg-canvas`, texto do wordmark vira escuro (`#3a1620`) pra continuar legível; o ícone não precisa de override (roxo/vinho com contraste de sobra nos dois fundos).

## Teias de aranha de canto (`static/css/halloween-cobweb.css`)

Decoração de canto pedida pelo usuário depois de revisar um protótipo isolado publicado como Artifact ("Cantos Assombrados", fora do repositório — comparava 2 vs 4 cantos e aranha andando vs parada antes de aplicar de verdade). Só em **2 cantos** (superior-esquerdo/inferior-direito, os mesmos marcados por ele num print da tela real) e só em **duas páginas**: `index.html` (login) e `portal.html` (tela Principal) — nenhum outro shell. Cada teia é um quarto de círculo (8 fios retos + 5 anéis em espiral levemente arqueados — `<path class="pw-ring">` com curvas `Q` em vez de polilinhas retas, pra não parecer um desenho geométrico cru — mais 1 fio "perdido" bem mais comprido que os outros, se estendendo pra fora do canto; todas as coordenadas calculadas por trigonometria, não à mão) com uma aranha (`<g class="pw-spider">`, corpo+cabeça+8 pernas) que anda pra fora ao longo de um dos fios e volta (`@keyframes pwWalk`, 8s, com pausas nas pontas) enquanto as pernas mexem continuamente (`pwLegsWiggle`) — tudo CSS puro, sem `requestAnimationFrame`. **Desenho da teia refeito numa rodada seguinte** a partir de uma referência visual que o usuário anexou (queria "algo menos bruto", mais profissional, "sem parecer que só foi colado um PNG"): a versão original tinha só 6 fios retos + 3 anéis poligonais (linhas retas entre pontos, sem curva nenhuma) — a v2 acima é mais densa perto do canto e mais esparsa longe dele, com as curvas arqueadas simulando a espiral de captura de uma teia real.

- **Markup só existe em memória**: igual ao ícone vampiro, o HTML da teia não fica hardcoded no template — `PID_COBWEB_SVG` (string, `seasonal-theme.js`) é injetado dentro de um container já presente e `hidden` (`#pw-cobwebs-login`/`#pw-cobwebs-portal`) por `pidApplyHalloweenCobwebs(containerId)`, chamada por `login-logo-blink.js`/`sidebar-brand.js` no mesmo `if (halloween)` que já troca o ícone — fora de outubro, o container continua vazio e `hidden`.
- **Ancoragem diferente em cada página**: no login, a teia é filha direta de `.login-page` (ela já cobre `min-height:100vh`); na Principal, filha de `.main-content` (não o viewport, porque a sidebar já é sólida e cobriria o canto esquerdo de qualquer jeito) — ancorar ali garante que a teia nunca fica escondida atrás dela, com ou sem a sidebar colapsada. As duas usam a mesma regra base `.pw-corners{position:absolute;inset:0}`.
- **Tamanho**: menor na Principal que no login (pedido explícito do usuário, "evitando cobrir muito as informações que constam na página" — a tela Principal tem cards/widgets perto das bordas, o login só tem o card centralizado), mas aumentado em duas rodadas seguintes ("ficaram muito pequenas", nas duas telas): `clamp(220px,22vw,320px)` no login vs `clamp(160px,15vw,230px)` na Principal (valores atuais).
- `z-index:-1` (não `pointer-events` sozinho) garante que a teia fica atrás do conteúdo real, não só sem receber clique.
- **Bug real — a teia do login não aparecia de jeito nenhum**: `z-index:-1` só funciona como esperado dentro de um contexto de empilhamento isolado; sem isso, um elemento negativo escapa pro contexto raiz da página e qualquer irmão estático com fundo opaco pinta por cima dele (é exatamente o caso de `.login-page`, que tem fundo cobrindo a tela inteira) — a teia ficava sempre atrás desse fundo, nunca visível. Na Principal o mesmo problema existia, só que passava despercebido porque `.main-content` não tem fundo opaco cobrindo tudo (a teia só aparecia nos vãos sem conteúdo por cima, "sumindo" só parcialmente/nos cantos exatos). Corrigido com `isolation:isolate` em `.login-page` (`login.css`) e em `.main-content` (`layout.css`, junto do `position:relative` já existente) — isola um contexto de empilhamento próprio pra cada uma, e a teia (filha direta, `z-index:-1`) passa a ficar corretamente atrás do fundo e na frente do conteúdo real nas duas.
- **Canto superior-esquerdo da Principal escondido atrás da topbar**: a `.topbar` (`position:sticky`, `z-index:20`, fundo opaco — `layout.css`) cobria a metade de cima da teia desse canto. `.pw-corners--portal .pw-corner--tl` ganhou `top: var(--topbar-height)` (mesmo token que a topbar já usa) — só esse canto, o inferior-direito e os dois do login não têm nada cobrindo por cima e continuam em `top:0`/`bottom:0`.
- **Contraste por tema**: a aranha (`#17111d`) é quase a mesma cor do fundo escuro padrão (`--bg-canvas:#121017`) e sumia, sobrando só o olho vermelho visível — `.pw-spider` ganhou `filter:drop-shadow(...)` branco (dois drop-shadows, um mais fechado e um mais espalhado) só pra dar contraste no tema escuro. No tema claro é o oposto: a teia (creme, pensada pro fundo escuro) sumiria no fundo branco — `:root[data-theme="light"] .pw-strands`/`.pw-strand-stray`/`.pw-ring` viram um cinza-chumbo escuro semitransparente, e o filtro branco da aranha é desligado (`filter:none`, já que aranha escura sobre fundo claro já contrasta sozinha e o brilho branco só seria ruído ali).
- **Clicar mata a aranha** (pedido explícito do usuário): a aranha (única parte da teia com `pointer-events:auto`, o resto continua `pointer-events:none`, decorativo) tem um listener `{once:true}` (`pidApplyHalloweenCobwebs()`) que, ao clique, adiciona `.is-dying` (`pwSpiderDie`, 950ms — cai girando, opacity até 0, `animation-fill-mode:forwards` mantém o estado final) e `.is-rising` num `<g class="pw-skull">` irmão (`pwSkullRise`, 1300ms — sobe, aparece e some, como a "alma saindo do corpo" enquanto o corpo cai); as pernas ganham sua própria `pwLegsDie` (encolhem/giram) via `.pw-spider.is-dying .pw-legs`, sobrescrevendo o `pwLegsWiggle` contínuo por especificidade.
- **O óbito é persistido** (pedido explícito do usuário, numa rodada seguinte — "guardar que a aranha foi morta na memória... até executar o comando tab+b que reseta a aranha"): cada aranha tem um id próprio (`${containerId}__tl`/`__br` — 4 ids possíveis, 2 cantos × 2 páginas) guardado num array JSON em `localStorage` (`pid_seasonal_dead_spiders`, `pidMarkSpiderDead()`/`pidGetDeadSpiders()`), mesmo padrão de armazenamento das outras preferências sazonais (nunca migrado pro banco). No carregamento seguinte, `pidApplyHalloweenCobwebs()` checa essa lista e, pra aranha já morta, aplica `.is-dead` direto (`animation:none;opacity:0`, sem tocar `pwSpiderDie`/a caveira de novo — não faz sentido reprisar a queda a cada F5) em vez de ligar o clique.
- **Atalho Tab+B reseta todas as aranhas** (`pidResetDeadSpiders()`, limpa o `localStorage` e recarrega a página): segurar Tab (sem `preventDefault`, a navegação por foco continua normal) e apertar B enquanto ele está pressionado. Listener global (`seasonal-theme.js`, incluído em toda página), só tem efeito de verdade nas duas páginas com teia e só quando há alguma aranha morta salva.
- **Bug real — aranha caindo pra cima e caveira de cabeça pra baixo no canto inferior-direito**: o canto `--br` originalmente era só o mesmo desenho do `--tl` com `transform:scale(-1,-1)` no `<div class="pw-corner">` inteiro (jeito mais simples de reaproveitar o mesmo markup pro canto oposto). Só que `scale(-1,-1)` num ancestral vira **tudo** de cabeça pra baixo, inclusive a "aranha"/"caveira" (que têm uma orientação certa — pernas, olhos, queixo) e a direção das animações de queda/subida (`pwSpiderDie`/`pwSkullRise`, que "sobem" em vez de "descer" depois de espelhadas). Corrigido separando as duas coisas: só a teia em si (`.pw-strands`, sem opinião de "lado certo pra cima") continua sendo espelhada, agora com `transform-box:view-box; transform-origin:100px 100px` (o centro do viewBox autorado, não a caixa delimitadora dos fios — importante porque o fio "perdido" mais comprido deslocaria esse centro se fosse `fill-box`); a aranha e a caveira passaram a usar variáveis CSS (`--rx`/`--ry`/`--rr`/`--ox`/`--oy` na aranha, `--sx`/`--sy` na caveira) pra descanso/passeio/posição, redefinidas com os valores espelhados (`200-x`, `200-y`, `+180deg`) só pra `.pw-corner--br`, **sem nenhum `scale`/`rotate` extra nelas** — ficam sempre em pé, e as `@keyframes` de queda/subida (agora usando `calc(var(--r*) + valor)`) sempre significam "pra baixo"/"pra cima" de verdade na tela, nos dois cantos.

## Tema "Aniversário" (56 anos da De Paula Contadores, só 15/10)

Segundo tema sazonal, criado numa rodada seguinte à do Halloween — mesmo personagem P.I.D., "o acento é o número" (ver `leiame.md` original abaixo): ganha três balões (azul/âmbar/rosa) segurados por um braço saindo da lateral direita do corpo. A cara de **repouso** não muda (sem susto como o vampiro) — mas o clique na logo ganhou uma animação própria numa rodada seguinte (ver "Clique de festa" abaixo), e o tema também ganhou um bolo com velinhas na tela Principal (ver "Bolo de aniversário" abaixo).

### Origem dos assets

Desenhado em `C:\Users\Depaula\Documents\Logos\P.I.D. Logo Design Aniversário\pid-marca-56\` (SVGs de referência + `leiame.md`, fora do repositório, mesmo papel de `pid-marca-halloween/` pro Halloween) e a intro de abertura em `...\P.I.D. Logo Design Aniversário\Logo intro animation\export-56\pid-56-anos.html` (mesmo formato de bundle "Design Canvas", desta vez um componente React/JSX — `pid-56.jsx` — em vez de JS puro; extraído do bundle com o mesmo processo ad-hoc de gzip+base64 por uuid já usado no Halloween/intro normal e portado fielmente pra vanilla JS/CSS em `login-intro-aniversario.js`). Cópias dos SVGs de referência (não usadas diretamente pela UI, que injeta o markup inline) vivem em `static/img/pid-aniversario-favicon.svg`/`pid-aniversario-icone-escuro.svg`/`pid-aniversario-logo-horizontal-escuro.svg`; a logo da De Paula Contadores usada na intro (imagem `<img>`, não SVG) vive em `static/img/pid-aniversario-depaula-wordmark.png`.

**Exceção deliberada à separação logo cursivo vs "P.I.D."** (ver "Logos em `static/img/`" no `CLAUDE.md` raiz): a intro de abertura deste tema mostra a logo cursiva oficial da De Paula Contadores (não a marca "P.I.D.") ao lado do texto "Parabéns" — normalmente essa logo é reservada só a documentos/PDFs gerados pela aplicação, nunca à UI do Portal. Aqui a exceção é intencional: a composição celebra o aniversário da **empresa**, não do sistema, e o próprio usuário forneceu essa imagem como parte do design de referência (não é uma migração de logo decidida unilateralmente).

**"56 ANOS" é específico deste ano** — ver "Status atual" no topo deste arquivo.

### Ícone/assinatura (sidebar + login)

`pidApplyAniversarioIcon(svg)`/`pidApplyAniversarioFull(svg)` (`seasonal-theme.js`) substituem só o `innerHTML` — ao contrário do vampiro, a caixa (`viewBox`) não muda (64×64/300×80, iguais ao P.I.D. normal), já que os balões cabem na mesma composição sem precisar de mais espaço. Os dois `.pid-icon-eye` do ícone normal são preservados dentro do markup novo, então a piscada ao clicar (`sidebar-brand.js`/`login-logo-blink.js`) continua funcionando — inclusive **junto** com o clique de festa (ver abaixo), não em vez dele.

Estrutura em dois `<g>` aninhados — `<g class="pid-aniv-hop">` (recebe o "pulo" via CSS, sem nenhum `transform` de atributo XML) por fora, `<g class="pid-aniv-icon-rig" transform="...">` (o posicionamento estático dentro da caixa) por dentro — pelo mesmo motivo já documentado pra `.pid-icon-eye`/`.pid-vamp-icon-rig`: um `transform` de CSS aplicado ao MESMO elemento que já tem um `transform` de atributo substitui o atributo inteiro, perdendo a posição.

### Clique de festa (pulo + confete + língua-de-sogra), pedido numa rodada seguinte

Pedido explícito do usuário depois de ver o tema pela primeira vez ("aplique a mesma animação do mascote de pular com os confetes e a língua de sogra ao clicar no botão da logo"). Ao contrário do susto do vampiro (que **substitui** a piscada), o clique de festa **convive** com ela — a cara de repouso do mascote de aniversário não muda, então a piscada de olhos continua fazendo sentido; o clique dispara os dois efeitos juntos.

- **Markup**: `pidAniversarioIconRigMarkup()` (`seasonal-theme.js`) ganhou, além dos balões já existentes, um braço/balões agrupados (`.pid-aniv-balloons`/`.pid-aniv-arm`, antes soltos), um grupo de confete escondido (`.pid-aniv-confetti`, 8 formas pequenas perto do braço) e, dentro do corpo, um sorriso/bico-de-pato que se alternam (`.pid-aniv-smile`/`.pid-aniv-pucker-outer`/`-inner`) mais uma língua-de-sogra (`.pid-aniv-horn`, um tubo + traço pontilhado + 2 "bolhas" de sopro) — todos escondidos por padrão (`opacity:0`/`scaleX(0)`), revelados só durante o clique.
- **Trigger**: `pidTriggerAniversarioParty(root)` (mesmo padrão de `pidTriggerVampireScare` — remove e reaplica `.is-partying` em todo `.pid-aniv-hop` dentro de `root`, permitindo cliques repetidos re-tocarem do zero). Chamado por `sidebar-brand.js`/`login-logo-blink.js` quando `pidIsAniversarioActive()`, sempre antes de também disparar a piscada normal.
- **Animação** (`base.css`, `PID_ANIVERSARIO_PARTY_MS = 650ms` pra tudo, mesmo truque do susto do vampiro de escalonar o efeito só via percentuais internos de cada `@keyframes`): o personagem pula (`pidAnivHop`, translateY+squash), o braço joga os balões pra cima (`pidAnivArmThrow`, rotate), os balões balançam mais forte (`pidAnivBalloonSwing`), as 8 peças de confete explodem em direções fixas (`pidAnivConfettiPiece`, uma por `:nth-child` com `--tx`/`--ty` próprios e um pequeno atraso escalonado) e a boca faz bico enquanto a língua-de-sogra desenrola e recolhe (`pidAnivPuckerIn`/`pidAnivSmileOut`/`pidAnivHornUnroll`).
- **Pivôs de transform**: `.pid-aniv-hop`/`.pid-aniv-balloons`/`.pid-aniv-arm` usam `transform-box:fill-box; transform-origin:center bottom` (pivô aproximado na base do próprio desenho, suficiente pra um ícone pequeno — não vale a complexidade de calcular o pivô exato em `view-box`); `.pid-aniv-horn` usa `transform-origin:left center` (a ponta esquerda da própria caixa delimitadora é exatamente onde o tubo nasce, perto da boca — `scaleX` a partir dali "desenrola" corretamente sem precisar de coordenada manual).
- **Bug real — a língua-de-sogra saía do lugar errado e não chegava a sair do corpo**: ela tinha nascido DENTRO do grupo do corpo (`<g transform="translate(2,18) scale(0.72)">`), com as coordenadas da ponta esquerda do sorriso (`M25 47`, o começo do traço da boca, não o centro dela) — resultado: o tubo atravessava o rosto na diagonal e terminava ainda dentro do disquete, sem nunca aparecer pra fora. Corrigida movendo o grupo pra FORA do corpo (irmão dele, depois dele no DOM pra continuar desenhando por cima) e recalculando o ponto de origem no espaço do rig: o bico da boca está em `(32, 48.5)` no espaço local do corpo, que vira `(2 + 32×0,72, 18 + 48,5×0,72) = (25, 53)` no espaço do rig. Daí o tubo segue `q12.6 -5 30 -11` (as mesmas proporções da composição original, onde o efeito também cruza o corpo de propósito) e termina 11 unidades além da borda direita do disquete, em espaço livre.

### Intro de abertura pós-login (`static/css/login-intro-aniversario.css` + `static/js/login-intro-aniversario.js`)

Variante de `login-intro.css`/`.js`, com seu próprio overlay (`#login-intro-aniversario` em `index.html`) — reaproveita `PID_INTRO_EASING`/`pidIntroAnimate`/`pidIntroClamp`/`pidIntroCornerTarget` já globais de `login-intro.js`. `auth.js` escolhe a intro certa (Halloween > Aniversário > normal, nessa ordem de prioridade de código — nunca duas ativas ao mesmo tempo de verdade).

- **Cenas originais** (`PID_INTRO_A_CUES` — `Chegada:0, Confete:1.1, Texto:2.5, Serpentina:4.1`, somando 5,9s, extraídas de `pid-56.jsx`): `Chegada` (o personagem cai com os balões e quica ao pousar), `Confete` (dá um pulo, joga o braço com os balões pra cima e arremessa uma explosão de confete — 58 peças com física determinística, mesma semente pseudo-aleatória do original pra toda visita produzir a mesma explosão), `Texto` (o ícone desliza pra esquerda enquanto "Parabéns" + a logo da De Paula + "56 Anos" entram), `Serpentina` (a boca faz bico e uma língua-de-sogra desenrola da boca, depois recolhe totalmente, enquanto o slogan pousa e a cena esmaece).
- **Diferenças em relação à composição original**: (1) a composição original foi autorada num canvas de vídeo 1920×1080 com elementos posicionados por coordenadas absolutas — aqui virou uma única linha flexível (ícone + mensagem lado a lado), com o "deslizar pra esquerda" reproduzido pela mesma técnica de `SHIFT_X` já usada nas outras duas intros (o ícone se desloca por `transform`, a mensagem só aparece fixa ao lado); (2) o "zoom" de respiro do fundo (1.05→1.0→1.02) e as vinhetas radiais do canvas original foram descartados — floreios de vídeo sem efeito perceptível numa janela de overlay pequena; (3) `Fly` (~0,9s, acrescentada, não existe no arquivo original, mesma ideia já usada nas outras duas intros) — a composição original termina com tudo esmaecendo junto (pensada como vídeo solto); aqui o ícone encolhe e voa até o canto real da sidebar antes do stage inteiro esmaecer.
- **Reescala de tamanho**: a composição original foi autorada pra um ícone de 420px (`Party` component, `size=420` default); aqui o ícone roda a `PID_INTRO_A_ICON_SIZE` (260px — maior que os 200px das outras duas intros, pedido explícito do usuário numa rodada seguinte, "aumente um pouco o tamanho do mascote... para que fique mais fácil sua visualização"), com `PID_INTRO_A_ICON_K = PID_INTRO_A_ICON_SIZE / 420` calculado **a partir** dessa constante (não fixo) — só os deslocamentos aplicados via CSS `transform` em px reais no elemento `<svg>` (a queda `drop`, o "lift" do pulo, o blur da sombra) são multiplicados por esse fator; as transformações internas em unidades do `viewBox` (balanço dos balões, ângulo do braço, comprimento da língua-de-sogra) escalam junto automaticamente, e a física do confete (px reais fora do SVG) é multiplicada pelo mesmo fator.
- **Tema claro**: mesmo raciocínio das outras duas intros — fundo acompanha `--bg-canvas`, texto claro (pensado pra contrastar com fundo escuro) vira escuro; o ícone não precisa de override (roxo/dourado com contraste de sobra nos dois fundos).

### Bolo de aniversário (`static/css/aniversario-decor.css`), pedido numa rodada seguinte

Pedido explícito do usuário pra "deixar o tema mais completo". A mesma rodada também trouxe bandeirinhas de festa nos cantos (login + Principal, nos mesmos 2 cantos das teias do Halloween), **removidas a pedido do usuário logo depois** de vê-las na tela — não tentar ressuscitá-las sem pedido explícito. O bolo ficou.

- **Bolo de aniversário** (`pid-aniv-cake`, `pid-cake-*`): só na Principal, `position:fixed` no canto inferior-direito da **janela** (não da página — continua visível mesmo com scroll, ao contrário das teias de aranha, que são `position:absolute` dentro do conteúdo). Duas camadas com gotejamento de cobertura (`pid-cake-drip1`/`drip2`, um path ondulado) e 3 velas com chama tremulando continuamente (`pidCakeFlicker`, atrasos diferentes por vela pra não tremerem em sincronia). Cada gotejamento usa a cor da camada DE CIMA (creme sobre o dourado, dourado sobre o roxo) — pintá-lo da cor da própria camada o deixaria invisível, que foi como nasceu.
  - **Iluminação das velas** (pedida numa rodada seguinte), em duas camadas: um `drop-shadow` duplo no próprio `.pid-cake-flame` (o brilho colado na chama, que pulsa junto com `pidCakeFlicker`) e o `.pid-cake-halo` — uma elipse com `<radialGradient>` âmbar, posicionada **depois das camadas do bolo e antes das velas**, pra a luz lavar o topo do bolo sem desbotar as chamas. Os dois pulsam em ciclos de durações diferentes (1,4s e 2,6s) de propósito, pra não parecerem sincronizados. O `filter` está também na regra base de `.pid-cake-flame`, não só nos keyframes, pra o brilho sobreviver enquanto `pidCakeFlameOut` toca; e o halo tem seu próprio `pidCakeHaloOut`, senão sobraria uma mancha quente boiando no canto depois das velas apagadas. No tema claro a intensidade cai pela metade (`--halo-max`) — brilho quente sobre fundo claro lê como névoa suja, não como luz.
  - **Clicar apaga as velinhas** (pedido explícito do usuário): `pidApplyAniversarioCake(containerId)` liga o clique num `<button>` (não numa `<div>`, pra ganhar foco por teclado/`aria-label` de graça) — adiciona `.is-blowing` (toca `pidCakeFlameOut`/`pidCakeSmokeRise` uma vez, a fumaça sobe e some enquanto a chama encolhe) e, depois de `PID_CAKE_BLOW_MS` (1400ms), troca pra `.is-blown` (estado final em repouso, sem `animation` — mesma ideia de `.pw-spider.is-dead`).
  - **O estado apagado NÃO é persistido, de propósito** — as velinhas reacendem a cada carregamento da página, e o atalho Tab+B continua sendo só da aranha do Halloween. A persistência chegou a existir aqui (`pid_aniversario_cake_blown` no `localStorage`, copiada de `pidMarkSpiderDead`) e foi **removida depois que o usuário relatou como bug**: "não aparece o fogo das velinhas para funcionar a animação de apagar elas ao clickar". O que acontecia: quem clicasse no bolo uma vez nunca mais via as velas acesas (nem o listener de clique era ligado, já que o bolo nascia direto em `.is-blown`), sem nenhuma pista disso na tela, e só voltava com um atalho de teclado obscuro. A aranha persiste porque o usuário **pediu** isso explicitamente; aqui o pedido foi só "ao clicar nele as velas se apagam" — a persistência era invenção minha por analogia. **Lição pra decoração futura**: só persistir estado de easter egg quando pedido, senão o efeito desaparece de vez no primeiro uso.
  - **Bug real — o bolo nasceu ocupando a tela inteira, fora do canto**: a `<div>` em `portal.html` tinha só o `id` (`#pid-aniv-cake`), sem a classe `.pid-aniv-cake` que carrega TODO o dimensionamento/posicionamento (`position:fixed`, `right`/`bottom`, `width:clamp(...)`) — sem ela a div virou um bloco normal do fluxo, com a largura inteira do conteúdo, e o `<svg>` (`width:100%`) esticou junto. As classes `.is-blowing`/`.is-blown` também não teriam efeito, pelo mesmo motivo. **Ao adicionar um container decorativo novo, conferir que ele leva classe E id** — o id é só o gancho do JS, quem estiliza é a classe (mesmo padrão dos containers de teia, que já nasceram com as duas).
  - **Bug real — as chamas flutuavam acima das velas**: nasciam alguns pontos acima do topo de cada vela, soltas no ar; agora começam exatamente no `y` do `<rect>` da vela correspondente. A fumaça também precisou de `transform-box:fill-box` — sem isso, o `scale` da subida cresce a partir da origem do viewBox e joga o traço pra longe do pavio.
  - **Outros dois ajustes visuais da mesma rodada**: as chamas nasciam alguns pontos acima do topo das velas (flutuando soltas) — agora começam exatamente no `y` do `<rect>` de cada vela; e o gotejamento de cobertura de cada camada estava pintado da mesma cor da própria camada (portanto invisível) — agora cada gotejamento usa a cor da camada de cima (creme escorrendo sobre o dourado, dourado sobre o roxo).

## Opt-out do usuário ("Temas sazonais", menu da conta)

Pedido explícito do usuário — "essa medida serve para caso o usuário tenha alguma preferência com relação aos temas, ou no caso do halloween, se tiver aracnofobia". Botão-toggle (`.seasonal-theme-toggle`, `components.css`) no dropdown da conta (`#account-dropdown`, duplicado nos 13 shells — mesmo padrão de duplicação de `sidebar__brand` já documentado no `CLAUDE.md` raiz, "Ordem de `<script>`"), logo abaixo de "Tema de cores", com dois estados "Ativo"/"Inativo" (`aria-pressed`, cor de destaque quando ativo). Wiring em `account.js`, junto do bloco de `theme-swatches` — não em `seasonal-theme.js`, que só guarda a preferência.

- **Armazenamento**: `pid_seasonal_theme_opt_out` no `localStorage` (`"1"` = desligado), mesmo padrão de `pid_theme`/`pid_color_theme` (`theme.js`) — preferência de navegador, nunca migrada pro banco.
- **Prioridade máxima**: `pidIsHalloweenActive()`/`pidIsAniversarioActive()` checam `pidSeasonalThemesOptedOut()` **antes** de qualquer outra coisa, inclusive o respectivo preview force — se o usuário desligou, fica desligado mesmo com o preview forçado ligado. O toggle vale pros dois temas de uma vez (não há opt-out por tema).
- **Recarrega a página ao alternar**: o tema sazonal (ícone, teias, favicon) já foi aplicado via substituição de `innerHTML` no carregamento da página atual — não dá pra desfazer isso in-place de forma confiável, então o clique já salva a preferência e chama `window.location.reload()`. Importante sobretudo pra quem desligou por aracnofobia: a aranha precisa sumir na hora, não só na próxima navegação.