# Hero com vídeo de fundo (`hero-video`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Abertura com vídeo mudo em loop atrás do texto, camada da cor da marca para contraste e botão de pausa. No celular, com economia de dados ou com movimento reduzido, mostra só a imagem de capa.

- **Categoria:** Abertura
- **Equivalente no Elementor:** Seção com Fundo de Vídeo (Background Video)
- **Arquivos:** `hero-video.html`, `hero-video.css`, `hero-video.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-hero-video`, `data-ds-video`, `data-ds-hero-video-pausa`)
- **Depende de:** `botao`

## Quando usar
- Projeto em que o ambiente conta a história (evento, espaço físico, bastidor)
- Vídeo curto (até 15 segundos) que funciona sem som

## Quando não usar
- Se a mensagem depende do vídeo (use vídeo incorporado)
- Página que precisa ser muito leve no celular: prefira o hero com imagem

## Variações
- **Com vídeo:** data-ds-video="video/fundo.mp4" no <video>
- **Só imagem de capa:** data-ds-video vazio

## Conteúdo esperado
- Arquivo MP4 curto e comprimido (H.264, sem áudio, até uns 5 MB)
- Imagem de capa (poster)
- h1, subtítulo, botão

## Acessibilidade
- Botão de pausa visível sempre que o vídeo toca (WCAG 2.2.2)
- Não toca com prefers-reduced-motion
- Vídeo é decorativo: aria-hidden, sem som
- Camada da marca sobre o vídeo mantém o contraste do texto

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/botao/botao.css">
<link rel="stylesheet" href="componentes/hero-video/hero-video.css">
<script src="componentes/hero-video/hero-video.js" defer></script>
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-cor-destaque-2`, `--ds-cor-fundo-marca`, `--ds-cor-sobre-destaque-2`, `--ds-cor-sobre-marca`, `--ds-cor-texto`, `--ds-espaco-4`, `--ds-secao-y-desktop`, `--ds-secao-y-mobile`, `--ds-tamanho-texto-grande`.

## Notas

Hospedagem compartilhada: o MP4 fica na pasta do site. Para vídeo grande, prefira o componente vídeo incorporado (YouTube ou Vimeo).