/* Lumus Flow · site: movimento e transições (camada por cima do site.css).
   Tudo que começa escondido fica atrás de html.mo, que só é ligado com JS e sem "reduzir movimento". */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* ---------- transição entre páginas (Chrome/Edge/Safari novos) ---------- */
@view-transition{navigation:auto}
.top{view-transition-name:topo}
::view-transition-old(root){animation:vt-out .28s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}

/* ---------- topo: barra de progresso e some/volta com a rolagem ---------- */
.top{transition:border-color var(--t-page),transform .45s var(--ease-out)}
.top.is-away{transform:translateY(-100%)}
.top-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--flow);background-size:200% 100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none;animation:flowslide 6s linear infinite}
@keyframes flowslide{to{background-position:-200% 0}}

/* menu de recursos: itens entram em cascata */
html.mo .mega a{opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease-out),transform .4s var(--ease-out),background var(--t-ctl)}
html.mo .mega.is-open a{opacity:1;transform:none}
html.mo .mega.is-open a:nth-child(2){transition-delay:25ms}html.mo .mega.is-open a:nth-child(3){transition-delay:50ms}
html.mo .mega.is-open a:nth-child(4){transition-delay:75ms}html.mo .mega.is-open a:nth-child(5){transition-delay:100ms}
html.mo .mega.is-open a:nth-child(6){transition-delay:125ms}html.mo .mega.is-open a:nth-child(7){transition-delay:150ms}
html.mo .mega.is-open a:nth-child(8){transition-delay:175ms}html.mo .mega.is-open a:nth-child(9){transition-delay:200ms}
.mega a .ico{transition:transform .35s var(--ease-out)}
.mega a:hover .ico{transform:translateY(-2px) rotate(-6deg)}

/* ---------- botões ---------- */
.btn{position:relative;overflow:hidden;transition:background var(--t-ctl),border-color var(--t-ctl),color var(--t-ctl),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.btn-main::after,.btn-white::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn-main:hover::after,.btn-white:hover::after{transition:transform .7s var(--ease-out);transform:translateX(120%)}
.btn-main:hover{box-shadow:0 12px 28px -12px rgba(49,85,245,.7)}
.btn:active{transform:scale(.97)}
.btn.is-mag{transition:background var(--t-ctl),border-color var(--t-ctl),color var(--t-ctl),box-shadow .35s var(--ease-out),transform .2s linear}

/* ---------- entrada do topo da página ---------- */
.hero,.f-hero{isolation:isolate}
.f-hero{position:relative}
.aurora{position:absolute;inset:-80px 0 auto;height:820px;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.26;will-change:transform}
.aurora i:nth-child(1){width:520px;height:520px;left:6%;top:40px;background:#64D8FF;animation:drift1 18s var(--ease-io) infinite alternate}
.aurora i:nth-child(2){width:460px;height:460px;right:4%;top:0;background:#7057FF;opacity:.22;animation:drift2 22s var(--ease-io) infinite alternate}
.aurora i:nth-child(3){width:380px;height:380px;left:42%;top:260px;background:#3155F5;opacity:.16;animation:drift3 26s var(--ease-io) infinite alternate}
@keyframes drift1{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-140px,120px) scale(.9)}}
@keyframes drift3{to{transform:translate(-90px,-70px) scale(1.2)}}

.rl{display:inline-block;overflow:clip;overflow-clip-margin:.25em;vertical-align:top;padding:.04em 0 .24em;margin:-.04em 0 -.24em}
.rl.rl-done{overflow:visible}
.rl > span{display:inline-block}
html.mo .rl > span{transform:translateY(105%);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms + var(--d,0ms))}
html.mo .in .rl > span,html.mo .rl.in > span{transform:none}
.rl.rl-free{overflow:visible}
html.mo .rl-free > span{transform:translateY(40%);opacity:0;transition:transform 1s var(--ease-out),opacity .7s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + var(--d,0ms))}
html.mo .in .rl-free > span{opacity:1}
html.mo [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms + var(--d,0ms))}
html.mo [data-rv="fade"]{transform:none}
html.mo [data-rv="scale"]{transform:scale(.94)}
html.mo [data-rv="left"]{transform:translateX(-28px)}
html.mo [data-rv].in{opacity:1;transform:none}

