/* Efeitos do checkout (versão única) — peças criadas por js/efeitos.js. O conteúdo nunca depende disto para aparecer.
   Receita: capa de vidro (inclinação + reflexo passando + fio de luz) · moldura de vidro no pagamento com varredura de luz ·
   traço de luz que percorre o perímetro do cartão e deixa a borda acesa, com bloom macio em camadas ·
   luz quente ambiente (--luz-rgb) atrás dos painéis. Só transform/opacity nas peças animadas (o traço é o único que pinta,
   por ~2,4 s, uma vez). Cores vêm dos tokens do tema (css/temas/<slug>.css). */
:root{
  --fx-branco:255 255 255;
  --fx-sombra:0 0 0;
  --fx-aro:7px;
  --fx-raio-aro:23px;
}

/* ============ base: camadas e isolamento ============ */
main,.rodape{position:relative;z-index:1}
.pagamento{position:relative}
.pag-cartao{position:relative;z-index:1}
html.fx .capa-palco{will-change:transform;transform-origin:50% 50%}

/* ============ peças comuns ============ */
.fx-anel,.fx-pontos{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none}
/* fio de 1px na borda do vidro: gradiente base + mancha de luz que o JS desloca (só transform/opacity) */
.fx-anel{padding:1px;overflow:hidden;
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);mask-composite:exclude;
  background:linear-gradient(155deg,rgb(var(--fx-branco) / .26),rgb(var(--fx-branco) / .06) 30%,rgb(var(--fx-branco) / .035) 62%,rgb(var(--fx-branco) / .15))}
.fx-blob{position:absolute;left:0;top:0;width:300px;height:300px;margin:0;border-radius:50%;opacity:0;pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgb(var(--luz-rgb) / .95),rgb(var(--luz-rgb) / 0))}
/* textura de pontinhos (halftone) na borda do vidro: faixa de 8px que some para o lado oposto à luz */
.fx-pontos{padding:8px;
  -webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);mask-composite:exclude}
.fx-pontos i{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle,rgb(var(--luz-rgb) / .9) .65px,transparent 1px) 0 0/4px 4px;
  -webkit-mask-image:linear-gradient(155deg,transparent 8%,black 100%);mask-image:linear-gradient(155deg,transparent 8%,black 100%)}
.fx-fundo{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}

/* ============ capa de vidro: reflexo que acompanha o ponteiro/rolagem + varredura única + fio de luz ============ */
.fx-reflexo,.fx-varre-capa{position:absolute;left:0;top:-30%;z-index:2;width:46%;height:160%;pointer-events:none;mix-blend-mode:screen;will-change:transform}
.fx-reflexo{opacity:0;transition:opacity 1.2s ease;
  background:linear-gradient(90deg,transparent 6%,rgb(var(--fx-branco) / .05) 30%,rgb(var(--fx-branco) / .14) 52%,transparent 52.8%,transparent 59%,rgb(var(--fx-branco) / .11) 59.4%,rgb(var(--fx-branco) / .11) 63%,transparent 63.8%)}
.fx-reflexo.fx-on{opacity:1}
/* produto com "reflexo_vidro": false (produtos/<slug>.json): sem as faixas diagonais de reflexo nem a varredura branca; a capa mantém a inclinação sutil e o feixe suave (js/feixe.js) */
.sem-reflexo .fx-reflexo,.sem-reflexo .fx-varre-capa{display:none}
.fx-varre-capa{transform:translate3d(-130%,0,0) rotate(16deg);
  background:linear-gradient(90deg,transparent,rgb(var(--fx-branco) / .12) 30%,rgb(var(--fx-branco) / .5) 50%,rgb(var(--fx-branco) / .12) 70%,transparent)}
.capa-ok .fx-varre-capa{animation:fx-capa-varre 1.7s cubic-bezier(.45,.05,.2,1) 3.3s 1 both}
@keyframes fx-capa-varre{from{transform:translate3d(-130%,0,0) rotate(16deg)}to{transform:translate3d(340%,0,0) rotate(16deg)}}
.capa-palco .fx-anel{opacity:0}
.capa-ok .capa-palco .fx-anel{animation:fx-aparece 1s ease 3.2s both}
@keyframes fx-aparece{from{opacity:0}to{opacity:1}}
.fx-topo{position:absolute;left:12%;right:12%;top:1px;z-index:2;height:1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgb(var(--fx-branco) / .55),transparent)}
.capa-ok .fx-topo{animation:fx-aparece 1s ease 3.2s both}
/* luz quente que vaza da borda da capa */
.fx-vaza{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  box-shadow:0 0 60px 2px rgb(var(--luz-rgb) / .2),0 24px 110px 6px rgb(var(--luz-rgb) / .14)}
.fx-vaza.fx-on{opacity:1}
@media (min-width:1232px){.fx-vaza{border-radius:20px}}

/* ============ moldura de vidro do pagamento (anel por fora do cartão: o tamanho do iframe não muda) ============ */
.fx-moldura{position:absolute;inset:calc(var(--fx-aro) * -1);z-index:0;border-radius:var(--fx-raio-aro);overflow:hidden;pointer-events:none;
  background:linear-gradient(165deg,rgb(var(--fx-branco) / .1),rgb(var(--fx-branco) / .035) 42%,rgb(var(--fx-branco) / .07));
  box-shadow:0 30px 60px -34px rgb(var(--fx-sombra) / .9)}
