/* Link Affiliattes — o encontro entre as seções (18/10/2026).
   Pedido do Victor: "não pode ser cinza o fundo das páginas" e "um encontro elegante, impactante e muito fluido em
   todas as seções". A página tem um fundo só (preto puro + o grão do body, no la.css) e nenhuma seção pinta fundo de
   ponta a ponta. Em cada fronteira mora um .enc de altura zero, na camada de baixo da raiz (z-index -1): passa por baixo
   do conteúdo das duas seções e atravessa a fronteira sem corte, porque não está dentro de caixa nenhuma que recorte.
   O desenho repete a língua da hero: o brilho vermelho da atmosfera (.enc-luz) e, nas fronteiras do meio da página,
   um horizonte distante (.enc-arco: arco achatado com a borda acesa). Ao rolar, a luz cresce, o arco se abre do centro e
   uma faísca corre a borda (CSS puro, animation-timeline). Sem suporte ou com menos movimento, fica o estado final, parado.
   Largura nunca passa de 100%: zero rolagem lateral. Tudo aria-hidden no HTML. */
@property --enc-a{syntax:"<angle>";inherits:false;initial-value:-80deg}

.enc{position:relative;z-index:-1;height:0;pointer-events:none;view-timeline:--enc block}
.enc>i{position:absolute;left:0;right:0;margin-inline:auto;display:block}

/* a luz: larga, centrada na própria fronteira, e se apaga antes de qualquer borda da caixa */
.enc-luz{--h:clamp(300px,40vw,560px);top:calc(var(--h) * -.5);width:100%;height:var(--h);
  background:radial-gradient(48% 50% at 50% 50%,rgba(217,45,32,.15),rgba(217,45,32,.055) 46%,transparent 74%)}
/* saindo do planeta da hero, a luz é mais quente e desce mais: a borda acesa dele continua na página */
.enc-hero .enc-luz{--h:clamp(340px,48vw,680px);
  background:radial-gradient(52% 50% at 50% 50%,rgba(232,64,40,.19),rgba(217,45,32,.07) 44%,transparent 74%)}

/* o horizonte: só a borda de cima de uma elipse achatada aparece (as máscaras apagam as pontas e a metade de baixo) */
.enc-arco{top:0;width:min(100%,1480px);aspect-ratio:4.2/1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,transparent 76%,rgba(217,45,32,.07) 90%,rgba(255,96,72,.2) 100%);
  box-shadow:0 0 0 1px rgba(255,96,80,.5) inset;
  -webkit-mask:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%),linear-gradient(#000 20%,transparent 46%);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%),linear-gradient(#000 20%,transparent 46%);
  mask-composite:intersect}
/* a faísca que corre a borda (o mesmo desenho do .la-horiz do #demo e do .ft-hz do rodapé) */
.enc-arco::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;opacity:0;
  background:conic-gradient(from var(--enc-a),#fff 0deg,rgba(255,150,136,.6) 2deg,transparent 8deg,transparent 352deg,rgba(255,150,136,.6) 358deg,#fff 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* a rolagem conduz: a luz cresce e o arco se abre do centro enquanto a fronteira sobe da base até o meio da tela,
   e a faísca atravessa a borda nesse caminho. Só transform, opacity e o ângulo registrado. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .enc-luz{animation:enc-luz linear both;animation-timeline:--enc;animation-range:entry 0% cover 50%}
    .enc-arco{animation:enc-abre linear both;animation-timeline:--enc;animation-range:entry 0% cover 48%}
    .enc-arco::before{animation:enc-corre linear both;animation-timeline:--enc;animation-range:cover 18% cover 72%}
  }
}
@keyframes enc-luz{from{opacity:.3}to{opacity:1}}
@keyframes enc-abre{from{opacity:.15;transform:scaleX(.62)}to{opacity:1;transform:none}}
@keyframes enc-corre{0%{--enc-a:-80deg;opacity:0}14%{opacity:1}84%{opacity:1}100%{--enc-a:80deg;opacity:0}}