/* =====================================================================
   VÍDEO DO YOUTUBE com fachada (js/video-youtube.js)
   Até o clique é só a capa e o botão: nada do YouTube desce (o player embutido traz quase 1 MB
   de código e cookies). No clique, o player entra no lugar e já começa a tocar.

   <div class="video-yt" data-yt="ID_DO_VIDEO" data-titulo="Tour pelo Kaioken Tattoo">
     <a class="video-yt__link" href="https://youtu.be/ID_DO_VIDEO">
       <img class="video-yt__capa" src="assets/img/..." alt="" width="1280" height="720" loading="lazy">
       <span class="video-yt__play" aria-hidden="true"></span>
       <span class="video-yt__titulo">Tour pelo Kaioken Tattoo</span>
     </a>
   </div>

   Sem JavaScript, o link abre o vídeo no YouTube. A largura vem de quem usa (a seção); a
   altura sai da proporção 16:9. Cores: as do hero (dourado do item selecionado, contorno
   marinho, creme do título).
   ===================================================================== */
.video-yt{
  position:relative; width:100%; aspect-ratio:16 / 9;
  overflow:hidden; isolation:isolate; border-radius:12px;
  background:#0a2d55;
}
.video-yt__link{ position:absolute; inset:0; display:block; color:#fff; text-decoration:none; cursor:pointer }
.video-yt__link:focus{ outline:none }
.video-yt__link:focus-visible{ outline:3px solid #ffd23f; outline-offset:-3px }
.video-yt__capa{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease, filter .3s ease;
}
/* vinheta: o botão e o título ficam legíveis em qualquer capa */
.video-yt__link::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(4,20,40,.55));
}
.video-yt__link:hover .video-yt__capa, .video-yt__link:focus-visible .video-yt__capa{ transform:scale(1.03); filter:brightness(1.08) }

/* botão: esfera dourada com contorno marinho, triângulo de play no meio */
.video-yt__play{
  position:absolute; left:50%; top:50%; z-index:1; translate:-50% -50%;
  width:clamp(60px, 13%, 116px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff3a8 0 12%, #ffd23f 36%, #ff9d12 72%, #e0640a 100%);
  border:4px solid #0a2d55;
  box-shadow:0 0 0 3px #fff6cf, 0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s ease;
}
.video-yt__play::before{
  content:""; position:absolute; inset:29% 24% 29% 37%;
  background:#0a2d55; clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.video-yt__link:hover .video-yt__play, .video-yt__link:focus-visible .video-yt__play{ transform:scale(1.08) }

.video-yt__titulo{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:2.2em 1em .9em;
  font-weight:700; font-size:clamp(14px, 1.5vw, 20px); line-height:1.2;
  text-shadow:0 2px 0 #0a2d55, 0 0 6px rgba(4,20,40,.8);
  background:linear-gradient(transparent, rgba(4,20,40,.75));
}

/* tocando: o player ocupa a caixa inteira */
.video-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

@media (prefers-reduced-motion: reduce){
  .video-yt__capa, .video-yt__play{ transition:none }
}