/* Animações das lâminas 2 a 6 + trilho de navegação.
   Tudo aqui é opcional: para voltar à versão estática, basta remover o link deste arquivo e o anim.js. */
:root{--e:cubic-bezier(.22,1,.36,1)}

/* ---------- entrada comum: texto sobe linha por linha, palco chega de lado ---------- */
html:not(.calm) .lam [data-r]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--e),transform .85s var(--e);transition-delay:var(--d,0ms)}
html:not(.calm) .lam [data-r="x"]{transform:translateX(80px)}
html:not(.calm) .lam [data-r="z"]{transform:scale(.88)}
.lsec.in .lam [data-r]{opacity:1!important;transform:none!important}
.lam .fx3h>span{display:inline-block}
.lsec.in .lam .fx3h .g{animation:gglow 1.4s ease-out .5s both}
@keyframes gglow{0%{text-shadow:0 0 0 rgba(47,208,122,0)}40%{text-shadow:0 0 28px rgba(47,208,122,.55)}100%{text-shadow:0 0 0 rgba(47,208,122,0)}}

/* grade do fundo em paralaxe leve */
.lsec .lam .slide::before{background-position:0 calc(var(--gy,0) * 1px)}

/* ---------- lâmina 2 · quem faz ---------- */
.lam .cnt{display:inline-block;font-variant-numeric:tabular-nums}
.lam .votes{display:inline-flex;gap:8px;margin-left:12px;vertical-align:middle}
.lam .votes i{display:block;width:14px;height:14px;border-radius:50%;background:#00A859;opacity:0;transform:scale(.4)}
.lsec.in .lam .votes i{animation:vote 1.2s var(--e) both}
.lsec.in .lam .votes i:nth-child(1){animation-delay:.9s}
.lsec.in .lam .votes i:nth-child(2){animation-delay:1.35s}
@keyframes vote{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.5);box-shadow:0 0 0 0 rgba(0,168,89,.5)}100%{opacity:1;transform:scale(1);box-shadow:0 0 0 18px rgba(0,168,89,0)}}
.lam .cities{background:linear-gradient(#00A859,#00A859) no-repeat 0 96%/0% 5px;padding-bottom:3px;transition:background-size 1.5s var(--e) 1.1s}
.lsec.in .lam .cities{background-size:55% 5px}
.lsec.in .lam .scr-photo img{animation:kb 16s ease-in-out infinite alternate}
.lam .scr-photo img{transform-origin:50% 35%}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.lam .shine{position:absolute;left:-70%;top:34%;width:55%;height:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);mix-blend-mode:soft-light;pointer-events:none;opacity:0}
.lsec.in .lam .shine{animation:shine 6s ease-in-out 1.6s infinite}
@keyframes shine{0%{left:-70%;opacity:0}12%{opacity:1}40%{left:120%;opacity:1}41%,100%{left:120%;opacity:0}}
.lsec.in .lam .tilt3{animation:float2 6.5s ease-in-out infinite}
@keyframes float2{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ---------- lâmina 3 · imersão ---------- */
html:not(.calm) .lam .bento .bt{opacity:0;transition:opacity .9s var(--e),transform .9s var(--e);transition-delay:var(--d,0ms)}
html:not(.calm) .lam .bento .bt.big{transform:translateX(90px)}
html:not(.calm) .lam .bento .bt:nth-child(2){transform:translateY(-70px)}
html:not(.calm) .lam .bento .bt:nth-child(3){transform:translateX(90px) scale(.9)}
html:not(.calm) .lam .bento .bt:nth-child(4){transform:translateY(70px)}
.lsec.in .lam .bento .bt{opacity:1!important;transform:none!important}
.lam .bt img{transform-origin:50% 50%}
.lsec.in .lam .bt.big img{animation:kb 15s ease-in-out infinite alternate}
.lsec.in .lam .bt:nth-child(2) img{animation:kb 19s ease-in-out -3s infinite alternate}
.lsec.in .lam .bt:nth-child(3) img{animation:kb 17s ease-in-out -7s infinite alternate}
.lsec.in .lam .bt:nth-child(4) img{animation:kb 21s ease-in-out -11s infinite alternate}
.lam .zero{display:inline-block}
.lsec.in .lam .zero{animation:zeropulse 1.1s var(--e) 1.9s both}
@keyframes zeropulse{0%{transform:scale(1)}40%{transform:scale(1.18);text-shadow:0 0 22px rgba(47,208,122,.7)}100%{transform:scale(1)}}
.lsec.in .lam .cta13{animation:ctaglow 3.4s ease-in-out 2.2s infinite}
@keyframes ctaglow{0%,100%{text-shadow:0 0 0 rgba(47,208,122,0)}50%{text-shadow:0 0 34px rgba(47,208,122,.6)}}

/* ---------- lâmina 4 · como funciona ---------- */
.lam .st{display:inline-block;transition:color .4s,transform .4s var(--e)}
.lam .cols3 .dt{transition:transform .4s var(--e),box-shadow .4s}
.lam .cols3 .st.on{transform:scale(1.07);transform-origin:left center}
.lam .cols3 .dt.on{transform:scale(1.6);box-shadow:0 0 0 8px rgba(47,208,122,.3)}
html:not(.calm) .lam .wab3 .m{opacity:0;transform:translateY(14px)}
html:not(.calm) .lam .wab3 .m.show{opacity:1;transform:none;transition:opacity .5s var(--e),transform .5s var(--e)}
.lam .wab3 .m.typing{display:flex;gap:6px;align-items:center;align-self:flex-start;width:auto;padding:16px 20px;min-height:0}
.lam .wab3 .m.typing i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.75);animation:typing 1s ease-in-out infinite}
.lam .wab3 .m.typing i:nth-child(2){animation-delay:.15s}
.lam .wab3 .m.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-6px);opacity:1}}
.lam .wv2.playing i{animation:wave .9s ease-in-out infinite;transform-origin:center}
.lam .wv2.playing i:nth-child(3n){animation-delay:.12s}
.lam .wv2.playing i:nth-child(3n+1){animation-delay:.27s}
.lam .wv2.playing i:nth-child(4n){animation-delay:.4s}
@keyframes wave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.25)}}

