/* Link Affiliattes — elevação da seção #demo (do clique ao Pix).
   Camada por cima do la.css: não troca o componente, só o deixa vivo. Movimento só em transform/opacity
   (e no ângulo registrado por @property). Sem sombra colorida: a cor vai em borda, fundo e degradê.
   O que depende do script fica atrás de #demo.la-a: sem o la-a.js, a seção continua como era. */

@property --la-a{syntax:"<angle>";inherits:false;initial-value:-62deg}

/* ---------- atmosfera comum: brilho vermelho de fundo (o grão agora é o da página inteira, no la.css) ---------- */
#demo,#rede{position:relative;isolation:isolate}
/* o brilho se apaga antes das bordas de cima e de baixo: nada para num corte na fronteira da seção */
.la-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;--fx-in:clamp(72px,12vw,200px);--fx-out:clamp(28px,6vw,90px);-webkit-mask:linear-gradient(transparent,#000 var(--fx-in),#000 calc(100% - var(--fx-out)),transparent);mask:linear-gradient(transparent,#000 var(--fx-in),#000 calc(100% - var(--fx-out)),transparent)}

/* ---------- #demo ---------- */
#demo .la-fx{background:radial-gradient(60% 34% at 50% 100%,rgba(217,45,32,.17),transparent 72%),radial-gradient(52% 40% at 50% 62%,rgba(217,45,32,.09),transparent 70%)}
@media (min-width:900px){#demo .la-fx{background:radial-gradient(60% 34% at 50% 100%,rgba(217,45,32,.17),transparent 72%),radial-gradient(40% 46% at 70% 52%,rgba(217,45,32,.1),transparent 70%)}}
/* o horizonte: o mesmo planeta da hero, visto de longe, com uma luz que corre a borda acesa */
.la-horiz{position:absolute;left:50%;top:calc(100% - clamp(26px,8vw,128px));width:max(900px,130%);aspect-ratio:2.6/1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(#170b0a,transparent clamp(26px,8vw,128px));box-shadow:0 0 0 1px rgba(255,84,72,.5) inset;-webkit-mask:linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%);mask:linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%)}
.la-horiz::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:conic-gradient(from var(--la-a),#fff 0deg,rgba(255,138,128,.55) 3deg,transparent 10deg,transparent 350deg,rgba(255,138,128,.55) 357deg,#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);opacity:0;animation:la-faisca 8s cubic-bezier(.45,0,.25,1) 1s 3}
/* o chão quente embaixo da borda se apaga em transparente antes da fronteira (antes ia a preto opaco e tapava a luz do encontro, .enc).
   No celular a borda ficava a 31px do fim e o chão chegava inteiro à fronteira (faixa morna sobre o preto do #nichos):
   ali ela sobe para 40px, abaixo da legenda, e o chão se apaga em 26px */
@media (max-width:599px){.la-horiz{top:calc(100% - 40px);background:linear-gradient(#170b0a,transparent 26px)}}
@keyframes la-faisca{0%{--la-a:-62deg;opacity:0}8%{opacity:1}58%{--la-a:62deg;opacity:1}66%,100%{--la-a:62deg;opacity:0}}
#demo.off .la-horiz::before{animation-play-state:paused}

/* etapas: uma pílula só desliza até a etapa da vez e leva a barra de tempo do autoplay */
#demo.la-a .stepper{position:relative;--g:6px}
@media (max-width:420px){#demo.la-a .stepper{--g:5px}}
.la-pil,.la-cursor,.la-push-ant{display:none}
#demo.la-a .la-pil{display:block;position:absolute;z-index:2;left:0;top:0;height:100%;width:calc((100% - 44px - 4 * var(--g)) / 4);border-radius:14px;background:rgba(217,45,32,.17);box-shadow:0 0 0 1px rgba(255,84,72,.75) inset;clip-path:inset(0 round 14px);pointer-events:none;transform:translateX(calc(var(--i,0) * (100% + var(--g))));transition:transform .55s var(--ease)}
#demo.la-a .la-pil i{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--red),var(--red-hi));transform-origin:left;transform:scaleX(0)}
#demo.la-a .stage .st.on{background:rgba(19,21,25,.9);box-shadow:0 0 0 1px var(--line) inset;animation:none}
#demo.la-a .st b{transition:background-color .3s}
#demo.la-a .st.la-feito b{background:rgba(255,84,72,.3)}
/* o cursor da demonstração: vai até a próxima etapa e clica, para mostrar que dá para tocar */
#demo.la-a .la-cursor{display:block;position:absolute;z-index:3;left:0;top:0;width:18px;height:18px;pointer-events:none;opacity:0;transform:translate(var(--cx,0px),var(--cy,0px));transition:transform .7s var(--ease),opacity .3s}
#demo.la-a .la-cursor.on{opacity:1}
#demo.la-a .la-cursor.sem-ida{transition:opacity .3s}
.la-cursor svg{width:100%;height:100%;fill:#fff;stroke:#0b0d10;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));transform-origin:20% 10%;transition:transform .14s var(--ease)}
.la-cursor.aperta svg{transform:scale(.78)}
.la-cursor i{display:none}
@media (pointer:coarse){
  .la-cursor svg{display:none}
  .la-cursor i{display:block;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.85) inset;transition:transform .14s var(--ease)}
  .la-cursor.aperta i{transform:scale(.7)}
}

/* número que mudou: o "+N" entra por baixo numa fenda e sai por cima (só transform, a letra nunca some) */
#demo.la-a .s b{position:relative}
.la-delta{position:absolute;top:.15em;height:1.3em;overflow:hidden;font-size:max(12px,.74rem);line-height:1.3em;font-weight:700;letter-spacing:0;color:var(--ok);pointer-events:none}
.la-delta span{display:block;transform:translateY(110%)}
/* luz que passa pelo cartão que mudou (fundo animado, nunca caixa) */
#demo.la-a .s{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0}
#demo.la-a .s.la-luz{animation:la-varre 1s var(--ease)}
@keyframes la-varre{from{background-position:160% 0}to{background-position:-60% 0}}
#demo.la-a .p-bal{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%),linear-gradient(135deg,#c42a1e,#7a1510 70%);background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0}
#demo.la-a .p-bal.la-luz{animation:la-varre-bal 1.1s var(--ease)}
@keyframes la-varre-bal{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
/* aviso empilhado: o anterior fica atrás, como no celular */
#demo.la-a .la-push-ant{display:block;position:absolute;z-index:2;left:8px;right:8px;bottom:-18px;height:var(--la-ph,62px);border-radius:16px;background:rgba(30,33,38,.82);box-shadow:0 0 0 1px var(--line) inset;opacity:0;transform:scale(.97);transition:opacity .45s var(--ease),transform .55s var(--ease);pointer-events:none}
#demo.la-a .stage[data-step="2"] .la-push-ant,#demo.la-a .stage[data-step="3"] .la-push-ant{opacity:1;transform:translateY(-10px) scale(.93)}
#demo.la-a .bubble{transform-origin:100% 100%}
@media (min-width:1200px){#demo.la-a .bubble{transform-origin:0 100%}}

/* ---------- entrada guiada pela rolagem (só deslocamento; o texto nunca fica transparente) ---------- */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  #demo #stage{animation:la-palco linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
  #demo.off #stage{animation-play-state:running!important}
}}
@keyframes la-palco{from{transform:translateY(20px) scale(.94)}}
#demo #stage{transform-origin:50% 0}

/* passar o mouse só onde existe mouse */
@media (hover:hover) and (pointer:fine){
  #demo.la-a .st:hover{background:rgba(32,35,41,.95)}
  #demo.la-a .playbtn:hover{background:rgba(32,35,41,.95)}
}

/* menos movimento: nada se desloca nem fica em laço; só a troca de estado */
@media (prefers-reduced-motion:reduce){
  .la-horiz::before{animation:none!important;opacity:0}
  #demo.la-a .la-cursor{display:none}
  #demo.la-a .la-pil{transition:opacity .2s}
}