/* Movimento comum das páginas da MIP. Tudo começa visível; o JS só esconde o que está abaixo da dobra e revela ao rolar. */

/* revelar ao rolar */
.mv-pre{opacity:0;transform:translateY(28px)}
.mv-in{animation:mvRise .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--mv-d,0s)}
@keyframes mvRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* títulos de abertura sobem linha por linha */
.mv-line{animation:mvLine .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--mv-d,0s)}
@keyframes mvLine{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}

/* o riscado se desenha */
.mv-strike{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-decoration:none!important;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 58%;background-size:0% .07em;transition:background-size .9s cubic-bezier(.6,0,.2,1) .25s}
.mv-strike.mv-on{background-size:100% .07em}

/* logo: o pingo do i respira como sinal de ao vivo */
.logo .i::after{animation:mvLive 2.8s ease-in-out infinite}
@keyframes mvLive{0%,100%{transform:scale(1)}50%{transform:scale(.78);opacity:.7}}

/* botões */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-main::after,.btn-dark::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn-main:hover::after,.btn-dark:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}

/* cartões e linhas reagem ao mouse */
.card,.cap,.person,.side-card,.steps .step,.place,.trait,.qa,.how-row,.letter,.kpi{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .25s,border-color .25s}
.card:hover,.person:hover,.side-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(14,14,15,.35)}
.cap:hover,.steps .step:hover,.letter:hover{transform:translateY(-4px)}
.place:hover{transform:translateX(6px)}
.place .stamp{transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.place:hover .stamp{transform:rotate(-8deg) scale(1.08)}
.trait h3 svg{transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.trait:hover h3 svg{transform:scale(1.25) rotate(-10deg)}
.qa:hover h3,.how-row:hover h3{color:var(--orange-text)}
.qa h3,.how-row h3{transition:color .2s}
.kpi:hover{transform:translateY(-3px);border-color:var(--orange)}
.card .demo{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover .demo{transform:scale(1.02)}
.card li,.path li,.person li{transition:background .2s,color .2s,border-color .2s}
.card li:hover,.person li:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* cartão final: o brilho laranja passeia devagar */
.final{background-size:220% 220%!important;animation:mvGlow 12s ease-in-out infinite alternate}
@keyframes mvGlow{from{background-position:0% 0%}to{background-position:100% 100%}}

/* painel de exemplo flutua de leve */
.frame{animation:mvFloat 7s ease-in-out infinite}
@keyframes mvFloat{50%{transform:translateY(-6px)}}

/* barra de progresso de leitura */
.mv-progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:3px;width:100%;background:var(--orange);transform-origin:0 50%;transform:scaleX(0);z-index:30;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .mv-pre{opacity:1;transform:none}
  .mv-strike{background-size:100% .07em}
  .mv-progress{display:none}
}