/* =========================================================
   TRANSIÇÃO STACK → CONTATO (MOBILE)
   Substituição visual controlada por scroll: perto do final da
   Stack Técnica, o Contato ("Vamos conversar") sobe por baixo e
   entra NA FRENTE do conteúdo da Stack (que perde opacidade e
   desloca-se levemente para cima), até assumir toda a tela.
   Só o necessário para o Contato pintar por cima do painel da
   Stack vive aqui (position + z-index, estáticos). Os valores que
   mudam a cada frame de scroll (margin-top de ajuste, transform,
   opacidade) são aplicados via estilo inline por
   js/stack-contact-transition.js, porque dependem de medição real
   da página — não dá pra descrever com números fixos em CSS.

   Só ativa com JS + motion permitido (classe adicionada pelo
   próprio script) — sem isso, Stack e Contato ficam exatamente
   como sempre foram: fluxo normal, sem sobreposição, sem
   esmaecimento.

   CORREÇÃO DE LAYERING: o fundo opaco de `.contact` (a SEÇÃO)
   fazia a sobreposição parecer "uma seção inteira subindo", em
   vez de só o card "Vamos conversar" entrando na frente da Stack.
   Fundo da seção inteira transparente, sem mais, revelaria o
   fundo do body (mais claro) na parte do Contato que já passou do
   fim da Stack — errado do outro jeito, uma "troca de fundo"
   visível. A correção: um gradiente que é transparente só na
   faixa que realmente se sobrepõe à Stack (revela a Stack ali,
   exatamente o efeito pedido) e volta a ser o mesmo fundo original
   da seção (`--color-bg` — que já é, por coincidência de tokens,
   idêntico ao fundo da própria `.stack`, então não existe costura
   visível nem quando a Stack estiver semi-transparente) no resto.
   `--contact-overlap` (a altura dessa faixa, nas coordenadas
   internas do próprio Contato — não muda com o scroll, por isso é
   medida uma única vez) vem de js/stack-contact-transition.js. O
   card "Vamos conversar" (.contact-core) nunca é tocado — mantém
   sempre seu próprio fundo/borda/sombra.
========================================================= */

@media (max-width: 768px) {

  .contact.has-transition-pin {
    position: relative;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--contact-overlap, 0px),
      var(--color-bg) var(--contact-overlap, 0px),
      var(--color-bg) 100%
    );
  }
}