/* ============================================================
   Scroll Stack — estilos (porte do componente React Bits)
   Só entra no celular; no desktop a grade original é mantida.
   O posicionamento é feito por assets/js/scroll-stack.js.
   ============================================================ */

.scroll-stack {
  /* os cards saem do fluxo visual ao serem transformados, então a grade
     precisa deixar de ser grade para não recalcular a cada quadro */
  display: block !important;
  position: relative;
}

/* A animação de entrada do site (data-reveal) começa em opacity:0 e só
   revela quando o observer vê o elemento — o que não acontece aqui,
   porque o empilhamento tira o card da posição original. Além disso o
   transform dela conflita com o nosso. Por isso o card empilhado passa a
   ser sempre visível. */
.scroll-stack-card[data-reveal],
.scroll-stack-card {
  opacity: 1 !important;
  transition: none !important;
}

/* No empilhamento o card é sempre o único da linha. Sem isto, grades que
   viram 2 colunas em tablet (.pro-grid usa width:calc((100% - 16px)/2) até
   980px) mantinham a largura de meia coluna depois que o display virou
   block, e os cards empilhavam com metade da largura da seção. */
.scroll-stack > .scroll-stack-card { width: 100% !important; }

.scroll-stack-card {
  transform-origin: top center;
  will-change: transform, filter;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* cada card precisa de fundo opaco: eles se sobrepõem no empilhamento */
  background: var(--card-solid, #0e1310) !important;
  /* borda superior clara + sombra: sem isso os cards empilhados, que têm
     o mesmo fundo, se fundem num bloco só e o efeito some */
  border-top-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset,
              0 22px 44px -20px rgba(0, 0, 0, .9);
}

/* No desktop o glossário empilha em largura de leitura, não na largura
   toda do container (linhas de 1180px cansam). No celular a grade já é
   mais estreita que isso e a regra não muda nada. */
.gloss-grid.scroll-stack {
  max-width: 780px;
  margin-inline: auto;
}

/* espaçador que permite o último card soltar do pino */
.scroll-stack-end {
  width: 100%;
  height: 40vh;
  pointer-events: none;
}

/* (sem bloco de reduzir-movimento: o empilhamento segue a rolagem 1:1 e
   zerar os transforms aqui quebrava a pilha montada pelo JS — foi assim
   que o dono, com a preferencia ativa no desktop, viu 'nao entrou') */