/* cinema.css: a faixa do vídeo logo abaixo do topo. O vídeo da câmera do estúdio se montando em loop vai de ponta a
   ponta, escurecido, com o pé descendo em degradê até o preto; a fileira do canal (canal.css, .canal--sobre-video)
   sobe por cima desse pé. No computador a faixa cabe com as abas na primeira tela. No Sobre ela é mais baixa
   (.cinema--baixa), como a capa de um canal. No telefone o vídeo vira a primeira tela inteira, no jeito do site das
   garotas (ver o @media do telefone). Depende de: base.css. Telefone nas regras soltas, o desenho de tela inteira do
   telefone e o computador nos dois @media do fim. */

.cinema { background: var(--preto); color: var(--branco); }

.cinema__tela { position: relative; height: 440px; }

/* o alto escurece um pouco, o meio fica limpo pra câmera e o pé escurece até virar o preto da faixa */
.cinema__tela::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(17, 17, 17, .35) 0, rgba(17, 17, 17, 0) 20%, rgba(17, 17, 17, 0) 38%,
    rgba(17, 17, 17, .8) 64%, rgba(17, 17, 17, .95) 84%, var(--preto) 100%);
}

.cinema__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* o crédito fica no alto, porque o pé do vídeo é da fileira do canal */
.cinema__credito {
  position: absolute; z-index: 1; top: 10px; right: 10px; padding: 2px 7px; border-radius: 4px;
  background: var(--etiqueta); color: var(--branco); font-size: 11px; font-weight: 600;
}

.cinema--baixa .cinema__tela { height: 340px; }

/* na faixa baixa o recorte sobe, pra as lentes, que são o que se reconhece da câmera, ficarem inteiras */
.cinema--baixa .cinema__video { object-position: 50% 15%; }

/* No telefone o vídeo é o fundo da primeira tela, com a barra transparente por cima (topo.css) e a fileira do canal
   ancorada no pé (canal.css): a faixa vira uma coluna que empurra a fileira pra baixo. O alto escurece mais que no
   computador, porque os três tracinhos e a lupa ficam em cima do vídeo. Nas páginas de dentro também é a tela toda: o
   dono quis o vídeo inteiro na primeira tela e o conteúdo da página logo abaixo da dobra. */
@media (max-width: 899.98px) {
  .cinema { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; }

  .cinema__tela,
  .cinema--baixa .cinema__tela { position: absolute; inset: 0; height: auto; }

  .cinema__tela::after {
    background: linear-gradient(180deg,
      rgba(17, 17, 17, .6) 0, rgba(17, 17, 17, .12) 22%, rgba(17, 17, 17, .12) 42%,
      rgba(17, 17, 17, .82) 70%, var(--preto) 100%);
  }

  /* o crédito desce pra baixo da barra, que agora mora em cima do vídeo */
  .cinema__credito { top: 62px; right: var(--margem); }
}

@media (min-width: 900px) {
  /* 120px é o que fica fora do vídeo na primeira tela: o topo e as abas */
  .cinema__tela { height: min(56.25vw, calc(100vh - 120px)); }
  .cinema__credito { top: 14px; right: 14px; font-size: 12px; }
  .cinema--baixa .cinema__tela { height: min(36vw, 440px); }
}