/* =============================================================================
 * medicina-video-bg.css — Fundo em VÍDEO (YouTube) para o tema "medicina-moderna"
 * SOMENTE na Home. O vídeo é hospedado pelo YouTube (custo de banda/egress = 0
 * pro nosso servidor). A foto de neurônio (#bgArtImg) continua atrás, como tela
 * de espera enquanto o vídeo carrega / quando o vídeo não pode tocar (autorizado
 * pelo dono como fallback em 2026-06-06).
 *
 * Só entra em ação quando body[data-medbg="video"] está presente — marca posta
 * por medicina-video-bg.js apenas no tema medicina + home + movimento ligado.
 * Nenhum outro tema é tocado.
 * ============================================================================= */

/* Camada do vídeo: cobre a viewport inteira, dentro do .bg-art (que já é
   position:fixed; inset:0; overflow:hidden; pointer-events:none). */
.bg-art__video{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  /* acima da foto de espera (#bgArtImg) e da camada WebGL (#telosArtWebGL,
     z-index auto), abaixo dos clarões de sinapse (.bg-art::before/::after,
     z-index:2). */
  z-index:1;
  opacity:0;
  transition:opacity .6s ease;
  /* PÔSTER: um quadro do PRÓPRIO vídeo (já sem o botão), mostrado PARADO durante
     a espera — enquanto o YouTube pisca o ícone de pausa com o iframe ainda
     invisível. Quando o vídeo aparece, é a MESMA cena: sem buraco preto, sem
     salto de cor, sem botão. (substitui a foto de neurônio verde como tela de
     espera, que destoava do vídeo vermelho.) */
  background:#0a0306 url("/pinturas-temas/medicina-moderna/_video-poster.jpg") center/cover no-repeat;
}
/* O wrap (com o pôster) aparece já no estado "poster" (espera) e segue no
   "video" (vídeo revelado). */
body[data-medbg="poster"] .bg-art__video,
body[data-medbg="video"]  .bg-art__video{ opacity:1; }

/* Técnica "cover" pro iframe 16:9 preencher qualquer proporção de tela sem
   barras pretas: centraliza e cresce até cobrir os dois eixos. */
.bg-art__video iframe{
  position:absolute;
  top:50%; left:50%;
  /* O scale(1.4) amplia o vídeo além do necessário pra cobrir, empurrando a
     faixa do YouTube (título + canal no topo, eventual marca no rodapé) pra
     FORA da tela — o excesso fica cortado pelo overflow:hidden do .bg-art.
     Fica só o miolo do vídeo, sem nenhum texto do YouTube. */
  transform:translate(-50%, -50%) scale(1.4);
  width:100vw;
  height:56.25vw;        /* 100vw * 9/16 */
  min-width:177.78vh;    /* 100vh * 16/9 */
  min-height:100vh;
  border:0;
  pointer-events:none;   /* nenhuma UI do YouTube no hover, clique atravessa */
  /* O iframe (vídeo AO VIVO) fica invisível enquanto o YouTube pisca o ícone de
     pausa nos primeiros ~3s; aparece só no estado "video" (posto pelo JS depois
     do piscar), suave, por cima do pôster idêntico. */
  opacity:0;
  transition:opacity .6s ease;
}
body[data-medbg="video"] .bg-art__video iframe{ opacity:1; }

/* Com o vídeo ativo, a foto de espera fica imóvel atrás (o Ken Burns não tem
   por que rodar embaixo de um vídeo opaco) e a camada WebGL é desligada — não
   faz sentido a GPU renderizar a foto parada sob o vídeo. */
body[data-medbg="poster"] .bg-art__img,
body[data-medbg="video"]  .bg-art__img{
  animation:none !important;
  transform:scale(1.02);
}
body[data-medbg="poster"] #telosArtWebGL,
body[data-medbg="video"]  #telosArtWebGL{ display:none !important; }

/* O pulso global de cor (hue-rotate) do tema medicina recoloriza o container
   inteiro — sobre um vídeo real isso vira distorção. Desligamos o pulso quando
   o vídeo está ativo pra as cores do vídeo saírem fiéis. Os clarões de sinapse
   (::before/::after, screen-blend) continuam, como brilho por cima do vídeo. */
body[data-medbg="poster"] .bg-art,
body[data-medbg="video"]  .bg-art{
  animation:none !important;
  filter:none !important;
}