/* Vitrines e blog (js/stance-vitrine.js), 28/09/2026: brilho de "carregando" nas fotos dos cards e na
   troca de filtro, e entrada suave dos cards. Só opacidade e movimento (sem mudar tamanhos), para
   não gerar deslocamento de layout. Sem JavaScript (sem a classe stance-vitrine-js), nada muda. */

@keyframes stance-brilho {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@keyframes stance-card-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Foto do card: brilho por cima até a imagem carregar. */
.stance-vitrine-js .featureImg,
.stance-vitrine-js .featImage { position: relative; overflow: hidden; }
.stance-vitrine-js .featureImg::after,
.stance-vitrine-js .featImage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #eef1f4 30%, #f8f9fb 50%, #eef1f4 70%);
  background-size: 200% 100%;
  animation: stance-brilho 1.2s ease-in-out infinite;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
.stance-vitrine-js .featureImg.is-pronta::after,
.stance-vitrine-js .featImage.is-pronta::after { opacity: 0; animation: none; }

/* Troca de filtro: cards atuais esmaecidos, com o mesmo brilho, até a nova grade chegar. */
.et_pb_code_inner.is-carregando .uk-grid-match[uk-grid] > * {
  opacity: .45;
  transition: opacity .2s ease;
  pointer-events: none;
}
.et_pb_code_inner.is-carregando .uk-grid-match[uk-grid] > * > a > :first-child { position: relative; overflow: hidden; }
.et_pb_code_inner.is-carregando .uk-grid-match[uk-grid] > * > a > :first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 70%);
  background-size: 200% 100%;
  animation: stance-brilho 1s ease-in-out infinite;
  pointer-events: none;
}

/* Cards novos entram em sequência. */
.uk-grid-match[uk-grid] > .stance-card-entra { animation: stance-card-entra .45s ease both; }

@media (prefers-reduced-motion: reduce) {
  .stance-vitrine-js .featureImg::after,
  .stance-vitrine-js .featImage::after,
  .et_pb_code_inner.is-carregando .uk-grid-match[uk-grid] > * > a > :first-child::before { animation: none; }
  .uk-grid-match[uk-grid] > .stance-card-entra { animation: none; }
}


/* Linha de áreas com 8 itens (blog e cursos: "Todas", lupa e 6 áreas): texto 1px menor e respiro
   menor, para caber numa linha só a partir de 1366px com qualquer fonte. Sem isso, a primeira pintura
   (fonte provisória, mais estreita) cabia numa linha e a Rubik, ao chegar, quebrava em duas e
   empurrava a página (CLS). */
@media (min-width: 1024px) {
  .scrollable-tabs-container:not(.stance-subtabs) ul:has(> li:nth-child(8)) > li > a { font-size: 13px; padding-left: 18px; padding-right: 18px; }
}

/* Filtros das vitrines e do blog (16/10/2026, pedido do Diego): as categorias específicas (2ª fileira) ficam
   abaixo das áreas com fonte um pouco menor, cantos mais redondos e sombra mais leve; uma linha cinza, que
   some em branco nas duas pontas, separa as duas fileiras. */
body .scrollable-tabs-container.stance-subtabs ul li a {
  font-size: 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  padding: 4px 18px;
}
body .scrollable-tabs-container.stance-subtabs::before {
  content: "";
  display: block;
  width: min(672px, 64%); /* 30% menor que a primeira versão (960px / 92%), 16/10/2026 */
  height: 1px;
  margin: 6px auto 8px;
  background: linear-gradient(90deg, rgba(227, 227, 227, 0), #e3e3e3 40%, #e3e3e3 60%, rgba(227, 227, 227, 0)); /* cinza mais claro, some desde 40% de cada lado (16/10/2026) */
}
@media (max-width: 767px) {
  body .scrollable-tabs-container.stance-subtabs ul li a { padding: 4px 12px; }
}