/* ==========================================================================
   topo-padrao.css  ·  PADRÃO DE LOGOS na faixa amarela do topo
   (✅ mockup/estudos/topo-grafismos.html e produto-padrao.html, 09/10/2026)
   Arquivo próprio (saiu do topo-palco.css) porque serve também à PÁGINA DE PRODUTO, que não
   carrega o topo-palco.css. Marcação: baly_topo_padrao() em inc/topo-padrao.php.
   Logo pequeno repetido, tom sobre tom, em fileiras que correm devagar em sentidos alternados.
   Marca, medidas e ladrilho vêm do inc/topo-padrao.php (variáveis inline):
     --hd/--hc = altura do logo no desktop/celular · --td/--tc = largura do ladrilho ·
     --dd/--dc = duração de uma volta · --o · --img
   Cada fileira é um fundo repeat-x 4 ladrilhos mais largo que a faixa; a animação anda esses
   4 ladrilhos e recomeça sem emenda.
   O assets/js/topo-padrao.js mede o TEXTO do título e grava --ini (desktop) e --tl/--tr/--tt/--tb
   (celular). Sem JS: desktop começa em 50%, celular cobre a faixa (fallbacks abaixo).
   ❌ Reprovados no estudo: arcos/pontos/brilhos, retícula, selo, logo gigante, pinceladas; no
   celular, o padrão atrás do título e a fileira só na base.
   ========================================================================== */
.topo-padrao {
  --h: var(--hc); --tile: var(--tc); --dur: var(--dc);
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--h) * .55);
  animation: topo-padrao-entra 1.2s ease both;
  /* celular: some num retângulo em volta do texto do título (dois degradês somados) */
  --mx: linear-gradient(90deg, #000 calc(var(--tl, -100px) - 18px), transparent var(--tl, -100px), transparent var(--tr, -100px), #000 calc(var(--tr, -100px) + 18px));
  --my: linear-gradient(180deg, #000 calc(var(--tt, -100px) - 18px), transparent var(--tt, -100px), transparent var(--tb, -100px), #000 calc(var(--tb, -100px) + 18px));
  -webkit-mask-image: var(--mx), var(--my); mask-image: var(--mx), var(--my);
}
.topo-padrao__fila {
  flex: none; display: block; height: var(--h);
  width: calc(100% + var(--tile) * 4);
  background: var(--img) 0 0 / auto 100% repeat-x;
  opacity: var(--o);
  animation: topo-padrao-corre var(--dur) linear infinite;   /* --dur = 4 ladrilhos a ~18 px/s (calculado no PHP) */
}
/* fileiras pares: deslocadas meio ladrilho e no sentido contrário */
.topo-padrao__fila:nth-child(even) { background-position-x: calc(var(--tile) * -.5); animation-direction: reverse; }
@keyframes topo-padrao-corre { to { transform: translateX(calc(var(--tile) * -4)); } }
@keyframes topo-padrao-entra { from { opacity: 0; } }

@media (min-width: 768px) {
  .topo-padrao {
    --h: var(--hd); --tile: var(--td); --dur: var(--dd);
    /* desktop: começa depois do título, com degradê de 140 px */
    --m: linear-gradient(90deg, transparent var(--ini, 50%), #000 calc(var(--ini, 50%) + 140px));
    -webkit-mask-image: var(--m); mask-image: var(--m);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topo-padrao, .topo-padrao__fila { animation: none; }
}

/* ---------- PÁGINA DE PRODUTO (só desktop) ----------
   A faixa rasa da PDP é o .pdp::before (produto.css, 104 px). O padrão vai num envoltório
   absoluto do mesmo tamanho por cima dela, abaixo da ilha. Sem título na faixa = sem máscara.
   No celular não existe faixa (a galeria sobe por baixo da ilha). */
.pdp-faixa-padrao { display: none; }
@media (min-width: 768px) {
  .pagina-interna .pdp { position: relative; }
  .pagina-interna .pdp-faixa-padrao {
    display: block; position: absolute; top: 0; left: 0; right: 0; height: 104px;
    border-radius: 0 0 28px 28px; overflow: hidden; isolation: isolate; pointer-events: none;
  }
  .pdp-faixa-padrao .topo-padrao { -webkit-mask-image: none; mask-image: none; }
}