.fx-moldura::after{content:"";position:absolute;left:22px;right:22px;top:calc(var(--fx-aro) - 1px);height:1px;background:linear-gradient(90deg,transparent,rgb(var(--fx-branco) / .5),transparent)}
.fx-varre{position:absolute;left:0;right:0;top:0;height:min(100%,1000px);pointer-events:none;opacity:0;will-change:transform;transform:translate3d(0,-60%,0);
  background:linear-gradient(180deg,transparent 40%,rgb(var(--fx-branco) / .55) 50%,transparent 60%)}
.fx-moldura.fx-varrendo .fx-varre{animation:fx-moldura-varre 1.9s cubic-bezier(.4,.1,.25,1) 1 both}
@keyframes fx-moldura-varre{0%{transform:translate3d(0,-60%,0);opacity:1}100%{transform:translate3d(0,60%,0);opacity:1}}
.pag-topo{background:linear-gradient(180deg,rgb(var(--fx-branco) / .06),transparent)}

/* ============ traço de luz do cartão: percorre o perímetro uma vez e deixa a borda acesa ============
   Fica ATRÁS do cartão (o cartão é opaco): só a metade de fora aparece, como luz saindo por trás. O brilho é feito de camadas
   empilhadas, cada uma mais larga e mais fraca que a anterior (bloom macio), mais uma cabeça brilhante que corre na frente. */
.fx-traco{position:absolute;left:0;top:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fx-traco path{fill:none;stroke:rgb(var(--traco-rgb));stroke-linejoin:round;stroke-linecap:butt;stroke-dasharray:1 3}
.fx-traco .l1{stroke-width:1.4px;opacity:.7}
.fx-traco .l2{stroke-width:3px;opacity:.24}
.fx-traco .l3{stroke-width:6px;opacity:.14}
.fx-traco .l4{stroke-width:10px;opacity:.085}
.fx-traco .l5{stroke-width:16px;opacity:.055}
.fx-traco .l6{stroke-width:24px;opacity:.035}
.fx-traco .l7{stroke-width:34px;opacity:.022}
.fx-traco .fx-cabeca path{stroke-dasharray:.075 3}
.fx-traco .h1{stroke:rgb(var(--fx-branco));stroke-width:1.6px;opacity:.6}
.fx-traco .h2{stroke-width:6px;opacity:.38}
.fx-traco .h3{stroke-width:14px;opacity:.15}
.fx-traco .h4{stroke-width:28px;opacity:.06}
.fx-traco g{stroke-dashoffset:1;opacity:0}
.fx-traco .fx-cabeca{stroke-dashoffset:.075}
.fx-aceso .fx-trilha{animation:fx-trilha 2.4s cubic-bezier(.45,.05,.25,1) .25s 1 both,fx-trilha-op 3.6s ease .25s 1 both}
.fx-aceso .fx-cabeca{animation:fx-cabeca 2.4s cubic-bezier(.45,.05,.25,1) .25s 1 both,fx-cabeca-op 2.4s linear .25s 1 both}
@keyframes fx-trilha{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fx-trilha-op{0%{opacity:0}6%{opacity:1}72%{opacity:1}100%{opacity:.62}}
@keyframes fx-cabeca{from{stroke-dashoffset:.075}to{stroke-dashoffset:-.925}}
@keyframes fx-cabeca-op{0%{opacity:0}8%{opacity:1}86%{opacity:1}100%{opacity:0}}
/* ponto de ignição: onde o traço nasce (topo, no meio do cartão) */
.fx-ignicao{position:absolute;left:50%;top:0;z-index:0;width:150px;height:60px;margin:-30px 0 0 -75px;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgb(var(--traco-rgb) / .55),rgb(var(--traco-rgb) / .12) 55%,transparent)}
.fx-aceso .fx-ignicao{animation:fx-igni 1.6s cubic-bezier(.3,.6,.3,1) .1s 1 both}
@keyframes fx-igni{0%{opacity:0;transform:scaleX(.3)}25%{opacity:1;transform:scaleX(1)}100%{opacity:.0;transform:scaleX(1.5)}}

/* ============ luz quente ambiente (atrás do vidro) ============ */
.fx-camada{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fx-luz{position:absolute;left:0;top:0;width:var(--fx-luz-d,980px);height:var(--fx-luz-d,980px);border-radius:50%;pointer-events:none;will-change:transform;opacity:.8;
  background:radial-gradient(closest-side,rgb(var(--luz-rgb) / .3),rgb(var(--luz-rgb) / .13) 45%,rgb(var(--luz-rgb) / .035) 75%,transparent)}
@media (max-width:959px){.fx-luz{opacity:.5}}
.fx-fundo .fx-blob{width:520px;height:520px}

/* ============ sem movimento: tudo parado no estado final ============ */
@media (prefers-reduced-motion:reduce){
  .fx-reflexo,.fx-varre-capa,.fx-varre,.fx-anel,.fx-topo,.fx-traco g,.fx-ignicao{animation:none!important}
  .fx-reflexo,.fx-vaza{transition:none!important}
  .fx-varre-capa,.fx-varre,.fx-ignicao{display:none}
  .capa-palco .fx-anel,.fx-topo{opacity:1}
  .fx-aceso .fx-trilha{stroke-dashoffset:0;opacity:.62}
  .fx-aceso .fx-cabeca{display:none}
  .fx-reflexo,.fx-vaza{opacity:1}
}