/* =====================================================================================================
   ANIMAÇÕES ORIZZON — kit da skill animacoes
   Padrão das páginas de vendas desde 18/09/2026: as animações de https://fersales.com.br/ (medidas
   quadro a quadro e reproduzidas nas LPs da Fernanda e da Dani). Link bio: os cards em cascata da Gabi.

   Como ligar numa página:
     <head>  <link rel="stylesheet" href="animacoes.css">
             <noscript><style>.anima-zoom,.anima-up,.anima-direita,.anima-esquerda,.anima-desce,.anima-card,.anima-x,.pil
               {opacity:1!important;animation:none!important;transform:none!important}</style></noscript>
     <body>  ... <script src="animacoes.js"></script>   (no FIM do body, ou com defer no head)

   Princípio: numa página de vendas, TEXTO INVISÍVEL É PIOR QUE TEXTO SEM ANIMAÇÃO. Toda peça que nasce
   escondida tem rede de segurança (seção 2). Troque cores e distâncias na seção 0 — no projeto, não aqui.
   🔴 A classe de animação vai num elemento SEM transform próprio: o keyframe sobrescreve o transform (e
   o hover do botão). Precisa animar algo que já usa transform? Embrulhe num <div class="anima-...">.
   ===================================================================================================== */

/* ---------- 0. ajustes do projeto ---------- */
:root{
  --sobe:100px;                                   /* anima-up sobe 100 px (referência) */
  --lado:150px;                                   /* anima-esquerda / anima-direita: 150 px de lado */
  --card-sobe:40px;                               /* anima-card (link bio) sobe 40 px */
  --cta-escala:1.05;                              /* botão cresce 5% */
  --cta-brilho:0 0 40px 5px rgba(221,188,90,.64); /* brilho dourado em volta do botão */
  --cta-reflexo:rgba(139,115,45,.6);              /* faixa de luz que passa sem parar */
  --cta-verde-brilho:0 0 50px 4px rgba(0,204,55,.35);
  --cta-verde-reflexo:rgba(6,107,30,1);
  --foco-fora:#000;                               /* foco do teclado em ANEL DUPLO: um anel só some */
  --foco-dentro:#F2C9A4;                          /* no fundo de algum botão (bronze no bege: 1:1) */
  --tinta-foco:#916837;                           /* anel da fita, do carrossel e do FAQ */
  --sla-hover:#E6DEC4;                            /* setas do carrossel ficam bege no hover */
}
/* A entrada lateral passa 150 px para fora da coluna: sem isto a página ganha rolagem de lado durante a
   animação. "clip" (e não "hidden") não cria caixa de rolagem, então position:sticky continua valendo. */
body{overflow-x:hidden}
@supports (overflow:clip){ html,body{overflow-x:clip} }

/* ---------- 1. entrada ao rolar — IGUAL À REFERÊNCIA ----------
   A peça nasce só invisível (sem transform). Quando 15% dela aparece, o JS põe .js-animated: a opacidade
   vai a 1 NA HORA (o !important vence o keyframe) e só o movimento anima — 1,5 s, cubic-bezier(.23,1,.32,1).
   É assim na referência, medido: não "corrija" para um fade. SEM will-change: ele promovia cada bloco a
   camada de GPU com borda fracionária e o carrossel perdia a última linha dos cards no celular. */
.anima-zoom,.anima-up,.anima-direita,.anima-esquerda,.anima-desce{opacity:0}
.js-animated{opacity:1!important;animation-fill-mode:forwards!important;animation-duration:1.5s!important;
             animation-timing-function:cubic-bezier(.23,1,.32,1)!important}
