/* ------------------------------------------------------------------
   Camada propria do site umaautistadosanos90.com.br
   NAO vem do site-fonte da autora. Nao e sobrescrita ao reimportar.

   As tags que carregam esta camada ficam no index.html, QUE E REGERADO.
   Depois de todo reimport rode: python aplicar-extras.py

   Torna clicavel o card de capitulo cujo episodio ja esta no ar,
   levando ao video no YouTube pelo link curto /epN.
   ------------------------------------------------------------------ */

.cap-card--assistir { cursor: pointer; }

/* area clicavel cobrindo o card inteiro */
.cap-card__link {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 0;
  border-radius: inherit;
}
.cap-card__link span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3px de ouro (igual ao padrao global do site) com forro escuro, para ler
   sobre qualquer arte. Offset -5px: o card sobe 10px no foco e o .trilho
   so tem .4rem de folga, entao offset menor seria clipado no topo. */
.cap-card__link:focus-visible {
  outline: 3px solid var(--ouro-claro);
  outline-offset: -5px;
  box-shadow: inset 0 0 0 8px rgba(0, 0, 0, .78);
}

/* o carrossel virou ponto de tabulacao: precisa de foco visivel */
.trilho:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

/* botao de play sobre a ilustracao */
.cap-play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 3;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(224, 160, 23, .92);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .5);
  transition: scale .25s cubic-bezier(.2,.7,.3,1), background .25s, opacity .3s;
  pointer-events: none;
}
.cap-play svg { width: 22px; height: 22px; fill: #17160F; margin-left: 3px; }

.cap-card--assistir:hover .cap-play,
.cap-card--assistir:focus-within .cap-play {
  scale: 1.12;
  background: var(--ouro-claro);
}

/* play parado por cima de video rodando le como "pausado".
   Inerte hoje (os <video data-previa> estao comentados no index.html). */
.cap-tela video[data-tocando] ~ .cap-play { opacity: 0; }

/* escurece um pouco a arte para o play destacar.
   ::before de proposito: estilo.css ja usa .cap-tela::after para o scrim
   da autora. Sem z-index de proposito: assim fica acima do <img> e abaixo
   do video (z:1), da tarja (z:2) e do play (z:3). */
.cap-card--assistir .cap-tela::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 55%, transparent 78%);
  opacity: .9;
  transition: opacity .3s;
  pointer-events: none;
}
.cap-card--assistir:hover .cap-tela::before { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .cap-play { transition: none; }
  .cap-card--assistir:hover .cap-play,
  .cap-card--assistir:focus-within .cap-play { scale: 1; }
}