/* ===== animacoes rodada 2 (base: 5 segredos de sites incriveis) ===== */
/* 1. intro: cortina com logo e barra, some sozinha mesmo sem JS */
#intro{position:fixed;inset:0;z-index:200;background:#0E1116;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;animation:introout .9s var(--ease) 1.5s forwards}
html.noin #intro{display:none}
#intro .il{font-weight:800;font-style:italic;font-size:clamp(34px,8vw,84px);letter-spacing:-.04em;display:flex;overflow:hidden;padding:0 .1em .26em;margin-bottom:-.18em}
#intro .il span{display:inline-block;transform:translateY(110%);animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--k)*55ms + .1s)}
#intro .il i{font-style:normal;color:var(--accent)}
#intro .ib{width:min(260px,52vw);height:4px;background:#2A2F37;border-radius:4px;overflow:hidden}
#intro .ib::after{content:"";display:block;height:100%;width:100%;background:linear-gradient(90deg,#FF6500,#FFA45C);transform:scaleX(0);transform-origin:0 50%;animation:ibar 1.1s var(--ease) .2s forwards}
#intro .is{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#8A9099;opacity:0;animation:fadein .6s ease .5s forwards}
@keyframes ibar{to{transform:scaleX(1)}}
@keyframes fadein{to{opacity:1}}
@keyframes introout{to{transform:translateY(-100%);visibility:hidden}}
html:not(.noin) h1 .w>span{animation-delay:calc(1.25s + var(--d)*110ms)}
html:not(.noin) .kicker,html:not(.noin) .lead,html:not(.noin) .hero .stats{opacity:0;animation:fadeup .8s var(--ease) 2s forwards}
html:not(.noin) .hero .stats{animation-delay:2.25s}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html:not(.noin) .top{animation:topin .7s var(--ease) 1.3s both}
@keyframes topin{from{transform:translateY(-100%)}to{transform:none}}

/* 2. scroll suave (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* reveals */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-right:.28em}
.sw>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--i)*70ms)}
h2.seen .sw>span{transform:none}
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.rv.seen{opacity:1;transform:none}

/* 4/5. fundo interativo no hero + brilho que segue o mouse */
.hero .wrap{--gx:80%;--gy:20%;background:radial-gradient(520px 360px at var(--gx) var(--gy),rgba(255,101,0,.5),transparent 62%),linear-gradient(120deg,#0E1116 0%,#1A1F27 70%)}
.hero .wrap>*:not(.fxc){position:relative;z-index:1}
.fxc{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero h1{will-change:transform}

/* 5. tilt 3D nos cards */
.grid{perspective:1100px}
.card.in:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);transition:transform .15s ease-out,box-shadow .3s;transition-delay:0s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 60%);z-index:3;mix-blend-mode:soft-light}
.card:hover::before{opacity:1}
.btn,.more{transition:transform .25s var(--ease),background .2s,box-shadow .2s}

/* 3. cortina ao trocar de aba */
#wipe{position:fixed;left:0;top:0;height:100%;width:100%;z-index:90;pointer-events:none;background:linear-gradient(90deg,transparent 0,rgba(255,101,0,.0) 40%,rgba(255,101,0,.22) 50%,rgba(255,101,0,0) 60%,transparent 100%);transform:translateX(-100%);opacity:0}
#wipe.go{animation:wipe .75s var(--ease)}
@keyframes wipe{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:1}}