@keyframes zoomIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(var(--sobe,100px))}to{opacity:1;transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(calc(-1 * var(--lado,150px)))}to{opacity:1;transform:translateX(0)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(var(--lado,150px))}to{opacity:1;transform:translateX(0)}}
.js-animated.anima-zoom{animation-name:zoomIn}
.js-animated.anima-up{animation-name:slideUp}
/* nomes da referência, mantidos: "direita" VEM DA ESQUERDA e "esquerda" VEM DA DIREITA. A coluna da
   esquerda usa anima-esquerda e a da direita anima-direita: as duas se cruzam no meio, como lá. */
.js-animated.anima-direita{animation-name:slideRight}
.js-animated.anima-esquerda{animation-name:slideLeft}
/* celular (uma coluna): os laterais viram "up" — 150 px de lado numa coluna estreita atravessam a tela.
   Página da figma-fiel usa o corte do layout dela (1023,98 px). */
@media (max-width:767.98px){ .js-animated.anima-direita,.js-animated.anima-esquerda{animation-name:slideUp} }
/* seta que desce do próprio tamanho (1,25 s ease). Os 100 ms de atraso são do JS, com ela AINDA invisível:
   com animation-delay no CSS o .js-animated (opacity:1 !important) a mostrava parada no lugar ~6 quadros. */
.js-animated.anima-desce{animation-name:desce!important;animation-duration:1.25s!important;
                         animation-timing-function:ease!important}
