E-commerce interativo: a loja de roupas que vira uma arara de verdade

Quero a vitrine de uma loja de roupas que funcione como uma ARARA de verdade, não como uma grade de produtos.
Marca: [NOME DA MARCA]. Stack: Next.js (App Router) + TypeScript + Tailwind + framer-motion.

Antes de escrever código, abra e estude TODAS as imagens de referência que estão na pasta reference/.
Quando este texto e as referências discordarem, as referências ganham.
Não invente seções, hero com banner, páginas extras, gradientes, cards ou ícones que não estejam nelas.

## 1. Moldura da página
- Uma tela só, sem rolagem no desktop. O conteúdo fica num painel centralizado com margem generosa.
- Fundo cinza claro e quente (#e9e8e4) com um padrão bem discreto de ícones de cabide em grade solta (4 a 6% de contraste).
- Topo: ABOUT à esquerda (12px, maiúsculas, espaçado), o logo no centro (~48px de altura) e CONTACT à direita.
- Rodapé: faixa de marquee na largura toda, cor [COR DA FAIXA], texto [COR DO TEXTO] em itálico, maiúsculas, negrito, ~14px:
  "[FRASE DA MARCA] • NEW DROPS • [CIDADE] •" rodando devagar, sem fim.
- Botão em pílula "SEE AVAILABILITY" centralizado abaixo da arara (borda de 1px, maiúsculas 12px), indo para [LINK DA LOJA].

## 2. A arara (a peça principal)
- Um cano de metal horizontal ocupando ~65% da largura, no terço de cima: tubo cromado (gradiente cinza escuro → quase branco → cinza) com suporte nas duas pontas.
- Cada peça pendurada num cabide: gancho fino de metal por cima do cano + corpo de madeira escura (nogueira).
- Em repouso, toda peça fica DE LADO (rotateY entre 72 e 80 graus), bem juntas, como numa arara real, com ±1 grau de rotateZ aleatório pra parecer físico.
- Funciona com 4 a 10 peças.
- Hover numa peça (desktop):
  - Ela gira de frente pra pessoa (rotateY → 0) com mola e um pequeno balanço de pêndulo, girando a partir do gancho (transform-origin no gancho).
  - Cresce ~1.12x e vem pra frente das vizinhas.
  - As vizinhas abrem espaço (as da esquerda vão pra esquerda, as da direita pra direita).
  - Aparece embaixo, centralizado, em cinza pequeno: "Nome da peça - Cor".
  - Mouse sai: volta a ficar de lado.
- A mão que passa empurra: a direção em que o mouse vinha dá um impulso no balanço (kick de ~26 graus/s na peça que vira, ~16 nas que voltam).
- Clique abre a peça em destaque (seção 3), com a peça voando da arara pro centro (layoutId do framer-motion).

## 3. Peça em destaque
- A arara fica desfocada (blur 8px, opacidade 0.25) atrás. A peça escolhida fica grande, de frente, no cabide.
- Botões redondos de seta ← → no meio da altura, nas laterais. As setas do teclado também funcionam. Na troca, a peça que sai vira de lado e a que entra vira de frente.
- "CLOSE ✕" no canto de cima à direita volta pra arara (transição ao contrário).
- Embaixo da peça, centralizado, nesta ordem:
  1. Nome da peça em fonte pesada condensada, maiúsculas, ~24px, só preto.
  2. Nome da cor (só se a peça tiver variações).
  3. Chave FRONT / BACK em pílula, com a bolinha preta deslizando.
  4. "SEE AVAILABILITY ↗" sublinhado, pequeno, em maiúsculas.
- Variações de cor: etiquetas penduradas por um fio ao lado da peça, uma por cor. Clicar numa etiqueta faz a troca de cor "tingindo": a cor nova sobe da barra da peça com uma borda ondulada e alguns "dedos" de tinta correndo na frente (~1.15s), e o fundo da página puxa 9% pra essa cor.

## 4. Cabide (inegociável)
- O cabide fica ATRÁS da peça, dentro da camisa: só a curva de madeira do pescoço e o gancho aparecem acima da gola.
- Os braços do cabide NUNCA aparecem por cima ou pra fora dos ombros.
- O cabide gira junto com a peça.

## 5. Física (use estes números)
- Giro (rotateY) com mola: v += ((alvo - a) * 120 - v * 14) * dt
- Balanço (rotateZ no gancho) como pêndulo amortecido, empurrado pelo giro: sv += ((repouso - s) * 90 - sv * 5 + v * 0.02) * dt
- dt limitado a 0.032s. Para quando |alvo - a| < 0.05 e o balanço < 0.03.
- Escala do hover: mola stiffness 210, damping 20. Vizinhas abrindo espaço: stiffness 170, damping 22.
- A troca de foto lado → frente acontece na metade do giro (90 graus), quando a peça está de perfil.

## 6. Celular (< 640px)
- Sem hover. A arara vira uma rolagem horizontal com snap; a peça do centro vira de frente sozinha e mostra o nome. Toque abre o destaque.
- No destaque: peça com ~60vw, etiquetas ao lado, setas nos cantos de baixo.
- O marquee e o SEE AVAILABILITY continuam.

## 7. Dados
lib/products.ts, tipado:
type Colourway = { label: string; hex: string; front: string; back?: string };
type Product = { slug: string; name: string; colour?: string; side: string; front: string; back?: string; colourways?: Colourway[]; url: string };
As fotos estão em public/products/<peça>-side.webp, -front.webp e -back.webp, já com o cabide e sem fundo.

## 8. Qualidade
- Respeite prefers-reduced-motion (troca com fade em vez de mola e tinta).
- Imagens com next/image, priority nas da arara.
- Sem layout shift, sem erro no console.
- Depois de cada etapa, rode npm run build e corrija todos os erros antes de parar.