/* Revelação ao rolar (só com JS ativo) */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.js [data-reveal="left"]{transform:translateX(-60px)}
.js [data-reveal="right"]{transform:translateX(60px)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .hero__title [data-reveal]{display:block}
.js .hero__title [data-reveal].t3{transform:translateX(-40px) skewX(-4deg)}
.js .hero__title [data-reveal].t3.is-in{transform:none}

/* Adesivos flutuantes (sutil, só transform de baixo custo) */
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
.float{animation:floaty 4.2s ease-in-out infinite}
.stk--2.float,.stk--4.float{animation-delay:-1.4s}
.stk--3.float,.phone--r.float{animation-delay:-2.6s}
@keyframes wiggle{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.stk--1,.stk--3{animation:floaty 4.2s ease-in-out infinite,wiggle 5s ease-in-out infinite}
.chars__sticker{animation:floaty 3.6s ease-in-out infinite}

/* CTA com pulso */
@keyframes pulse{0%{box-shadow:4px 4px 0 var(--black),0 0 0 0 rgba(201,255,20,.7)}70%{box-shadow:4px 4px 0 var(--black),0 0 0 16px rgba(201,255,20,0)}100%{box-shadow:4px 4px 0 var(--black),0 0 0 0 rgba(201,255,20,0)}}
.pulse{animation:pulse 2.4s infinite}
.pulse:hover{animation:none}

/* Setas e rabiscos */
@keyframes nudge{0%,100%{translate:0 0}50%{translate:6px -4px}}
.hero__arrow,.hero__barrow,.steps__arrow,.plans__arrow,.plans__arrow2{animation:nudge 2.4s ease-in-out infinite}
@keyframes spin-slow{to{rotate:360deg}}
.chars__star{animation:spin-slow 12s linear infinite}
.bolt{animation:wiggle 1.2s ease-in-out infinite}

/* Sublinhado rabiscado desenhando */
.js .pain__line path{stroke-dasharray:320;stroke-dashoffset:320;transition:stroke-dashoffset 1.1s ease .5s}
.js .pain__title.is-in .pain__line path{stroke-dashoffset:0}

/* Brilho passando no selo recomendado */
.plan__badge{overflow:hidden}
.plan__badge::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(120%)}}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
 .js [data-reveal]{opacity:1!important;transform:none!important}
}