/* ============================================================
   BILHART'S — Vídeos Story: a faixa, o player e a barra fixa

   ⚠️ ESTE ARQUIVO SERVE A DUAS PÁGINAS: a de produto (/produtos/:slug) e a
   home. Ele nasceu dentro do produto.css e saiu de lá inteiro quando a home
   ganhou a mesma faixa — copiar 700 linhas de CSS seria garantir que as
   duas telas divergissem no primeiro ajuste, e a divergência só apareceria
   na página que ninguém abriu naquele dia.

   Carregado por `page.styles` nas duas (ver _controllers/produtosController.js
   e _controllers/homeController.js), DEPOIS do tokens.css e do style.css,
   de onde vêm as cores, o `.wrap`, o `.sec`, o `.eyebrow`, o `.media` e as
   `.arrows`.

   O prefixo continua `pdst`/`pdbar` de propósito: ele está no HTML dos
   partials, no stories.js e no produto.js, e renomear tudo por causa da
   mudança de arquivo seria um diff enorme sem nenhum ganho — o que o nome
   diz ("página de produto") virou história, e a história está aqui.

   ---- A barra fixa (.pdbar) ----

   Ela é do celular e é a mesma nas duas páginas, com um conteúdo diferente:
   no produto, o nome do modelo e "Falar agora"; na home, o produto do vídeo
   que está tocando e "Saber mais" (ou "Todos os produtos", quando o mesmo
   vídeo está em vários). O que a MOSTRA também muda — no produto é a
   rolagem, na home é o player abrir —, e isso é JavaScript, não CSS.

   O que FICOU no produto.css são os efeitos colaterais que só valem lá: o
   rodapé ganhando respiro para a barra e o botão flutuante do WhatsApp
   saindo de cena. Na home a barra só aparece com o player aberto, e o
   player cobre a tela inteira — não há rodapé nem botão flutuante com que
   colidir.
   ============================================================ */

/* ================= VÍDEOS STORY: A FAIXA =================
   Mobile-first, como o resto da folha.

   No celular o trilho SANGRA além do respiro lateral da página: o card do
   meio começa no `--pad` e o seguinte aparece pela metade, para fora, pela
   borda da tela. É essa metade — e não uma seta ou um ponto — que diz que há
   mais adiante. Recortar o segundo card no limite do `.wrap` daria a
   impressão contrária, a de fila que acabou.

   A conta da largura, com `A = 100vw - --pad - gap`:
       card = A / 1.5   →   o que sobra à direita = A - A/1.5 = card / 2
   ou seja, exatamente meio card visível, em qualquer largura de tela. */
.pdstories {
  --st-gap: 12px;
  --st-card: calc((100vw - var(--pad) - var(--st-gap)) / 1.5)
}

.pdst {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  /* a sangria: sai do .wrap e vai até a borda da tela dos dois lados */
  margin-inline: 0;
  padding: 0 var(--pad);
  display: flex;
  gap: var(--st-gap);
  overflow-y: hidden;
  overflow-anchor: none;         /* senão o trilho abre deslocado */

  /* SEM ROLAGEM NATIVA NO EIXO X, e sem scroll-snap — a mesma escolha da
     `.pdf4` das fotos, pelo motivo aprendido lá: a inércia do toque
     atravessa três, quatro cards de uma vez, e o snap só decide ONDE ela
     para, não quantos passou. Quem move o trilho aqui é o gesto, tratado no
     produto.js (§7), que anda UM CARD por arraste — e é isso que também
     tira o salto da virada do último para o primeiro, porque o laço nunca
     precisa corrigir a posição no meio de um impulso.

     `pan-y` preserva a rolagem vertical da página; o scrollLeft continua
     funcionando por código mesmo com o overflow escondido. */
  overflow-x: hidden;
  touch-action: pan-y;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none       /* Edge legado */
}

.pdst::-webkit-scrollbar {
  display: none
}

.pdst > li {
  flex: 0 0 var(--st-card)
}

.pdst-card {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--bg3)
}

.pdst-card > img,
.pdst-card > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease-out)
}

