/* ============ motion-kit v1 · Prosperare · 06/11/2026 ============
   Motion de LP em CSS/JS puro (sem React, sem framer-motion). Colar inteiro no <style> da LP.
   Par com motion-kit.js. Catálogo de quando usar cada efeito: ../../motion_biblioteca_lp.md
   Regra de propriedade (evita um efeito apagar o outro):
     entrada (.rv, .fx...) = translate / opacity / filter · rolagem (JS) = transform · hover = scale ou transform
     (nunca hover com translate em elemento .rv; nunca hover com transform em [data-par]/[data-lift])
   Sem JS ou com prefers-reduced-motion: tudo aparece no estado final. */
:root{
  --mk-expo:cubic-bezier(.16,1,.3,1); --mk-mola:cubic-bezier(.3,1.4,.5,1); --mk-inout:cubic-bezier(.65,0,.35,1);
  --mk-marca:#F3D2A8; --mk-traco:#2F5A5E;
}
.mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 1. entrada: sobe e aparece (blur só no desktop, e sai de vez no fim) */
.js .rv{opacity:0;translate:0 22px;transition:opacity .8s var(--mk-expo),translate .9s var(--mk-expo),filter .8s var(--mk-expo)}
@media (min-width:900px){.js .rv{filter:blur(6px)}}
.js .rv.in{opacity:1;translate:0 0;filter:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}

/* 2. título palavra por palavra, cada uma sobe de dentro da própria linha (Text Effect / Vertical Cut Reveal) */
.fx-ok .m{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .16em;margin:-.08em -.06em -.16em}
.fx-ok .mi{display:inline-block;translate:0 115%;rotate:5deg;transform-origin:0 100%;transition:translate 1s var(--mk-expo),rotate 1s var(--mk-expo);transition-delay:calc(var(--i) * var(--mk-passo,26ms) + var(--d,0ms))}
.fx-ok.in .mi{translate:0 0;rotate:0deg}

/* 3. marca-texto que passa por trás da frase (Text Highlighter, Fancy Components) */
.marca{background-image:linear-gradient(var(--mk-marca),var(--mk-marca));background-repeat:no-repeat;background-position:0 86%;background-size:100% .38em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.js .marca{background-size:0% .38em;transition:background-size 1.2s var(--mk-expo) .35s}
.js .marca.in,.js .in .marca{background-size:100% .38em}

/* 4. parágrafo que acende palavra a palavra com a rolagem (Scroll word reveal, motion.dev) */
[data-leitura] .lw{opacity:var(--mk-apagado,.22);transition:opacity .4s var(--mk-expo)}
[data-leitura] .lw.on{opacity:1}

/* 5. contorno de arco que se desenha (svg com <path pathLength="1">; o JS mede o tamanho real) */
.contorno{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.contorno path{fill:none;stroke:var(--mk-traco);stroke-width:1.3;stroke-linecap:round}
.js .contorno path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--mk-inout) .45s}
.js .in .contorno path,.js .in.contorno path{stroke-dashoffset:0}

/* 6. foto que levanta em direção à câmera (o JS só escreve --p; sem JS fica no lugar) */
[data-lift]{transform:translateY(calc((1 - var(--p,1)) * 70px)) scale(calc(.9 + var(--p,1) * .1))}
[data-lift] img{transform:scale(calc(1.14 - var(--p,1) * .14))}

/* 7. linha que cresce entre os passos (Timeline com feixe, Aceternity) */
[data-trilha]{position:relative}
[data-trilha] .trilha{position:absolute;left:0;top:0;width:0;height:2px;background:rgba(0,0,0,.12);border-radius:2px}
[data-trilha] .trilha i{position:absolute;inset:0;border-radius:inherit;background:var(--mk-traco);transform-origin:0 50%;scale:var(--p,1) 1}
[data-trilha] .trilha.vertical i{transform-origin:50% 0;scale:1 var(--p,1)}
[data-trilha] .no{transition:background .4s var(--mk-expo),color .4s var(--mk-expo),scale .5s var(--mk-mola)}