@media(prefers-reduced-motion:reduce){#intro,#wipe,.fxc{display:none!important}.sw>span,.rv{transform:none!important;opacity:1!important;transition:none!important}html:not(.noin) h1 .w>span{animation-delay:0s}html:not(.noin) .kicker,html:not(.noin) .lead,html:not(.noin) .hero .stats,html:not(.noin) .top{opacity:1;animation:none}}
.deals h2{gap:0}.deals h2::before{margin-right:10px;flex:0 0 auto}

/* ---- halo de cursor (desktop, mouse) ---- */
#halo,#halo2{position:fixed;left:0;top:0;pointer-events:none;z-index:9998;opacity:0;transition:opacity .4s cubic-bezier(.2,.7,.2,1);will-change:transform}
#halo{width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(255,101,0,.20) 0%,rgba(255,101,0,.07) 40%,transparent 70%);mix-blend-mode:multiply}
#halo2{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #FF6500;transition:opacity .4s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),margin .35s cubic-bezier(.2,.7,.2,1),background .35s,border-color .35s}
#halo2.on,#halo.on{opacity:1}
#halo2.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,101,0,.14)}
#halo2.txt{width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px;background:#FF6500}
.hero #halo,.hero~#halo{mix-blend-mode:normal}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){#halo,#halo2{display:none!important}}

/* ---- coracao de Salvar: preenchimento, pop e confete ---- */
button.sv{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px}
button.sv::before{content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8 3 4.5 6.5 4.5c2 0 3.6 1.1 5.5 3 1.9-1.9 3.5-3 5.5-3C21 4.5 23 8 21.6 11.600 19.500 16.400 12 21 12 21z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8 3 4.5 6.5 4.5c2 0 3.6 1.1 5.5 3 1.9-1.9 3.5-3 5.5-3C21 4.5 23.100 8 21.6 11.600 19.500 16.400 12 21 12 21z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
button.sv.on{color:#FF6500;border-color:#FF6500}
button.sv.on::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8 3 4.5 6.5 4.5c2 0 3.6 1.1 5.5 3 1.9-1.9 3.5-3 5.5-3C21 4.5 23 8 21.6 11.600 19.500 16.400 12 21 12 21z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8 3 4.5 6.5 4.5c2 0 3.6 1.1 5.5 3 1.9-1.9 3.5-3 5.5-3C21 4.5 23.100 8 21.6 11.600 19.500 16.400 12 21 12 21z'/%3E%3C/svg%3E")}
button.sv.pop::before{animation:hpop .7s cubic-bezier(.2,.7,.2,1)}
@keyframes hpop{0%{transform:scale(.4)}35%{transform:scale(1.7) rotate(-8deg)}65%{transform:scale(.9)}100%{transform:scale(1)}}
button.sv.pop::after{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #FF6500;pointer-events:none;animation:hring .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hring{from{transform:scale(.5);opacity:.9}to{transform:scale(3.4);opacity:0}}
.hsearch .salvos.bump{animation:sbump .6s cubic-bezier(.2,.7,.2,1)}
@keyframes sbump{0%{transform:scale(1)}35%{transform:scale(1.14);box-shadow:0 0 0 6px rgba(255,101,0,.35)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,101,0,0)}}
.cf{position:fixed;left:0;top:0;width:7px;height:11px;border-radius:2px;pointer-events:none;z-index:9999}
@media(prefers-reduced-motion:reduce){button.sv.pop::before,button.sv.pop::after,.hsearch .salvos.bump{animation:none}.cf{display:none}}

/* ---- K7: banner com gradiente conico animado (borda luminosa + aurora) ---- */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.hero .wrap{isolation:isolate}
.hero .wrap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background:conic-gradient(from var(--ang) at 78% 30%,rgba(255,101,0,.0),rgba(255,101,0,.42),rgba(255,190,90,.22),rgba(11,60,140,.38),rgba(255,101,0,.0) 80%);
 filter:blur(34px);opacity:0;animation:aurIn .9s cubic-bezier(.2,.7,.2,1) .2s forwards,aurSpin 14s linear infinite}
.hero .wrap::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:2px;
 background:conic-gradient(from var(--ang),rgba(255,101,0,0) 0deg,#FF6500 55deg,#FFD08A 80deg,#FF6500 105deg,rgba(255,101,0,0) 160deg 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:aurIn .9s cubic-bezier(.2,.7,.2,1) .35s forwards,aurSpin 7s linear infinite}
@keyframes aurSpin{to{--ang:360deg}}
@keyframes aurIn{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero .wrap::before{animation:none;opacity:.7}.hero .wrap::after{animation:none;opacity:.8}}

/* ===== K6 bloco de confianca ===== */
.trust{background:#0E1116;color:#fff;margin-top:34px;padding:56px 0 60px;position:relative;overflow:hidden}
.trust::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60vw;height:60vw;max-width:700px;max-height:700px;background:radial-gradient(closest-side,rgba(255,101,0,.22),transparent);pointer-events:none}
.trust h2{position:relative;font-size:clamp(24px,3.4vw,38px);font-weight:700;letter-spacing:-.03em;margin:0 0 30px;color:#fff}
.tr-l{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tr-i{padding:4px 26px 8px 0;margin-right:26px;border-right:1px solid #2A2F37;--d:calc(var(--i)*140ms)}
.tr-i:last-child{border-right:0;margin-right:0}
.tr-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#1A1F27;color:var(--accent);margin-bottom:14px;transition:transform .5s var(--ease),background .3s}
.tr-i:hover .tr-ic{transform:rotate(-8deg) scale(1.08);background:#262C36}
.tr-i b{display:block;font-size:17px;font-weight:700;margin-bottom:6px}
.tr-i p{margin:0;color:#B6BCC4;font-size:14px;line-height:1.55}
.tr-c,.tr-p{stroke-dasharray:1;stroke-dashoffset:1}
.tr-i.rv{transition-delay:var(--d)}
.tr-i.seen .tr-c{animation:trd .9s var(--ease) var(--d) forwards}
.tr-i.seen .tr-p{animation:trd .6s var(--ease) calc(var(--d) + .45s) forwards}
@keyframes trd{to{stroke-dashoffset:0}}
@media(max-width:900px){.tr-l{grid-template-columns:1fr 1fr;gap:26px 0}.tr-i:nth-child(2){border-right:0;margin-right:0}}
@media(max-width:560px){.tr-l{grid-template-columns:1fr}.tr-i{border-right:0;margin-right:0;padding:0 0 22px;border-bottom:1px solid #2A2F37}.tr-i:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){.tr-c,.tr-p{stroke-dashoffset:0;animation:none!important}.tr-ic{transition:none}}

/* Odometro das estatisticas */
.odo{display:inline-flex;align-items:flex-end;line-height:1;white-space:pre}
.od-c{display:inline-block;height:1em;overflow:hidden;position:relative}
.od-t{display:flex;flex-direction:column;transform:translateY(0);will-change:transform}
.od-t i{font-style:normal;height:1em;line-height:1;display:block;text-align:center}
.odo.go .od-t{transform:translateY(var(--to));transition:transform calc(.7s + var(--sp)*.08s) cubic-bezier(.2,.7,.2,1) var(--dl)}
.od-s{display:inline-block;line-height:1}
.od-c::after{content:"";position:absolute;inset:0;background:linear-gradient(#0000 55%,#ff650022);pointer-events:none}
@media(prefers-reduced-motion:reduce){.odo.go .od-t{transition:none}}
.stat b.odo span,.stat b.odo i{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;opacity:1;display:inline-block}
.stat b.odo .od-t{display:flex}.stat b.odo .od-t i{display:block}
.stat b.odo .od-c{display:inline-block}