/* ---------- o vídeo que toca sozinho no card ----------
   Um <video> só para a faixa inteira, que o produto.js MOVE de card em
   card — quatro elementos carregados ao mesmo tempo seriam quatro
   downloads vivos, e só um toca por vez.

   Ele entra por cima da capa e some junto quando sai: a capa continua
   embaixo, então o card nunca fica vazio entre uma reprodução e outra, nem
   enquanto o arquivo carrega. */
/* `.pdst-card > video.pdst-fundo` e não só `.pdst-fundo`: a regra de cima
   é `.pdst-card > video`, que tem um seletor de tipo a mais e ganharia na
   especificidade — o `transition: transform` dela apagava a transição de
   opacidade daqui, e o vídeo aparecia de estalo em vez de entrar. */
.pdst-card > video.pdst-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* o card inteiro é um botão; o vídeo não pode roubar o clique */
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);

  /* ⚠️ ESTE `z-index` É O QUE FAZ O VÍDEO APARECER.
     A capa do card é `.media>img`, e o style.css lhe dá `transform:
     scale(1.08)`. Transform cria contexto de empilhamento: a imagem passa a
     pintar no mesmo passo dos posicionados, como se fosse `z-index: 0` — e
     como ela vem DEPOIS do vídeo na árvore, pintava por cima dele.

     O sintoma era perfeito: o vídeo tocando (currentTime correndo,
     readyState 4, sem erro) e o card parado na capa. `elementFromPoint` no
     meio do card devolvia IMG.

     1 põe o vídeo acima da capa e ABAIXO do véu (que também é 1 mas é
     `::after`, último filho, e por isso ganha no desempate). */
  z-index: 1
}

/* A capa some quando o vídeo COMEÇA A TOCAR — não antes. É o que evita o
   card piscar preto no intervalo entre atribuir o `src` e o primeiro
   quadro sair. Some por transição, e volta quando a vez passa adiante. */
.pdst-card.tocando > img {
  opacity: 0
}

.pdst-card > img {
  transition: opacity .5s var(--ease), transform 1s var(--ease-out)
}

/* Só aparece quando de fato começou a tocar — sem isto, o card piscava
   preto no intervalo entre o `src` e o primeiro quadro. */
.pdst-card > video.pdst-fundo.tocando {
  opacity: 1
}


.pdst-card:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px
}

/* O véu que segura o texto legível sobre a capa E sobre o vídeo de fundo.
   TRÊS ANDARES aqui dentro, e a ordem importa:

     0  a capa e o vídeo de fundo
     1  este véu
     2  o texto, o selo de duração e o ▶

   Um pseudo-elemento `::after` é gerado como ÚLTIMO filho: no mesmo
   z-index ele pinta por cima de todos os irmãos, inclusive do texto que
   ele deveria estar ajudando a ler. Foi o que aconteceu quando o véu subiu
   para 1 por causa do vídeo de fundo — e a legenda quase sumiu. */
.pdst-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 5, 5, .72) 0%, rgba(6, 5, 5, 0) 46%);
  pointer-events: none;
  z-index: 1
}

.pdst-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--cream-rgb), .14);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--cream-rgb), .3);
  color: var(--cream);
  /* o triângulo é opticamente pesado à esquerda dentro do círculo */
  padding-left: 3px;
  transition: background .4s var(--ease), scale .4s var(--ease-out);
  z-index: 2
}

.pdst-dur {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(6, 5, 5, .6);
  color: var(--cream);
  font-size: 10.5px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  z-index: 2
}

.pdst-txt {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  z-index: 2
}

.pdst-txt b {
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.3
}

.pdst-txt i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
  line-height: 1.4
}

/* As setas moram no cabeçalho da seção e só existem no desktop, onde há
   linha para deslizar. No celular quem manda é o dedo. */
.pdst-setas[hidden] {
  display: none
}

.pdst-setas button:disabled {
  opacity: .35;
  pointer-events: none
}