/* 8. forma que inunda a seção (prompt-motion "shape floods the screen"). Nativo onde existe scroll-timeline */
[data-inunda]{clip-path:circle(calc(15% + var(--p,1) * 125%) at 50% 0)}
@supports (animation-timeline:view()){
  [data-inunda]{animation:mk-inunda linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  @keyframes mk-inunda{from{clip-path:circle(15% at 50% 0)}to{clip-path:circle(140% at 50% 0)}}
  [data-inunda].mk-js{animation:none}
}
/* a seção da forma usa overflow:clip, nunca hidden (hidden vira container de rolagem e mata o view()); o JS detecta e assume */

/* 9. faixa infinita (Marquee / Infinite Slider): anda por CSS, o JS só acelera com a rolagem */
[data-faixa]{display:flex;width:max-content;align-items:center;animation:mk-corre var(--mk-faixa-vel,60s) linear infinite}
@keyframes mk-corre{to{transform:translate3d(-50%,0,0)}}
.mk-faixa-caixa{overflow:hidden}

/* 10. depoimentos andando em fila, pausa no dedo/mouse (Testimonials Marquee / Infinite Moving Cards) */
.mk-fila{overflow:hidden;min-width:0;max-width:100%;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mk-fila-trilho{display:flex;gap:var(--mk-fila-gap,16px);padding-right:var(--mk-fila-gap,16px);width:max-content;animation:mk-anda var(--mk-fila-vel,70s) linear infinite}
.mk-fila.volta .mk-fila-trilho{animation-direction:reverse}
.mk-fila:hover .mk-fila-trilho,.mk-fila:focus-within .mk-fila-trilho,.mk-fila.parada .mk-fila-trilho{animation-play-state:paused}
@keyframes mk-anda{to{translate:-50% 0}}

/* 11. cartões que empilham com a rolagem (Stacking Cards, Fancy Components) */
[data-pilha]{display:grid;gap:var(--mk-pilha-gap,22px)}
[data-pilha]>*{position:sticky;top:calc(var(--mk-topo,72px) + var(--i,0) * var(--mk-degrau,14px));transform-origin:50% 0;scale:var(--s,1)}
/* atenção: nenhum ancestral pode ter overflow:hidden (sticky morre). Use overflow-x:clip. */

/* 12. mídia que abre até a tela cheia com a rolagem (Scroll media expansion hero) */
.motion [data-expande]{height:var(--mk-expande-h,220vh)}
[data-expande] .mk-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
[data-expande] .mk-midia{position:absolute;inset:0;
  clip-path:inset(calc((1 - var(--p,1)) * var(--mk-y,22%)) calc((1 - var(--p,1)) * var(--mk-x,18%)) round calc((1 - var(--p,1)) * 32px))}
[data-expande] [data-abre]{transform:translateX(calc(var(--p,0) * var(--abre,0) * 1px))}

/* 13. holofote que segue o mouse no cartão (Spotlight Card). Só desktop, só fundo escuro */
.mk-holofote{position:relative;isolation:isolate}
.mk-holofote::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--mk-expo);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--mk-luz,rgba(255,255,255,.09)),transparent 65%)}
@media (hover:hover){.mk-holofote:hover::before{opacity:1}}

/* ============ menos movimento: estado final, sem nada andando ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .vem *{opacity:1!important;translate:none!important;scale:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .js .marca{background-size:100% .38em;transition:none}
  .js .contorno path{stroke-dashoffset:0!important;transition:none!important}
  [data-leitura] .lw{opacity:1}
  [data-faixa],.mk-fila-trilho{animation:none!important}
  .mk-fila{-webkit-mask:none;mask:none}.mk-fila-trilho{flex-wrap:wrap;width:auto}
  [data-inunda]{animation:none!important;clip-path:none!important}
  [data-pilha]>*{position:relative;top:auto;scale:none}
  [data-expande]{height:auto!important}[data-expande] .mk-palco{position:relative;height:auto;min-height:70vh}[data-expande] .mk-midia{clip-path:none}
}