/* Vídeo da hero da home (TXAI-05). A foto do banner fica por baixo: aparece enquanto o vídeo carrega,
   se ele falhar e com movimento reduzido. O vídeo só entra (opacidade) quando começa a tocar. */
.hero-video {
  position: absolute;
  inset: 0;
  /* Acima do slide ativo do bxSlider (fade: z-index 50 inline) e abaixo do .content (100) */
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-video.tocando {
  opacity: 1;
}
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mesmo enquadramento da foto (background-position: center top 8.4%) */
  object-position: center 8.4%;
}
/* Leve escurecimento na base: o vídeo pode ser mais claro que a foto e a frase precisa continuar legível */
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .3) 100%);
}

/* Com vídeo, a frase "para se sentir em paz / e com saudade da Bahia" sai da tela, mas fica no HTML (alt da imagem)
   para leitor de tela e SEO. Sem vídeo (arquivo ausente, erro, movimento reduzido) ela volta. */
#top .content.hero-frase-oculta {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  #top .content.hero-frase-oculta {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
}