/* Movimento (exemplo): elementos surgem suavemente ao rolar a página.
   Só age quando o JavaScript liga a classe .mv no <html>; sem JS, tudo aparece normal. */
.mv .mv-up,.mv .mv-left,.mv .mv-right,.mv .mv-fade{opacity:0;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.mv .mv-up{transform:translateY(24px)}
.mv .mv-left{transform:translateX(-48px)}
.mv .mv-right{transform:translateX(48px)}
.mv .mv-in{opacity:1!important;transform:none!important}
/* primeira tela: texto entra em sequência e a fachada sobe logo ao abrir */
.mv .hero .eyebrow,.mv .hero h1,.mv .hero .lead,.mv .hero .btn-row{animation:mvUp .6s cubic-bezier(.2,.7,.2,1) both}
.mv .hero h1{animation-delay:.07s}.mv .hero .lead{animation-delay:.14s}.mv .hero .btn-row{animation-delay:.2s}
.mv .hero-img img{animation:mvRise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes mvUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes mvRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* fotos "parecendo vídeo": aproximação lenta e contínua, como câmera em movimento (efeito Ken Burns).
   Roda só quando a foto está na tela. As fachadas da primeira tela não entram, para nunca cortar a torre. */
.prow figure{overflow:visible}
/* moldura própria da foto: o movimento fica dentro dela e nunca passa por cima da legenda */
.mv-clip{overflow:hidden;display:block;line-height:0}
.mv-clip img{display:block;width:100%}
.mv .mv-kb img{animation:mvKb 22s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:50% 50%}
.mv .mv-kb:nth-child(2n) img{animation-name:mvKb2;animation-duration:25s}
.mv .mv-kb:nth-child(3n) img{animation-name:mvKb3;animation-duration:23s}

.mv .mv-kb.mv-play img{animation-play-state:running}
@keyframes mvKb{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-.6%)}}
@keyframes mvKb2{from{transform:scale(1.06) translate(1%,0)}to{transform:scale(1)}}
@keyframes mvKb3{from{transform:scale(1)}to{transform:scale(1.05) translate(.6%,.8%)}}
/* botões: brilho que atravessa ao passar o mouse */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s ease}
@media(hover:hover){.btn:hover::after{left:120%}}
/* quem pediu menos movimento no aparelho não vê animação */
@media(prefers-reduced-motion:reduce){.mv .mv-up,.mv .mv-left,.mv .mv-right,.mv .mv-fade{opacity:1;transform:none;transition:none}.mv .hero *,.mv .mv-kb img{animation:none!important}}