Velar. — Página de Destino de Imóveis de Luxo

Produza uma página de destino de imóveis de luxo cinematográfica, de página única. Uma implementação de referência completa e renderizada acompanha esta habilidade em example.html — comece por ela. Copie example.html, depois ajuste o texto e os dados; não reescreva a coreografia nem invente uma nova linguagem visual. A semente já codifica os tokens exatos, o preloader com máquina de escrever, a animação da casa controlada pela rolagem, a barra de estatísticas escura fixa, a contagem progressiva e a galeria que expande ao passar o mouse, descritas abaixo.

Este é o briefing de construção oficial. Siga-o exatamente — as cores nomeadas, fontes, tempos, URLs de imagem e a matemática da rolagem estão travadas.

Imagem embutida (crítico): example.html envia a silhueta do edifício/casa (HOUSE_IMG, originalmente res.cloudinary.com/.../building_bzziky.png) como um URI data:image/webp;base64,… embutido — mantenha-o exatamente como está. Os 5 vídeos da galeria do cloudfront .mp4 e o fundo do herói higgs.ai BG_IMG permanecem como URLs remotas (CDNs grandes e estáveis); o host do cloudinary é o que deve ser embutido porque é o ativo central que suporta a carga e é escalado repetidamente.

Stack

• Saída padrão: um único arquivo HTML autônomo (a semente example.html) usando CSS + JS puro. Já inclui tudo embutido.
• Se o usuário solicitar explicitamente o projeto React: porte a semente fielmente para React 18 + TypeScript + Vite + Tailwind CSS com apenas lucide-react para ícones (o hambúrguer→X). Toda a lógica de animação reside em um único src/App.tsx usando useState, useEffect, useRef, useCallback e IntersectionObserver. Nenhuma outra biblioteca. Não altere o design ao portar.

Configuração global — travada

• Fundo da página #f5f0ea (off-white quente). Wrapper do corpo overflow-x: clip.
• Fontes via @import em um <style> embutido: Syne (400, 700, 800, 900) + Inter (300, 400, 500, 600) do Google Fonts.
• Constantes: GRASS_GREEN = '#213138' (fundo do preloader + cor padrão do logo), FULL_TEXT = 'Velar.', HOUSE_IMG (URI de dados embutido na semente), BG_IMG (fundo do herói higgs.ai) e os 5 vídeos da galeria do cloudfront (em ordem — mantenha-os).

Seção 1 — Preloader / overlay de introdução

Overlay fixo de tela cheia (z-index:100, fundo #213138, flex centralizado). Máquina de escrever de Velar. em Syne 2.6rem, branco, letter-spacing:-0.02em; peso das letras 700, exceto . com peso 900. Cursor branco piscando (barra arredondada de 3px × 1,1em, blink 0.7s step-end infinite, opacidade 0↔1) segue a última letra digitada.

Tempos (setTimeout): CHAR_INTERVAL=140ms, TYPE_START=600ms. Revela letra i em TYPE_START + i*CHAR_INTERVAL. LIFT_AT = TYPE_START + 6*CHAR_INTERVAL + 700. Esconde o cursor em LIFT_AT-150. Em LIFT_AT, levanta o overlay translateY(-100%) com transform 1.5s cubic-bezier(0.45,0,0.15,1) E aciona a subida da casa. Em LIFT_AT+1300, fade in do texto do herói (opacity 0→1, translateY(-28px)→0, 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s). Em LIFT_AT+2100, define liftDone, desabilita a transição do overlay (estacionado fora da tela) e entrega o controle da casa ao manipulador de rolagem.

Seção 2 — Navegação fixa

Navegação superior fixa z-50, padding px-6 md:px-10 lg:px-16, py-5 md:py-6, flex justify-between. Esquerda: Velar. em Syne text-xl, peso das letras 700 / ponto 900, cor = navColor. Direita: hambúrguer — duas linhas empilhadas de 28px×1px, a superior encolhe para w-5 ao passar o mouse; quando aberto, troca para Lucide X (tamanho 24).

Comportamento de rolagem: se qualquer seção escura (banda escura da Seção 5 + galeria da Seção 6) sobrepor o topo da viewport (rect.top <= 0 && rect.bottom > 0), navColor = '#ffffff', caso contrário '#213138'. Transição color 0.35s ease.

Menu móvel: overlay #f5f0ea de tela cheia (z-40), centralizado, 4 links empilhados — Residences, Story, Listings, Inquire — Syne text-4xl, font-light, tracking-widest, maiúsculas, preto, hover text-gray-500. Clicar fecha.

Seção 3 — Herói

<section> position:relative; min-height:100vh; overflow:visible, BG_IMG como fundo cover/center. Bloco de texto do herói z-index:10, oculto inicialmente, aparece com fade+slide de acordo com o tempo do preloader.

• Linha superior .hero-heading-top (px-6 md:px-10 lg:px-16, flex items-end justify-between, margin-bottom:-0.04em): esquerda LIVE IN (.hero-own-the, Syne 800, maiúsculas, preto, letter-spacing:-0.03em, line-height:1); direita apenas para desktop .hero-subtitle-desktop (Syne 700, clamp(10px,0.95vw,14px), largura máxima 300, opacidade 0.7, alinhado à direita): "Casas imponentes construídas com visão, / escopo e requinte arquitetônico."

…