/* janela do produto: chega deitada e se endireita com a rolagem */
.demo,.win{transform-origin:50% 0}
html.mo .demo,html.mo .win{transform:perspective(1600px) rotateX(calc(var(--tilt,1) * 16deg)) translateY(calc(var(--tilt,1) * 40px)) scale(calc(1 - var(--tilt,1) * .06));will-change:transform}
html.mo .demo .app,html.mo .win{transition:box-shadow .6s var(--ease-out)}
.sparkle{animation:twinkle 5s var(--ease-io) infinite}
.sp2{animation-delay:-2.4s}
@keyframes twinkle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(45deg) scale(.82)}}

/* ---------- "troque seis ferramentas": cada uma é riscada e o Flow acende ---------- */
html.mo .swap li:not(.is-flow){text-decoration:none;background:linear-gradient(rgba(217,56,79,.6),rgba(217,56,79,.6)) no-repeat 14px 52%/0 1.5px;transition:background-size .5s var(--ease-io),color .4s,opacity .4s,transform .4s var(--ease-out);transition-delay:calc(var(--i,0) * 160ms + 200ms)}
html.mo .swap.in li:not(.is-flow){background-size:calc(100% - 28px) 1.5px;color:var(--muted);opacity:.55;transform:scale(.97)}
.swap li.is-flow{position:relative;transition:transform .5s var(--ease-out),box-shadow .5s}
html.mo .swap li.is-flow{transform:scale(.9);opacity:.6;transition:transform .6s var(--ease-out),opacity .4s,box-shadow .6s;transition-delay:1.25s}
html.mo .swap.in li.is-flow{transform:scale(1.06);opacity:1;box-shadow:0 0 0 6px rgba(49,85,245,.08),0 10px 30px -10px rgba(49,85,245,.55)}

/* ---------- títulos das seções ---------- */
.kicker{display:inline-block}
html.mo .sec-head .kicker{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
html.mo .sec-head.in .kicker{opacity:1;transform:none}
html.mo .sec-head > p{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease-out) .35s,transform .9s var(--ease-out) .35s}
html.mo .sec-head.in > p{opacity:1;transform:none}

/* ---------- cartões: luz que segue o mouse e leve elevação ---------- */
.pillars article,.aud article,.ai article,.others a,.steps4 article,.panel{--mx:50%;--my:50%}
.pillars article,.aud article,.ai article,.others a{position:relative;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s}
.pillars article::before,.aud article::before,.ai article::before,.others a::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(49,85,245,.55),rgba(112,87,255,.25) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.pillars article:hover,.aud article:hover,.ai article:hover,.others a:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(11,16,36,.35)}
.pillars article:hover::before,.aud article:hover::before,.ai article:hover::before,.others a:hover::before{opacity:1}
.pillars .ico,.all .ico,.others .ico{transition:transform .5s var(--ease-out)}
.pillars article:hover .ico{transform:scale(1.12) rotate(-8deg)}
.all > div:hover .ico{transform:translateY(-3px) rotate(8deg)}
.others a:hover .ico{transform:scale(1.1)}
.aud li{transition:transform .3s var(--ease-out)}
.aud article:hover li{transform:translateX(3px)}
.aud article:hover li:nth-child(2){transition-delay:40ms}.aud article:hover li:nth-child(3){transition-delay:80ms}

/* ícones dos pilares desenham uma batida ao entrar */
html.mo .pillars article.in .ico{animation:icopop .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + .25s)}
@keyframes icopop{0%{transform:scale(.4) rotate(-20deg);opacity:0}60%{transform:scale(1.15) rotate(6deg);opacity:1}100%{transform:none}}

/* ---------- abas de recursos: pílula que desliza e painel que troca com movimento ---------- */
.tabs{position:relative}
.tab{position:relative;z-index:1}
.tab-ind{position:absolute;left:0;top:0;height:42px;border-radius:999px;background:var(--ink);z-index:0;transition:transform .55s var(--ease-out),width .55s var(--ease-out);pointer-events:none}
.tabs.has-ind .tab[aria-selected=true]{background:transparent;border-color:transparent}
.tab svg{transition:transform .4s var(--ease-out)}
.tab:hover svg{transform:scale(1.15)}
.panel.is-enter > div:first-child{animation:panel-a .6s var(--ease-out) both}
.panel.is-enter > div:last-child{animation:panel-b .75s var(--ease-out) both}
.panel.is-enter .checks li{animation:panel-a .55s var(--ease-out) both}
.panel.is-enter .checks li:nth-child(1){animation-delay:.12s}.panel.is-enter .checks li:nth-child(2){animation-delay:.18s}
.panel.is-enter .checks li:nth-child(3){animation-delay:.24s}.panel.is-enter .checks li:nth-child(4){animation-delay:.3s}
@keyframes panel-a{from{opacity:0;transform:translateX(-18px)}}
@keyframes panel-b{from{opacity:0;transform:translateY(24px) scale(.97)}}

