/* Capa + modo cinema dos vídeos do site: o "Último Vídeo do Canal" da home e
   o vídeo do "Como Jogar" de /downloads. O JS par é o public/js/video_teatro.js.
   Saiu do <style> da home para os dois usarem a mesma coisa — os nomes
   home-video-* ficaram para não mexer na home.

   Proporção 16:9 pelo padding, não por aspect-ratio: o iframe do YouTube vem
   com width/height fixos no atributo, e é o invólucro que manda nele.
   As duas margens "auto" (aqui e no .home-video-canal da home) centram o par
   player+link na sobra do card da home (fora de flex, como em /downloads, o
   auto vale 0): o card acompanha a altura do card dos eventos, que é maior,
   e sem isso o vídeo ficava colado no título com um vazio embaixo. O título
   não entra na conta de propósito — ele tem de ficar na mesma linha do
   "Eventos em Destaque" do card ao lado. */
.home-video-frame {
  margin-top: auto;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.home-video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- A capa (o que ocupa o lugar do player até o clique) -------------- */

.home-video-play {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

.home-video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  /* cover porque a thumbnail reserva (hqdefault) é 4:3 e vem com tarja preta
     em cima e embaixo — o corte tira exatamente as tarjas. */
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

/* Véu leve: a thumbnail costuma ter arte clara embaixo do play, e sem ele o
   botão some no meio do desenho. Alivia no hover. */
.home-video-play::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(8, 7, 6, .18), rgba(8, 7, 6, .42));
  transition: opacity .35s ease;
}

.home-video-play:hover .home-video-thumb,
.home-video-play:focus .home-video-thumb {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.home-video-play:hover::before,
.home-video-play:focus::before {
  opacity: .55;
}

/* O triângulo é feito de bordas: o site carrega o Font Awesome 4.7, e depender
   de um ícone dele aqui deixaria o play sumido se a fonte falhar. */
.home-video-play-ico {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(8, 7, 6, .72);
  border: 1px solid var(--line-2, rgba(233, 198, 107, .28));
  box-shadow: 0 0 0 6px rgba(8, 7, 6, .28), 0 10px 30px rgba(0, 0, 0, .55);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.home-video-play-ico::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 18px solid var(--blood, #c8503f);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.home-video-play:hover .home-video-play-ico,
.home-video-play:focus .home-video-play-ico {
  background: rgba(20, 16, 12, .88);
  border-color: var(--gold, #e9c66b);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---- Modo cinema ------------------------------------------------------ */

/* O buraco que o quadro deixa no card enquanto está no centro da tela.
   ⚠️ padding-bottom e margin-top são cópia fiel do .home-video-frame, e é
   isso que faz o card não mudar de altura no instante da abertura — o
   contrário de tudo que a animação quer passar. Mexeu lá, mexa aqui (o teste
   compara os dois). */
.home-video-slot {
  width: 100%;
  padding-bottom: 56.25%;
  margin-top: auto;
}

.home-video-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  background: rgba(8, 7, 6, .92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .42s ease;
}

.home-video-backdrop.is-open {
  opacity: 1;
}

/* ⚠️ o quadro ampliado é o PRÓPRIO .home-video-frame promovido a fixed pelo
   JS — nunca um clone, nunca reparentado. Tirar o iframe do lugar no DOM
   recarrega o player, e o vídeo voltaria do zero no meio da animação. Por
   isso também nenhum ancestral dele pode ganhar transform/filter/contain:
   qualquer um dos três faz o position:fixed passar a valer em relação ao
   ancestral, e o quadro abre no lugar errado. */
.home-video-frame.is-teatro {
  position: fixed;
  z-index: 9999;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--line-2, rgba(233, 198, 107, .28));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .75);
}

/* Só durante a viagem. Transform é a única coisa animada: não reflui nada em
   volta, e o vídeo continua rodando enquanto cresce. */
.home-video-frame.is-animando {
  transition: transform .42s cubic-bezier(.2, .8, .25, 1);
  will-change: transform;
}

/* Na volta o quadro já voltou para o fluxo do card, mas precisa ficar por
   cima do fundo escuro até a animação acabar. */
.home-video-frame.is-voando {
  z-index: 9999;
}

.home-video-fechar {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10000;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2, rgba(233, 198, 107, .28));
  background: rgba(8, 7, 6, .72);
  color: var(--gold, #e9c66b);
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .42s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.home-video-fechar.is-open {
  opacity: 1;
}

.home-video-fechar:hover,
.home-video-fechar:focus {
  background: rgba(20, 16, 12, .9);
  border-color: var(--gold, #e9c66b);
  color: #fff5da;
}

/* No <html>, não no <body> — ver travarRolagemDaHome em public/js/video_teatro.js. */
html.home-video-aberto {
  overflow: hidden;
}

/* O "voltar ao topo" é injetado por plugin com z-index máximo NO ATRIBUTO
   style, então nada de z-index o alcança daqui — mas ele não declara display,
   e é por aí que se esconde. Ficaria boiando sobre o fundo escuro, e sem
   função nenhuma: a rolagem está travada. */
html.home-video-aberto #scrollUp {
  display: none;
}

/* Quem pediu menos movimento continua tendo o modo cinema — o que sai é o
   salto. O quadro já nasce no lugar final e só o escurecer aparece, curto.
   (O JS lê a mesma media query e pula a conta do FLIP.) */
@media (prefers-reduced-motion: reduce) {
  .home-video-frame.is-animando {
    transition: none;
  }

  .home-video-thumb,
  .home-video-play-ico {
    transition: none;
  }

  .home-video-play:hover .home-video-thumb,
  .home-video-play:focus .home-video-thumb {
    transform: none;
  }

  .home-video-backdrop,
  .home-video-fechar {
    transition-duration: .12s;
  }
}