/* ===== Ao vivo agora (streamers no TikTok, no banner da home) =====
   Formato de stories: foto num circulo com anel vermelho e o selo AO VIVO
   por cima da borda de baixo, do jeito que o proprio TikTok marca quem esta
   em live. Fica no espaco livre do banner, acima do selo do evento.
   Preenchido pelo scripts/aovivo.js. O unico vermelho e o do TikTok
   (#fe2c55), para ser reconhecido de longe; a caixa repete a dos botoes do
   banner (#111113, borda fina, cantos de 14px), sem brilho. */

/* Abre e fecha animando a altura (0fr ate 1fr): o banner e centralizado na
   vertical, e a faixa aparecendo de uma vez faria o titulo pular. */
.aovivo-banner {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  max-width: 100%;
  opacity: 0;
  transition: grid-template-rows 0.45s ease, opacity 0.35s ease;
}

.aovivo-banner.aberto {
  grid-template-rows: 1fr;
  opacity: 1;
}

.aovivo-banner[hidden] { display: none; }

.aovivo-dobra {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.aovivo-faixa {
  --aovivo-fundo: #111113;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 22px;
  padding: 14px 16px 10px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 14px;
  background: var(--aovivo-fundo);
}

/* Como o resto do banner: centralizado no celular, a esquerda no computador. */
.aovivo-cabeca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}

@media (min-width: 1024px) {
  .aovivo-cabeca { justify-content: flex-start; }
}

.aovivo-pulso {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #fe2c55;
}

/* Quantos estao ao vivo: "AO VIVO AGORA NO TIKTOK · 12". */
.aovivo-total::before {
  content: '·';
  margin-right: 9px;
  color: rgb(var(--muted-foreground));
}

.aovivo-total[hidden] { display: none; }

.aovivo-total { font-variant-numeric: tabular-nums; }

/* As setas sao as .cat-seta do menu (core.css: visual, e somem no celular e
   no tablet). Ficam no canto de cima, na altura do titulo, fora do fluxo:
   aparecer e sumir nao muda a altura da faixa. */
.aovivo-setas {
  position: absolute;
  top: 7px;
  right: 10px;
  display: flex;
  gap: 6px;
}

/* Uma fileira so, que desliza para o lado quando nao cabe (a borda do lado
   que tem mais esmaece: data-antes / data-depois, postos pelo script).
   O padding de cima e de baixo da espaco para a onda do anel. */
.aovivo-lista {
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 8px 16px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* O encaixe conta a partir do padding: sem isto a fileira ja abria rolada
     16px, com a seta da esquerda e o esmaecer aparecendo sem nada antes. */
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  list-style: none;
}

.aovivo-lista::-webkit-scrollbar { display: none; }

.aovivo-lista > li {
  flex: none;
  scroll-snap-align: start;
}

/* Centraliza quando cabe e continua rolando certo quando nao cabe (com
   justify-content: center, as primeiras bolinhas ficariam inalcancaveis). */
.aovivo-lista > li:first-child { margin-left: auto; }
.aovivo-lista > li:last-child { margin-right: auto; }

@media (min-width: 1024px) {
  .aovivo-lista > li:first-child { margin-left: 0; }
}

.aovivo-lista[data-depois='true'] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

.aovivo-lista[data-antes='true'] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
}

.aovivo-lista[data-antes='true'][data-depois='true'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

/* position: relative prende o texto de leitor de tela (.sr-only, absoluto)
   dentro da bolinha. Sem isso ele ficava fora da fileira que desliza e
   alargava a pagina inteira no celular. */
.aovivo-story {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 78px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

/* Anel vermelho com um respiro escuro entre ele e a foto. */
.aovivo-anel {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  margin-bottom: 9px;
  padding: 3px;
  border: 2px solid #fe2c55;
  border-radius: 50%;
}

@media (min-width: 640px) {
  .aovivo-story { width: 84px; }
  .aovivo-anel { width: 68px; height: 68px; }
}

/* Onda fina saindo do anel: o sinal de "acontecendo agora". */
.aovivo-anel::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid #fe2c55;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@keyframes aovivo-onda {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.14); }
}

@keyframes aovivo-piscar {
  50% { opacity: 0.3; }
}

/* Respeita o sistema e o "menos animacao" dos ajustes da loja. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-menos-animacao='sim']) .aovivo-anel::after { animation: aovivo-onda 2.4s ease-out infinite; }
  :root:not([data-menos-animacao='sim']) .aovivo-pulso { animation: aovivo-piscar 1.6s ease-in-out infinite; }
}

:root[data-menos-animacao='sim'] .aovivo-banner { transition: none; }

.aovivo-foto {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
}

.aovivo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.aovivo-story:hover .aovivo-foto img { transform: scale(1.07); }

.aovivo-story:focus-visible { outline: none; }
.aovivo-story:focus-visible .aovivo-anel {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 4px;
}

/* Selo em cima da borda de baixo do anel. A borda da cor da caixa "corta"
   o anel em volta dele. */
.aovivo-selo {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 3px 6px;
  border: 2px solid var(--aovivo-fundo);
  border-radius: 5px;
  background: #fe2c55;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

/* Sorteio aberto (Worker plf-sorteio): um presente na cor do tema no canto de
   cima do anel, cortado pela cor da caixa como o selo AO VIVO. A bolinha leva
   para a pagina do sorteio. */
.aovivo-sorteio {
  position: absolute;
  top: -5px;
  right: -7px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid var(--aovivo-fundo);
  border-radius: 50%;
  background: hsl(var(--primary));
  color: #09090b;
}

.aovivo-sorteio svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

.aovivo-nome {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* "Em breve": so preenche o vazio quando ha um ao vivo. Anel tracejado na
   cor do tema (lugar guardado, nao live), sem onda, sem selo, nome apagado.
   A foto e a logo do tema escolhido: quem mostra a certa sao as regras da
   logo do cabecalho (.logo-tema-padrao / .logo-tema-amarelo, em core.css e
   halloween.css). Por isso .aovivo-arte NAO mexe em display: venceria
   essas regras e mostraria as duas logos juntas. */
.aovivo-em-breve { cursor: default; }

.aovivo-em-breve .aovivo-anel { border: 2px dashed hsl(var(--primary) / 0.55); }
.aovivo-em-breve .aovivo-anel::after { display: none; }

.aovivo-em-breve .aovivo-foto {
  display: grid;
  place-items: center;
  background: hsl(var(--primary) / 0.14);
}

/* Grid: as duas logos ocupam a mesma celula (so uma aparece por vez). */
.aovivo-arte {
  grid-area: 1 / 1;
  width: 76%;
  height: 76%;
  object-fit: contain;
}

/* Alarga o que precisar para o nome caber inteiro em qualquer idioma
   ("Prossimamente" nao cabe nos 78px de uma bolinha). */
.aovivo-story.aovivo-em-breve {
  width: auto;
  min-width: 78px;
}

@media (min-width: 640px) {
  .aovivo-story.aovivo-em-breve { min-width: 84px; }
}

.aovivo-em-breve .aovivo-nome {
  overflow: visible;
  text-overflow: clip;
  color: rgb(var(--muted-foreground));
}

.aovivo-vendo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 15px;
  font-size: 11px;
  color: rgb(var(--muted-foreground));
}

.aovivo-vendo svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.aovivo-vendo strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .aovivo-banner,
  .aovivo-foto img { transition: none; }
  .aovivo-story:hover .aovivo-foto img { transform: none; }
}