/* ---------- desktop: quatro por linha, dentro da coluna ---------- */
@media (min-width:1024px) {
  .pdstories {
    --st-gap: 20px;
    /* quatro cards e três vãos dentro da largura do .wrap */
    --st-card: calc((100% - 3 * var(--st-gap)) / 4)
  }

  .pdst {
    /* volta para dentro da coluna de leitura */
    width: min(var(--wrap), 100% - var(--pad) * 2);
    margin-inline: auto;
    padding: 0;
    /* Aqui a rolagem nativa VOLTA: no desktop não há laço para corrigir e
       não há inércia de toque para atravessar a lista — quem anda são as
       setas, de quatro em quatro, e o `smooth` do navegador basta. */
    overflow-x: auto;
    touch-action: auto;
    scroll-behavior: smooth
  }

  .pdst-card:hover > img,
  .pdst-card:hover > video {
    transform: scale(1.05)
  }

  .pdst-card:hover .pdst-play {
    background: rgba(var(--cream-rgb), .26);
    scale: 1.08
  }
}

/* O laço de fundo CONTINUA rodando com esta preferência ligada — ele é o
   conteúdo da seção, não enfeite, e desligá-lo deixava o card na capa para
   sempre em qualquer máquina com as animações do sistema desativadas. O
   que sai são as transições: o vídeo aparece de uma vez, sem esmaecer, e o
   hover não dá zoom. */
@media (prefers-reduced-motion:reduce) {
  .pdst {
    scroll-behavior: auto
  }

  .pdst-card > img,
  .pdst-card > video,
  .pdst-card > video.pdst-fundo,
  .pdst-play {
    transition: none
  }

  .pdst-card:hover > img,
  .pdst-card:hover > video {
    transform: none
  }
}

/* ================= VÍDEOS STORY: O PLAYER =================
   Mobile-first: o padrão é a tela cheia do celular, e a media query de
   1024px devolve o vídeo centrado com as setas fora dele.

   `100dvh` e não `100vh`: no celular a barra do navegador entra e sai, e o
   `vh` continua contando a tela como se ela nunca estivesse lá — o rodapé
   do vídeo ficava escondido atrás da barra de endereço. */
.pdst-player {
  position: fixed;
  inset: 0;
  height: 100dvh;
  /* abaixo da barra de contato, que segue clicável por cima — tokens.css */
  z-index: var(--z-stories);
  display: flex;
  flex-direction: column;
  background: #000;
  /* o gesto vertical é da página, não do player; o horizontal não existe
     aqui — quem troca de vídeo são os terços de toque */
  touch-action: none;
  user-select: none
}

.pdst-player[hidden] {
  display: none
}

/* ---------- as barras de progresso ---------- */
.pdst-barras {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 3px;
  padding: 10px 10px 0;
  padding-top: calc(10px + env(safe-area-inset-top));
  z-index: 3
}

.pdst-barras span {
  flex: 1 1 0;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(var(--cream-rgb), .3);
  overflow: hidden
}

/* `scaleX` e não `width`: a barra anda a 60 quadros sem pedir layout ao
   navegador a cada `timeupdate`. */
.pdst-barras i {
  display: block;
  height: 100%;
  background: var(--cream);
  transform: scaleX(var(--p, 0));
  transform-origin: left center
}

/* ---------- palco e vídeo ---------- */
.pdst-palco {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.pdst-palco video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000
}

/* Os três terços do toque. Invisíveis de propósito: no Instagram também
   não há nada desenhado ali, e desenhar convidaria a mirar. */
.pdst-zonas {
  position: absolute;
  inset: 0;
  display: flex
}

.pdst-zonas span {
  flex: 1 1 0
}

/* O ▶ que aparece no meio quando alguém pausa. */
.pdst-pausado {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  border-radius: 50%;
  background: rgba(var(--cream-rgb), .16);
  backdrop-filter: blur(6px);
  color: var(--cream);
  pointer-events: none;
  z-index: 2
}

.pdst-pausado[hidden] {
  display: none
}

.pdst-legenda {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  /* acima da barra de contato, que mora nos 60px de baixo */
  bottom: calc(78px + env(safe-area-inset-bottom));
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Zero, e o respiro entre as linhas fica todo por conta da entrelinha
     logo abaixo — um só lugar mandando na distância. Somar os dois é o que
     torna difícil acertar: mexer no `gap` some contra a meia-entrelinha
     que cada linha já carrega em cima e embaixo. */
  gap: 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
  pointer-events: none;
  z-index: 2
}

.pdst-legenda[hidden] {
  display: none
}

/* Título e contador dividem a primeira linha. `baseline` e não `center`: o
   olho tem 11px de altura contra os 15 do título, e centrar pelo meio da
   caixa o deixaria flutuando acima da linha das letras. */