/* ---------- lâmina 5 · dados ---------- */
.lam .lock::before{transform-origin:20% 100%}
.lsec .lam .lock::before{transform:translateY(-30px) rotate(-14deg)}
.lsec.in .lam .lock::before{animation:shackle .9s cubic-bezier(.3,1.6,.5,1) .7s both}
@keyframes shackle{0%{transform:translateY(-30px) rotate(-14deg)}55%{transform:translateY(5px) rotate(0)}100%{transform:translateY(0) rotate(0)}}
.lsec.in .lam .lock{animation:lockring 2.6s ease-out 1.6s 2}
@keyframes lockring{0%{box-shadow:0 0 0 0 rgba(47,208,122,.55)}100%{box-shadow:0 0 0 46px rgba(47,208,122,0)}}
html:not(.calm) .lam .list5>span{opacity:0;transform:translateX(-18px);transition:opacity .6s var(--e),transform .6s var(--e);transition-delay:calc(var(--i,0) * 360ms + 800ms)}
.lsec.in .lam .list5>span{opacity:1!important;transform:none!important}
html:not(.calm) .lam .list5 .dt{transform:translateY(-2px) scale(0);transition:transform .5s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--i,0) * 360ms + 950ms)}
.lsec.in .lam .list5 .dt{transform:translateY(-2px) scale(1)!important}

/* ---------- lâmina 6 · cara ou coroa ---------- */
.lam .end14{perspective:1100px}
html:not(.calm) .lam .coin14b{opacity:0}
.lsec.in .lam .coin14b{animation:toss 2.3s cubic-bezier(.25,.75,.35,1) .15s both,coinhover 6.5s ease-in-out 2.6s infinite}
@keyframes toss{0%{opacity:1;transform:translateY(40px) rotateX(0)}38%{opacity:1;transform:translateY(-170px) rotateX(900deg)}72%{opacity:1;transform:translateY(0) rotateX(1620deg)}84%{opacity:1;transform:translateY(-26px) rotateX(1620deg)}100%{opacity:1;transform:translateY(0) rotateX(1800deg)}}
@keyframes coinhover{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.lam .e1 .g14{display:inline-block}
.lsec.in .lam .e1 .g14:nth-of-type(1){animation:pick 1.1s var(--e) .75s both}
.lsec.in .lam .e1 .g14:nth-of-type(2){animation:pick 1.1s var(--e) 1.55s both}
@keyframes pick{0%{transform:scale(1);text-shadow:0 0 0 rgba(47,208,122,0)}40%{transform:scale(1.16);text-shadow:0 0 30px rgba(47,208,122,.65)}100%{transform:scale(1);text-shadow:0 0 0 rgba(47,208,122,0)}}
.lsec.in .lam .pm14{animation:bobm 5.5s ease-in-out 2.6s infinite}
@keyframes bobm{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ---------- trilho de lâminas (pontinhos) e moeda do cabeçalho ---------- */
.rail{display:none;position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:55;flex-direction:column;gap:14px}
.rail a{position:relative;width:11px;height:11px;border-radius:50%;background:#00A859;opacity:.45;box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 0 0 3px rgba(0,40,19,.28);transition:transform .35s var(--e),opacity .35s}
.rail a::after{content:attr(data-t);position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font:700 12px Montserrat,sans-serif;color:#fff;background:rgba(0,21,10,.88);padding:5px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s}
.rail a:hover::after{opacity:1}
.rail a.on{opacity:1;transform:scale(1.55)}
@media(min-width:1200px){.rail{display:flex}}
.top .brand img{transform:rotateY(calc(var(--rot,0) * 1deg));transition:transform .15s linear}

@media(prefers-reduced-motion:reduce){
  .lam *,.lam *::before,.lam *::after{animation:none!important;transition:none!important}
}

/* última lâmina (computador): a faixa @ocara.ia · WhatsApp · @paulomarcelo.ia centralizada no meio da lâmina */
.lam .e4{left:0;right:0;margin-left:auto;margin-right:auto;width:fit-content;transform:none}
.lam .e4{white-space:nowrap}