/* =========================================================
   HERO EM FILME — os vídeos de /video conduzidos pela rolagem
   Par de assets/js/hero-filme.js. Os arquivos ficam em
   assets/video/hero/ (gerados por scripts/prepararVideosHero.js).

   Camadas do .hero--filme:
   - .hero__filme: preso no topo da tela (sticky) durante toda a
     seção; o margin-bottom negativo tira a altura dele do fluxo, e
     o conteúdo do Hero passa por cima.
       .hero__telas  os <video>, um por cima do outro (o seguinte
                     entra em fusão sobre o anterior);
       .hero__veu    o fundo da página por cima do vídeo enquanto o
                     texto está na tela; some conforme ele sai;
       .hero__campo  a grade do NØEMA, que sai junto com o texto;
       ::after       degradê para o fundo da página no fim do filme.
   - .hero__conteudo: o texto e o palco 3D, como antes.
   - .hero__trilho: a distância de rolagem do filme (segundos de
     vídeo × --filme-ritmo).

   Variáveis postas pelo JS no .hero--filme:
   --saida  0 → 1 conforme o conteúdo sai da tela
   --fim    0 → 1 no trecho final do filme
   --filme-segundos  duração total do filme (lista.json)
   ========================================================= */
.hero--filme {
  /* Duração da lista atual; o JS confirma pela lista.json. O valor
     aqui só evita a página "pular" de altura até a lista chegar. */
  --filme-segundos: 35;
  /* Rolagem por segundo de vídeo */
  --filme-ritmo: 13svh;
  --saida: 0;
  --fim: 0;
  --veu-max: 0.86;
  min-height: 0;
}

.hero__filme {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  margin-bottom: -100svh;
  overflow: hidden;
  pointer-events: none;
}

.hero__telas {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0b1727 url("../video/hero/poster.jpg") center / cover no-repeat;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
}

/* Sem controles nativos (inclusive o play grande do iPhone) */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  opacity: calc(var(--veu-max) * (1 - var(--saida)));
}

/* O texto e o palco se apagam enquanto sobem: quando o vídeo fica
   limpo, já não há letra por cima dele. */
.hero--filme .hero__conteudo { opacity: calc(1 - var(--saida)); }

/* A grade do Hero vive dentro do quadro preso e sai junto com o texto */
.hero--filme .hero__campo {
  z-index: 2;
  opacity: calc(1 - var(--saida));
}

/* Fim do filme: o vídeo se funde ao fundo da seção seguinte */
.hero__filme::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(0deg, var(--bg) 0, transparent 42%);
  opacity: var(--fim);
}

.hero__trilho {
  height: calc(var(--filme-segundos) * var(--filme-ritmo));
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .hero--filme { --filme-ritmo: 10svh; }
}

/* Sem JS ou com menos movimento: fica o primeiro quadro, parado,
   atrás do texto, e o Hero volta à altura normal. */
html:not(.js) .hero__trilho { height: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero__trilho { height: 0; }
}