.pdst-legenda-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0
}

.pdst-vistas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;   /* o número não dança ao subir */
  color: rgba(var(--cream-rgb), .72);
  /* o traço do olho é fino: alinhar pela base o joga para baixo demais */
  transform: translateY(1px)
}

.pdst-vistas[hidden] {
  display: none
}

.pdst-vistas svg {
  flex: none;
  opacity: .85
}

/* ---------- o número que rola ----------
   Cada casa é uma janela de uma linha de altura com uma FITA de dígitos
   dentro; mover a fita é a animação. 115 → 116 mexe só na unidade, porque
   só ela mudou de valor — as outras fitas não recebem `--n` novo e ficam
   exatamente onde estavam.

   `--alt` num lugar só: a altura da janela, a de cada dígito e o passo do
   deslocamento são obrigatoriamente o mesmo número, e três literais iguais
   espalhados aqui divergiriam no primeiro ajuste de tamanho. */
#stVistasN {
  --alt: 1.25em;
  display: inline-flex;
  align-items: flex-start
}

.pdst-casa {
  display: block;
  height: var(--alt);
  overflow: hidden
}

.pdst-fita {
  display: block;
  transform: translateY(calc(var(--n, 0) * var(--alt) * -1));
  transition: transform .62s var(--ease-out)
}

/* A volta ao começo da fita, depois que a subida terminou: acontece na
   mesma posição visual, e animá-la seria desfazer na tela o que acabou de
   ser feito. */
.pdst-fita.sem-anim {
  transition: none
}

/* CENTRADO, e é isso que conserta o "1 afastado".
   A caixa de cada casa tem a largura do dígito MAIS LARGO da fita — ela
   guarda os dez —, e o 1 é o mais estreito de todos. Alinhado à esquerda,
   como o texto da legenda manda, ele deixava toda a sobra do lado direito:
   um buraco visível depois de cada 1, e só depois dele.

   Centrar reparte a sobra nos dois lados, que é o que a tipografia chama de
   algarismo tabular. O `tnum` logo abaixo pede isso à fonte, quando ela
   tem — o Poppins não tem, e por isso o centro é quem resolve de fato. */
.pdst-fita > span,
.pdst-fixo {
  display: block;
  height: var(--alt);
  line-height: var(--alt);
  text-align: center;
  font-feature-settings: 'tnum' 1, 'lnum' 1
}

@media (prefers-reduced-motion:reduce) {
  .pdst-fita {
    transition: none
  }
}

/* A entrelinha do `body` é 1.6, feita para parágrafo — e era ela, não o
   `gap`, que afastava as duas linhas: meia entrelinha embaixo do título
   mais meia em cima do subtítulo somavam quase 8px de ar invisível.

   1.2 é seguro aqui porque as duas linhas são CAIXA ALTA: não há descida de
   g, p ou y para colidir com a linha de baixo. */
.pdst-legenda b {
  font-size: 15px;
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--cream)
}

.pdst-legenda i {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), .72)
}

/* ---------- os botões ---------- */
.pdst-btn {
  position: absolute;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--cream-rgb), .22);
  border-radius: var(--r);
  background: rgba(6, 5, 5, .42);
  backdrop-filter: blur(8px);
  color: var(--cream);
  z-index: 3;
  transition: background .35s var(--ease), border-color .35s var(--ease)
}

.pdst-btn:hover {
  background: rgba(var(--cream-rgb), .2);
  border-color: rgba(var(--cream-rgb), .4)
}

.pdst-btn:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 2px
}

.pdst-x {
  top: calc(24px + env(safe-area-inset-top));
  right: 12px
}

.pdst-som {
  top: calc(24px + env(safe-area-inset-top));
  right: 62px
}

/* um ícone por estado; o JS troca o aria-pressed e o CSS faz o resto */
.pdst-som .pdst-audivel,
.pdst-som[aria-pressed="true"] .pdst-mudo {
  display: none
}

.pdst-som[aria-pressed="true"] .pdst-audivel {
  display: block
}

/* No celular as setas não existem: os terços de toque fazem o mesmo, e dois
   botões em cima do vídeo tapariam justamente o que se veio ver. */
.pdst-nav {
  display: none
}