@keyframes desce{from{opacity:1;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
/* peça que entra pelo TOPO (voltou rolando para cima, recarregou no meio da página): aparece já no lugar.
   Subindo de baixo ela passava por baixo do bloco seguinte, já parado. */
.js-animated.rv-ja{animation:none!important;opacity:1!important}

/* pílulas em cadeia: itens pequenos que aparecem DEPOIS da coluna, cada um quando ELE chega à tela
   (200 / 400 / 600 ms). Classe própria: o .js-animated (opacity:1 !important) mataria o fade. */
.pil{opacity:0}
.pil.pil-on{animation:pilula 1.25s ease forwards}
.pil.d1.pil-on{animation-delay:.2s}.pil.d2.pil-on{animation-delay:.4s}.pil.d3.pil-on{animation-delay:.6s}
.pil.pil-ja{animation:none;opacity:1}
@keyframes pilula{from{opacity:0}to{opacity:1}}

/* link bio (Gabi): o card INTEIRO — arte, texto e botão — sobe e aparece junto (0,9 s); vários entrando
   juntos vão em cascata de 120 ms (o JS escreve --atraso). */
.anima-card{opacity:0;transform:translate3d(0,var(--card-sobe,40px),0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--atraso,0s)}
.anima-card.card-in{opacity:1;transform:none}
.anima-card.rv-ja{transition:none}

/* QUALQUER OUTRA ENTRADA, com as mesmas redes de segurança: class="anima-x" style="--anima:desfocar".
   Use um keyframe pronto abaixo ou crie o seu (@keyframes no CSS do projeto — que termine com opacity:1
   se mexer na opacidade). Ajustáveis: --anima-dur (padrão .8s), --anima-curva e --anima-atraso. Classe
   própria (x-on) porque o .js-animated força opacity:1 e mataria um fade. */
.anima-x{opacity:0}
.anima-x.x-on{opacity:1;animation:var(--anima,surgir) var(--anima-dur,.8s) var(--anima-curva,cubic-bezier(.23,1,.32,1)) var(--anima-atraso,0s) both}
.anima-x.rv-ja{animation:none;opacity:1}
@keyframes surgir{from{opacity:0}to{opacity:1}}                                          /* só aparece */
@keyframes desfocar{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}         /* sai do desfoque */
@keyframes virar{from{opacity:0;transform:perspective(900px) rotateX(-70deg)}to{opacity:1;transform:none}}
@keyframes girarEntrando{from{opacity:0;transform:rotate(-12deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes descer{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes pular{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.08)}75%{transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes cortina{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}       /* revela da esquerda */
@keyframes crescerX{from{transform:scaleX(0)}to{transform:scaleX(1)}}                     /* barra de gráfico */

/* ---------- 2. redes de segurança ----------
   SEM JavaScript: enquanto o JS não marca html.rv-ok (ele marca depois da 1ª varredura que deu certo),
   cada peça aparece sozinha aos 6 s. Script com erro, bloqueado por extensão ou que não baixou = texto
   visível. Sem JS nenhum, o <noscript> do head mostra tudo na hora. */
html:not(.rv-ok):not(.parar) .anima-zoom,html:not(.rv-ok):not(.parar) .anima-up,
html:not(.rv-ok):not(.parar) .anima-direita,html:not(.rv-ok):not(.parar) .anima-esquerda,
html:not(.rv-ok):not(.parar) .anima-desce,html:not(.rv-ok):not(.parar) .anima-card,
html:not(.rv-ok):not(.parar) .anima-x,html:not(.rv-ok):not(.parar) .pil{animation:rvRede 0s linear 6s forwards}
@keyframes rvRede{to{opacity:1;transform:none}}

/* ---------- 3. ?parar — modo de auditoria: tudo no lugar final, nada se mexe ----------
   Print para comparar com o Figma sem ?parar pega o carrossel numa fase diferente e "acha" defeito que
   não existe. O JS liga html.parar só com o parâmetro EXATO (?parar ou &parar). */
html.parar .anima-zoom,html.parar .anima-up,html.parar .anima-direita,html.parar .anima-esquerda,
html.parar .anima-desce,html.parar .anima-x,html.parar .pil{opacity:1!important;animation:none!important}
html.parar .anima-card{opacity:1!important;transform:none!important;transition:none!important}
html.parar .cta .brilho{display:none}
html.parar .gira,html.parar .flutua,html.parar .ftr{animation:none}
html.parar button.pausa{display:none}

/* ---------- 4. botão (a.cta) — padrão da referência ----------
   Hover: o botão INTEIRO cresce 5% (0,4 s) e ganha brilho em volta (0,3 s); um reflexo passa sem parar
   (5 s, o "slideGradient" da referência); a seta (.ico, desenhada ↗) vira → e balança (1,2 s vai-e-volta,
   o "moverLado"). Tudo dentro de (hover:hover): celular não tem hover — ali vale o :active. */
.cta{position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent;
     box-shadow:0 0 10px 0 rgba(0,0,0,0);transition:transform .4s ease,box-shadow .3s ease}
.cta>*:not(.brilho){position:relative;z-index:1}          /* rótulo e seta por cima do reflexo */
.cta .brilho{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(60deg,transparent 4%,var(--cta-reflexo) 24%,transparent 44%);
  background-size:150% 100%;background-position:0% 50%;animation:slideGradient 5s linear infinite}
.cta.verde .brilho{background-image:linear-gradient(107deg,transparent 4%,var(--cta-verde-reflexo) 30%,transparent 55%)}
@keyframes slideGradient{0%{background-position:150% 50%}100%{background-position:-150% 50%}}
.cta .ico{display:inline-block}
/* a .ico é desenhada ↗: girar 45° a deixa →. O translate vem ANTES do rotate = anda na horizontal da tela */
@keyframes moverLado{from{transform:translateX(0) rotate(45deg)}to{transform:translateX(-7.5px) rotate(45deg)}}
@media (hover:hover){
  .cta:hover{transform:scale(var(--cta-escala,1.05));box-shadow:var(--cta-brilho)}
  .cta.verde:hover{box-shadow:var(--cta-verde-brilho)}
  .cta:hover .ico{animation:moverLado 1.2s ease-in-out infinite alternate}
}
/* RETORNO AO TOCAR (celular): o mesmo "cresce + brilho". CRESCER (e não encolher) não tira o botão de baixo
   do dedo. O botão de compra FICA assim (.indo) enquanto o checkout carrega: 1-3 s sem sinal nenhum levava
   a toques repetidos. */
.cta:active,.cta.indo{transform:scale(var(--cta-escala,1.05));box-shadow:var(--cta-brilho);transition-duration:.15s}
.cta.verde:active,.cta.verde.indo{box-shadow:var(--cta-verde-brilho)}
.cta:focus-visible{outline:2px solid var(--foco-fora);outline-offset:3px;box-shadow:0 0 0 5px var(--foco-dentro)}

/* ---------- 5. o que se mexe SEM PARAR (a revisão de 18/09 achou na referência; tinha ficado parado) ---------- */
/* selo de texto em círculo do herói: 35 s por volta, em volta do CENTRO do texto (transform-origin) */
.gira{animation:girar 35s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (max-width:767.98px){ .gira{animation:none} }      /* no celular a referência não gira */
/* mouse de "role" (↓ abaixo do herói e no topo de seções): flutua ±5 px em 2 s */
.flutua{animation:flutuar 2s ease-in-out infinite}
@keyframes flutuar{0%{transform:translateY(5px)}50%{transform:translateY(-5px)}100%{transform:translateY(5px)}}

/* botão "Pausar animações" (WCAG 2.2.2): 1ª parada do Tab, fora da tela até receber foco.
   🔴 Seletor PRESO ao botão (button.pausa). Como ".pausa" solto, estas regras pegam QUALQUER peça com a
   classe — a fita de depoimentos da Dani, ao pausar, ia parar em position:fixed no canto e sumia. */
button.pausa{position:fixed;left:8px;top:8px;z-index:1000;transform:translateY(-300%);padding:10px 18px;border:0;
  border-radius:999px;background:var(--foco-dentro);color:#0E0B09;font:500 14px/1.2 system-ui,-apple-system,sans-serif;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
button.pausa:focus{transform:none;outline:2px solid #000;outline-offset:2px}
html.quieto .cta .brilho,html.quieto .gira,html.quieto .flutua,html.quieto .ftr{animation-play-state:paused}

/* ---------- 6. FITA CONTÍNUA (depoimentos, logos, frases) — anda sem parar, em laço ----------
   A fileira aparece 3 ou mais vezes (o JS clona); a fita anda UMA fileira e volta ao início — como ela se
   repete, a emenda não aparece. O JS MEDE o período (--ft-p) na fileira montada: calculado em rem, a grade
   de 1/64 px do Chrome deixava um degrau de 0,14-0,24 px a cada volta. Pausa com o MOUSE em cima, o DEDO
   segurando ou o FOCO DO TECLADO; fora da tela fica parada.
   .fitq = PEÇA PARADA em volta da fita. É ela que o observador olha: observando a própria .fita (com a
   fileira andando dentro) o Chrome devolve, quadro sim quadro não, o retângulo COM o transform, e a fita
   podia travar parada para sempre. */
.fitq{position:relative}
.fita{position:relative;overflow:hidden;touch-action:pan-y;touch-action:pan-y pinch-zoom;
      -webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
/* ALVO PARADO do ponteiro: sem ele o que fica embaixo do cursor é o card ANDANDO, o Chrome refaz o teste
   de acerto a cada quadro e manda ~30 pointerout por segundo com o mouse parado (medido: 51 em 1,5 s).
   Efeito colateral: link DENTRO da fita não recebe clique — card de fita não leva link. */
.fita::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:2}
.fto{width:max-content}                                   /* camada do salto das setas (1 card) */
.fto.anda{transition:transform var(--ft-passo-ms,500ms) ease}
.ftr{display:flex;align-items:flex-start;gap:var(--ft-gap,16px);width:max-content;
     animation:fita var(--ft-dur,30s) linear infinite}
.ftr>*{flex:none}
/* --ft-p começa em 0: até o JS medir, a fita fica parada (e visível) em vez de dar um salto */
@keyframes fita{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--ft-p,0px)),0,0)}}
/* 🔴 a classe da pausa é "pfita", NUNCA "pausa" (ver button.pausa acima) */
.fita.pfita .ftr,.fita.fora .ftr{animation-play-state:paused}
.fita:focus-visible{outline:3px solid var(--tinta-foco);outline-offset:-3px}
.fts{position:relative;z-index:4;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}
.fts:active{transform:scale(.92)}
.fts:focus-visible{outline:2px solid var(--tinta-foco);outline-offset:3px}

/* ---------- 7. CARROSSEL DE PASSO (desktop): um card por vez, 5 s parado + 0,5 s ease (Swiper da referência) ----------
   No CELULAR o padrão é a FITA CONTÍNUA (pedido do Leonardo, 18/09: "não para, depois passa, para") — use
   .so-desktop no carrossel e .so-celular numa fita com os mesmos cards. */
.sld{position:relative;overflow:hidden;touch-action:pan-y;touch-action:pan-y pinch-zoom;cursor:grab}
.sld:focus-visible{outline:3px solid var(--tinta-foco);outline-offset:-3px}
.sldt{display:flex;align-items:flex-start;gap:var(--sld-gap,16px);width:max-content;will-change:transform}
.sldt>*{flex:none}
.sldt.anda{transition:transform var(--sld-dur,500ms) ease}
.sla{cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:transform .3s ease,background-color .3s ease}
@media (hover:hover){ .sla:hover{transform:scale(1.1);background-color:var(--sla-hover)} }
.sla:active{transform:scale(.94)}
.sla:focus-visible{outline:2px solid var(--tinta-foco);outline-offset:3px}

/* ---------- 8. FAQ (acordeão): abre na altura EXATA do conteúdo, uma resposta por vez ----------
   0fr → 1fr (e não max-height chutado, que termina antes ou depois do conteúdo). A visibility tira a
   resposta fechada do leitor de tela e do Tab. */
.fqb{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
     -webkit-tap-highlight-color:transparent}
.fqb:focus-visible{outline:2px solid var(--tinta-foco);outline-offset:2px}
.fqs{display:inline-block;transition:transform .34s cubic-bezier(.16,1,.3,1)}
.fqb[aria-expanded="true"] .fqs{transform:rotate(45deg)}      /* + vira × */
.fqr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1)}
.fqi.aberta .fqr{grid-template-rows:1fr}
.fqr>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .38s}
.fqi.aberta .fqr>div{visibility:visible;transition:visibility 0s}

/* ---------- 9. mostrar só num tamanho (carrossel no desktop, fita no celular) ---------- */
@media (max-width:767.98px){ .so-desktop{display:none!important} }
@media (min-width:768px){ .so-celular{display:none!important} }

/* ---------- 10. "reduzir movimento" (ajuste do sistema): nada anda, nada some ---------- */
@media (prefers-reduced-motion:reduce){
  .anima-zoom,.anima-up,.anima-direita,.anima-esquerda,.anima-desce,.js-animated,.pil,.anima-card,.anima-x{
    opacity:1!important;animation:none!important;transition:none!important}
  .anima-card{transform:none!important}
  .cta .brilho{display:none}
  .gira,.flutua{animation:none}
  .cta,.cta .ico,.cta:hover .ico{transition:none;animation:none}
  /* "animation:none" tem de vencer o peso de .fita.pfita .ftr: mexer na pausa durante o pointerdown faz o
     Chrome largar o arrasto horizontal do dedo */
  .ftr,.fita.pfita .ftr,.fita.fora .ftr,html.quieto .ftr{animation:none}
  .fto.anda,.sldt.anda,.fqs,.fqr,.fqr>div,.sla{transition:none}
  /* fita e carrossel parados viram faixa rolável NA MÃO. O touch-action TEM de soltar o eixo X: com o pan-y
     de cima, no celular o arrasto do dedo não andava nada e a pessoa via só o que cabe na tela. */
  .fita,.sld{overflow-x:auto;scrollbar-width:thin;
             touch-action:pan-x pan-y;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain}
}