/* Base comum das heros alternativas da home (public/hero/<id>.html + css/hero/<id>.css).
   Quem escolhe qual hero está no ar é a aba "Hero do site" do painel (dados/hero.json).
   Regras de todas as variações:
   - o estado SEM animação já é o layout final (nada começa invisível); a entrada usa `backwards` no preenchimento.
     Decisão do Fernando (17/10/2026): o movimento da hero roda MESMO com "reduzir movimento" ligado no
     sistema (muita gente tem isso desligado sem saber); o botão de pausa fica sempre visível;
   - o texto é HTML de verdade (SEO, leitor de tela); foto e vídeo são decoração (alt vazio);
   - vídeo só entra pelo JS (js/hero-variantes.js), depois do carregamento, e tem botão de pausa. */

/* A .hero do style.css traz espaçamento e regras de título pensadas para a hero clássica:
   aqui a gente zera o que atrapalha. */
.hero.hv {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 100svh; padding: 0;
  background: #07130d; color: var(--text-main);
}
.hero.hv h1 { max-width: none; margin: 0; font-family: var(--font-script); font-weight: 500; letter-spacing: -.02em; }
.hero.hv h1 em { display: inline; font-size: inherit; margin: 0; line-height: inherit; letter-spacing: inherit; animation: none; }
.hero.hv h1 .linha { display: block; overflow: hidden; padding-block: 0; margin-block: 0; padding-bottom: .06em; }
.hero.hv h1 .linha > span { display: inline-block; animation: none; }
.hero.hv .hv-conteudo {
  position: relative; z-index: 3; flex: 1;
  width: min(100% - 2 * var(--gutter), 1360px); margin-inline: auto;
  /* O cabeçalho do site é fixo: o conteúdo começa abaixo dele. */
  padding-top: clamp(6rem, 11vh, 7.5rem); padding-bottom: clamp(1.5rem, 4vh, 2.75rem);
  display: flex; flex-direction: column;
}

/* Camadas de fundo */
.hv-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hv-fundo img, .hv-fundo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Vídeo: o pôster (img) é o que aparece primeiro e o que conta como LCP; o vídeo entra por cima. */
.hv-video { opacity: 0; pointer-events: none; }
.hv-video.tocando { opacity: 1; }

/* Gradiente dourado que "varre" a palavra em destaque */
.hv-ouro {
  background: linear-gradient(100deg, #c5a653 0 38%, #f6e7b4 50%, #c5a653 62% 100%);
  background-size: 260% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Botões do site, só um pouco maiores aqui */
.hero.hv .hv-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hero.hv .hv-acoes .btn { min-height: 52px; }
.hero.hv .hv-acoes .btn-ghost { background: rgba(13, 30, 22, .5); border-color: rgba(197, 166, 83, .5); }

.hero.hv .hv-texto { margin: 0; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.6; color: #d6e0db; max-width: 46ch; }
.hero.hv .hv-olho { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: #c9d6cf; }

/* Pausar / retomar o movimento (WCAG 2.2.2). O JS tira o `hidden` quando há movimento. */
.hv-pausa {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: rgba(13, 30, 22, .72); border: 1px solid var(--border-strong); color: var(--primary);
  cursor: pointer; transition: border-color .3s, color .3s;
}
.hv-pausa[hidden] { display: none; }
.hv-pausa:hover { border-color: var(--primary); color: var(--primary-hover); }
.hv-pausa:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.hv-pausa svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv-pausa .i-tocar { display: none; }
.hv-pausa[aria-pressed="true"] .i-pausar { display: none; }
.hv-pausa[aria-pressed="true"] .i-tocar { display: block; }

/* Pausado pelo botão, ou hero fora da tela: todo o movimento da hero para. */
.hero.hv.hv-pausado *, .hero.hv.hv-pausado *::before, .hero.hv.hv-pausado *::after,
.hero.hv.fora-de-vista *, .hero.hv.fora-de-vista *::before, .hero.hv.fora-de-vista *::after { animation-play-state: paused !important; }