/* ApiceSoft motion — calmo, acessível, só transform e opacity.
   Regra: o conteúdo é visível sem JavaScript. Só o que está abaixo da dobra
   é preparado para entrar, e só quando o script roda (classe .ap-armed).
   Motion Pack adaptado: 01 Hero reveal, 05 Count-up (hero, rotulado como simulação),
   06 Bento build + spotlight, 07 Cursor (hero), 08 Process draw, 12 Click feedback.
   O hero vivo da home fica isolado em hero-sim.css / hero-sim.js. */

/* 01 · Hero reveal (CSS puro, não depende de script) */
@keyframes ap-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ap-tilt{from{opacity:0;transform:perspective(1100px) rotateX(16deg) translateY(36px)}}
@keyframes ap-fill{from{transform:scaleX(0)}}
.ap-hero-seq>*{animation:ap-rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 90ms)}
.ap-tilt{animation:ap-tilt .9s cubic-bezier(.2,.8,.2,1) .35s both}
.ap-fill{transform-origin:left center;animation:ap-fill 1.2s cubic-bezier(.2,.8,.2,1) .9s both}

/* Fundo dos heróis: grade de pontos leve + brilho verde que respira devagar */
.hero,.lp-hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.lp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(11,31,42,.09) 1px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 35%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 75% 35%,#000 10%,transparent 75%)}
.hero::after,.lp-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:560px;height:560px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(53,214,106,.16),rgba(10,159,75,0) 65%);animation:ap-glow 14s ease-in-out infinite alternate}
@keyframes ap-glow{to{transform:translate(-60px,50px) scale(1.12)}}
.lp-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#0A9F4B,#35D66A);flex:none}

/* Entrada ao rolar */
.ap-reveal{transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.ap-reveal.ap-armed:not(.ap-visible){opacity:0;transform:translateY(14px)}

/* 06 · Bento build: filhos entram em sequência, com leve mola */
.ap-stagger>*{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.25,1.15);transition-delay:calc(var(--i,0) * 90ms)}
.ap-stagger.ap-armed:not(.ap-visible)>*{opacity:0;transform:translateY(18px) scale(.97)}
.ap-stagger.ap-settled>*{transition-delay:0s}

/* Linhas que se desenham ao aparecer (conexões do ecossistema) */
.ap-draw{transition:stroke-dashoffset 1.1s ease;transition-delay:calc(var(--i,0) * 90ms + 150ms)}
.ap-armed .ap-draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200)}
.ap-armed.ap-visible .ap-draw{stroke-dashoffset:0}

/* 08 · Process draw: a linha acompanha a rolagem e acende cada etapa */
.ap-proc .ap-scroll-draw{stroke-dasharray:1 1;stroke-dashoffset:1}
.ap-proc.lp-steps{position:relative}
.ap-proc.lp-steps>li{position:relative;z-index:1}
.ap-steps-line{position:absolute;left:35px;top:35px;width:4px;overflow:visible;pointer-events:none;z-index:0}
.ap-steps-line path{fill:none;stroke-width:2.5;stroke-linecap:round}
.ap-steps-track{stroke:#D6E3DB;stroke-dasharray:3 6}
.ap-steps-line .ap-scroll-draw{stroke:#169B52}
.lp-steps li::before{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.ap-proc.lp-steps li.is-lit::before{background:linear-gradient(135deg,#0A9F4B,#2FC463);color:#fff;transform:scale(1.08)}
.ap-proc.lp-steps li.is-lit{border-color:#BFE3CD}
.flow-node .node-symbol{position:relative;isolation:isolate}
.flow-node .node-symbol::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#0A9F4B,#35D66A);opacity:0;transform:scale(.6);transition:opacity .4s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.flow-node.is-lit .node-symbol::after{opacity:1;transform:none}
.flow-node.is-lit .node-symbol img{filter:brightness(0) invert(1)}
.flow-node.is-lit{border-color:#BFE3CD}

/* Destaque em sequência (exemplo do hero da página Agentes) */
.ap-cycling>li{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.ap-cycling>li.is-active{transform:translateX(6px);border-color:#9FD3B4;box-shadow:0 8px 22px rgba(8,120,60,.10)}
.ap-cycling>li.is-active::before{background:linear-gradient(135deg,#0A9F4B,#2FC463);color:#fff}

/* Cartões: elevação, leve inclinação e luz seguindo o ponteiro */
.ap-lift{transition-property:transform,box-shadow,border-color,opacity;transition-duration:.35s,.35s,.35s,.45s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.ap-lift:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(11,31,42,.09);border-color:#B8DCC6}
.ap-tiltable{position:relative}
.ap-tiltable:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.ap-tiltable::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(53,214,106,.10),transparent 60%);opacity:0;transition:opacity .35s}
.ap-tiltable:hover::after{opacity:1}
.card .icon,.lp-card>.ap-icon:first-child{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.card:hover .icon,.lp-card:hover>.ap-icon:first-child{transform:scale(1.08) rotate(-4deg)}
.lp-card>.ap-icon:first-child{width:46px;height:46px;padding:11px;background:#E5F7ED;border-radius:12px;box-sizing:border-box;display:block}
.card:focus-within,.lp-card:focus-within,.blog-card:focus-visible{border-color:#169B52}

/* 12 · Click feedback nos botões: sobe no hover, afunda no toque, brilho que passa */
.ap-action{transition:transform .18s ease,box-shadow .2s ease,background .2s ease}
.ap-action:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(8,120,60,.18)}
.ap-action:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:.08s}
.ap-action:disabled{transform:none;box-shadow:none}
.ap-shine{position:relative;overflow:hidden;isolation:isolate}
.ap-shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);transform:translateX(-170%) skewX(-12deg)}
.ap-shine:hover::after{transform:translateX(260%) skewX(-12deg);transition:transform .75s ease}

/* Barra de progresso de leitura */
.ap-read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:linear-gradient(90deg,#0A9F4B,#35D66A);transform-origin:left center;transform:scaleX(0)}

/* Utilitários de imagem e ícone */
.ap-motion-image{width:100%;max-width:100%;height:auto;display:block;border-radius:18px;border:1px solid #DDEBE2}
.ap-image-panel{margin:22px 0;overflow:hidden;border-radius:18px}
.ap-icon{width:20px;height:20px;vertical-align:middle;margin-right:7px;flex:none}
.ap-page-illustration{max-width:540px;margin:24px auto}
.ap-preview-label{font-size:11px;color:#63736A;text-transform:uppercase;letter-spacing:.1em}
.ap-illustration{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 18px 48px rgba(11,31,42,.08)}
.ap-float{animation:ap-float 7s ease-in-out infinite}
@keyframes ap-float{50%{transform:translateY(-8px)}}

@media(prefers-reduced-motion:reduce){
 .ap-hero-seq>*,.ap-tilt,.ap-fill,.hero::after,.lp-hero::after,.ap-float{animation:none}
 .ap-reveal,.ap-stagger>*,.ap-draw,.ap-action,.ap-lift,.ap-cycling>li,.lp-steps li::before,.flow-node .node-symbol::after,.ap-tiltable::after{transition:none}
 .ap-armed:not(.ap-visible),.ap-stagger.ap-armed:not(.ap-visible)>*{opacity:1;transform:none}
 .ap-armed .ap-draw,.ap-proc .ap-scroll-draw{stroke-dashoffset:0}
 .ap-lift:hover,.ap-action:hover,.ap-action:active{transform:none}
 .ap-shine::after{display:none}
}