/* 14/11 (noite) · sistema de movimento.
   Antes tudo era opacidade amarrada ao scroll. Aqui as entradas têm tempo
   próprio: os títulos sobem por trás de uma máscara, palavra a palavra, com
   uma curva que arranca rápido e pousa devagar; as coisas entram em escada.
   motion.js parte os títulos em palavras e liga a classe .in quando entram
   na tela. Sem JS ou com movimento reduzido, nada disso se aplica. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); }

html.mo [data-rise] .mw { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .09em .2em; margin: -.08em -.09em -.2em; }
html.mo [data-rise] .mw > i { display: inline-block; font-style: inherit; transform: translateY(140%) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--ln, 0) * 95ms + var(--wi, 0) * 14ms + var(--rd, 0ms)); will-change: transform; }
html.mo [data-rise].in .mw > i, html.mo .on > [data-rise] .mw > i, html.mo .on [data-rise] .mw > i { transform: none; }
/* saída (frases que se revezam): descem rápido, sem escada */
html.mo [data-rise].out .mw > i { transition-duration: .5s; transition-timing-function: var(--ease-io); transition-delay: 0ms; }

/* coisas que entram em escada depois do título */
html.mo [data-fade] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1.1s var(--ease-out); transition-delay: var(--rd, 0ms); }
html.mo [data-fade].in, html.mo .in > [data-fade], html.mo .on [data-fade] { opacity: 1; transform: none; }

/* ── abertura: a cena assenta, o título sobe, o botão chega por último ── */
html.mo .hero-lua .hp-scene { opacity: 0; transition: opacity 1.6s ease .1s; }
html.mo .hero-lua .hp-moon { transform: scale(1.14); transition: transform 3.2s var(--ease-out) .1s; }
html.mo.mo-go .hero-lua .hp-scene { opacity: 1; }
html.mo.mo-go .hero-lua .hp-moon { transform: scale(1); }
html.mo .hero-lua .hp-sky { opacity: 0; transition: opacity 2.4s ease 1.8s; }
html.mo.mo-go .hero-lua .hp-sky { opacity: 1; }
html.mo .hero-lua .hp-side, html.mo .hero-lua .hp-hint { opacity: 0; transform: translateY(18px); transition: opacity .9s ease 1.15s, transform 1.1s var(--ease-out) 1.15s; }
html.mo .hero-lua .hp-hint { transition-delay: 1.9s; transform: none; }
html.mo.mo-go .hero-lua .hp-side { opacity: 1; transform: none; } html.mo.mo-go .hero-lua .hp-hint { opacity: .5; }
/* e sai com paralaxe leve quando a página sobe */
html.mo.scrolly .hero-lua .hp-scene { translate: 0 calc(var(--hp, 0) * 9svh); }
html.mo.scrolly .hero.hero-lua .hp-txt { transform: translateY(calc(var(--hp, 0) * -14svh)); opacity: calc(1 - var(--hp, 0) * 1.6); }

/* ── clientes: as logos chegam uma a uma, no tempo delas ── */
html.mo.scrolly .clients-row li { opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .8s ease, transform 1.1s var(--ease-out); transition-delay: calc(var(--k, 0) * 80ms + 250ms); }
html.mo.scrolly .clients.in .clients-row li { opacity: 1; transform: none; }

/* ── agência: as frases se revezam subindo por trás da máscara ── */
html.mo.scrolly .meet .lines li { opacity: 1; transform: translateY(-50%); pointer-events: none; }
html.mo.scrolly .meet .lines li .px { opacity: 0; transition: opacity .5s ease; }
html.mo.scrolly .meet .lines li.on .px { opacity: .55; transition-delay: .3s; }
html.mo.scrolly .meet .lines li:not(.on) [data-rise] .mw > i { transition-duration: .5s; transition-timing-function: var(--ease-io); transition-delay: 0ms; }
/* quem já passou sai por cima; quem ainda vem espera embaixo */
html.mo.scrolly .meet .lines li.past [data-rise] .mw > i { transform: translateY(-140%) rotate(-3deg); }
html.mo.scrolly .meet .lines li.on [data-rise] .mw > i { transition-duration: .85s; transition-delay: calc(.14s + var(--ln, 0) * 70ms + var(--wi, 0) * 10ms); }
html.mo.scrolly .meet-head { opacity: 1; transform: none; }
html.mo.scrolly .meet-head > p { opacity: 0; transition: opacity .8s ease .5s; }
html.mo.scrolly .meet-head.in > p { opacity: .78; }
html.mo.scrolly .meet-head.gone [data-rise] .mw > i { transform: translateY(-140%); transition-duration: .55s; transition-timing-function: var(--ease-io); transition-delay: 0ms; }
html.mo.scrolly .meet-head.gone > p { opacity: 0; transition-delay: 0s; }
@media (max-width: 760px) { html.mo.scrolly .meet .lines li { transform: translateY(-50%); } }
html.mo.scrolly .meet { height: 380svh; }
/* o rodapé ficava atrás da tela de poeira (que é fixa e tem fundo): a página acabava num vazio */
.foot { position: relative; z-index: 2; }
html.mo .foot-claim .mw > i { transition-duration: 1.2s; }