/* ---------- desktop: vídeo centrado, setas fora dele ---------- */
@media (min-width:1024px) {
  .pdst-player {
    /* o clique no fundo fecha; o palco encolhe para sobrar fundo em que
       clicar, e as setas moram nessa sobra */
    padding: 58px clamp(80px, 9vw, 140px) 34px;
    background: rgba(6, 5, 5, .95);
    backdrop-filter: blur(10px);
    touch-action: auto
  }

  .pdst-palco video {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 9/16;
    border-radius: var(--r);
    /* o clique no vídeo alterna pausa; no fundo, fecha */
    cursor: pointer
  }

  .pdst-barras {
    /* alinhadas com a coluna do vídeo, e não com a tela toda */
    left: 50%;
    right: auto;
    translate: -50% 0;
    width: min(420px, 40vh);
    padding: 16px 0 0
  }

  .pdst-zonas {
    display: none
  }

  .pdst-nav {
    display: grid;
    top: 50%;
    translate: 0 -50%
  }

  .pdst-ant {
    left: clamp(18px, 2.6vw, 44px)
  }

  .pdst-prox {
    right: clamp(18px, 2.6vw, 44px)
  }

  .pdst-x {
    top: clamp(14px, 2vw, 24px);
    right: clamp(14px, 2vw, 28px)
  }

  .pdst-som {
    top: clamp(14px, 2vw, 24px);
    right: clamp(62px, 6vw, 80px)
  }

  .pdst-legenda {
    left: 50%;
    right: auto;
    translate: -50% 0;
    width: min(420px, 40vh);
    bottom: 52px
  }
}

/* A troca entre stories é instantânea de qualquer jeito; o que existe de
   transição aqui é o brilho dos botões, e ele sai. */
@media (prefers-reduced-motion:reduce) {
  .pdst-btn {
    transition: none
  }
}

/* Trava a rolagem sem o pulo de layout: quem compensa a largura da barra é
   o padding que o produto.js escreve no body ao abrir. */
body.pdst-on {
  overflow: hidden
}

/* ================= BARRA FIXA DO MOBILE ================= */
.pdbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Acima do player de stories (190) e abaixo do lightbox das fotos (200) —
     ver a escala nomeada em tokens.css. Quem assiste a um story pode chamar
     no WhatsApp sem fechar o vídeo; quem ampliou uma foto não tem o que
     fazer com a barra, e ela roubaria altura da imagem. */
  z-index: var(--z-barra-contato);
  display: none;              /* só existe no mobile, ver media query */
  align-items: center;
  gap: 14px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(var(--bg-rgb), .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .5s var(--ease-out)
}

.pdbar.on {
  transform: none
}

/* o texto cede espaço; o botão não encolhe nem quebra linha */
.pdbar .nm {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.pdbar .nm b {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--cream);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pdbar .nm span {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pdbar .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 11px 16px;
  font-size: 12.5px
}


/* ---------- só no celular ----------
   Veio do RESPONSIVO do produto.css junto com a barra. Aqui ela é só
   `display: flex` — o `transform: translateY(110%)` lá em cima a mantém
   fora da tela até alguém ligar o `.on`.

   Quem liga o `.on` muda por página: na de produto é a rolagem (produto.js
   §8), na home é o player abrir (stories.js). Nas duas ela é `display: flex`
   desde sempre, e é isso que faz a transição de entrada existir. */
@media (max-width:860px) {
  .pdbar {
    display: flex
  }
}

@media (prefers-reduced-motion:reduce) {
  .pdbar {
    transition: none
  }
}

/* ================= A FAIXA NA HOME =================
   Mesma faixa, mesmo player, mesmos cards. O que muda é só o entorno: a
   home não tem o `--nav-h` nem o `--sec-y` curto que a `.pd` declara, então
   a `.pdstories` precisa do respiro vertical padrão de uma `.sec`.

   ⚠️ NÃO redesenhe nada aqui. Se um card da home ficar diferente do card do
   produto, o conserto é na regra de cima, não numa exceção nova — a
   promessa desta tela é que as duas faixas sejam a MESMA faixa. */
.home-stories {
  /* Cola na seção de categorias, que fecha sem respiro embaixo — o mesmo
     `padding-top: 0` que as outras seções da home usam entre si. */
  padding-top: 0
}