/* ---------- IA: a frase é digitada ---------- */
.say{position:relative}
.say .ty-ghost{visibility:hidden}
.say .ty{position:absolute;left:14px;top:10px;right:4px}
.say .ty.is-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--cobalt);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ai article .say{transition:transform .4s var(--ease-out)}
.ai article:hover .say{transform:translateY(-3px)}

/* ---------- comparação ---------- */
html.mo .cmp tbody tr{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
html.mo .cmp.in tbody tr{opacity:1;transform:none}
.cmp tbody tr{transition:background .25s}
.cmp tbody tr:hover{background:var(--mist)}

/* ---------- frase da origem: acende palavra por palavra com a rolagem ---------- */
.origin blockquote .wq{transition:color .35s}
html.mo .origin blockquote .wq{color:#B9C2D6}
html.mo .origin blockquote .wq.lit{color:var(--ink)}
html.mo .facts p{opacity:0;transform:translateX(16px);transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 120ms)}
html.mo .facts.in p{opacity:1;transform:none}

/* ---------- perguntas: abrem com altura animada ---------- */
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--cobalt)}
.faq summary::after{transition:transform .4s var(--ease-out)}
.faq details.is-anim{overflow:hidden}

/* ---------- final: brilho que respira e se move ---------- */
.final::before{animation:breathe 9s var(--ease-io) infinite alternate}
@keyframes breathe{from{transform:translateX(-62%) scale(.9);opacity:.75}to{transform:translateX(-38%) scale(1.12);opacity:1}}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--fx,50%) var(--fy,120%),rgba(100,216,255,.16),transparent 60%);pointer-events:none;transition:background .2s}
.final .wrap{z-index:1}

/* ---------- páginas de recursos ---------- */
html.mo .steps4 .n{transition:transform .6s var(--ease-out),background .3s}
html.mo .steps4 article.in .n{animation:icopop .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + .2s)}
.steps4 article{transition:border-color .4s}
.steps4 article:hover{border-top-color:var(--cobalt)}
html.mo .steps4 article{border-top-color:var(--line)}
html.mo .steps4 article.in{border-image:linear-gradient(90deg,var(--cobalt) var(--bar,0%),var(--line) var(--bar,0%)) 1 0 0 0;animation:bar .9s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms + .1s)}
@property --bar{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes bar{from{--bar:0%}to{--bar:100%}}

/* ---------- celular: menu abre com cascata ---------- */
@media (max-width:980px){
  .nav.is-open > *{animation:navin .45s var(--ease-out) both}
  .nav.is-open > *:nth-child(2){animation-delay:40ms}.nav.is-open > *:nth-child(3){animation-delay:80ms}
  .nav.is-open > *:nth-child(4){animation-delay:120ms}.nav.is-open > *:nth-child(5){animation-delay:160ms}
  @keyframes navin{from{opacity:0;transform:translateY(-8px)}}
  .tab-ind{display:none}
  .tabs.has-ind .tab[aria-selected=true]{background:var(--ink);border-color:var(--ink)}
}
@media (max-width:760px){
  .aurora{height:620px}
  .aurora i{filter:blur(50px)}
  html.mo .demo,html.mo .win{transform:perspective(1200px) rotateX(calc(var(--tilt,1) * 10deg)) translateY(calc(var(--tilt,1) * 24px))}
}
@media (hover:none){
  .pillars article:hover,.aud article:hover,.ai article:hover,.others a:hover{transform:none;box-shadow:none}
}

/* ---------- quem pede menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .aurora,.top-progress{display:none}
  .sparkle,.final::before{animation:none}
  .top.is-away{transform:none}
  .btn-main::after,.btn-white::after{display:none}
  .panel.is-enter > div,.panel.is-enter .checks li{animation:none}
  .pillars article:hover,.aud article:hover,.ai article:hover,.others a:hover{transform:none}
}
.tabs.has-ind .tab{transition:color .25s .12s,border-color .25s,background var(--t-ctl)}
.tabs.has-ind .tab[aria-selected=true]{color:#fff}
/* texto em degradê: área de pintura maior para não cortar g, ç, j e p */
.sw-w{padding-bottom:.24em;margin-bottom:-.2em}
.flowword{padding-bottom:.14em;margin-bottom:-.14em;display:inline-block}
.sw-line{bottom:-.2em}