/* CAPA DA HOME: menu no topo que dá a volta e fica na base da tela + faixa de clientes + letreiro; depois o hero, com as fotos trocando por tempo */
.nav.capa-nav { position: fixed; left: 0; right: 0; will-change: transform; }
.nav.capa-nav--topo { top: 0; }
/* a segunda cópia espera fora da tela; o capa-teste.js traz ela conforme a de cima sai */
.nav.capa-nav--baixo { top: auto; bottom: 0; transform: translate3d(0, 100%, 0); box-shadow: 0 -1px 0 rgba(0, 0, 0, .1); }
.capa-pagina { padding-bottom: var(--nav-h); }   /* o menu na base não cobre o fim do rodapé */
.wa-float { transition: opacity .3s, transform .3s, visibility .3s, bottom .3s; }
.wa-float.capa-wa-sobe { bottom: calc(var(--pad) + var(--nav-h)); }   /* fica acima do menu */

.capa { position: relative; padding-top: var(--nav-h); background: var(--paper); }
.capa-faixa { background: var(--red); padding: 20px 0; font-size: var(--fs-ui); }

.capa-letreiro { padding: var(--stmt-top) var(--pad); }
.capa-letreiro .linha { overflow: hidden; }
.capa-letreiro .linha__in { display: block; transform: translate3d(0, 105%, 0); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.capa-letreiro .linha.in .linha__in { transform: none; }
/* o símbolo é a última linha do letreiro: mesma altura das letras, e a seção acaba logo depois dele */
.capa-letreiro .linha--mark .linha__in { display: flex; align-items: center; height: 1.14em; }
.capa-letreiro .statement__lines .mark { width: .72em; height: .72em; margin: 0; }

/* linha ao lado do letreiro, do topo do texto até o fim da tela: um traço vermelho desce sem parar, indicando que a página continua */
.capa-letreiro { position: relative; }
.capa-linha {
  position: absolute; right: 116px; top: var(--stmt-top);
  width: 2px; height: var(--linha-h, 70vh); overflow: hidden;
  background: rgba(11, 11, 11, .24);
  transform-origin: 50% 0; animation: capa-linha-entra 1.2s .3s cubic-bezier(.16, 1, .3, 1) both;
}
.capa-linha::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 38%;
  background: var(--red);
  animation: capa-linha-desce 2.2s 1.2s cubic-bezier(.65, 0, .35, 1) infinite both;
}
@keyframes capa-linha-entra { from { transform: scaleY(0); } }
@keyframes capa-linha-desce { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 265%, 0); } }

.capa-hero { position: relative; height: calc(100vh - var(--nav-h)); overflow: hidden; background: #0b1230; }   /* cabe certinho acima do menu da base */
.capa-hero__fotos { position: absolute; inset: 0; will-change: transform; }
.capa-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .75s ease; }
.capa-hero__foto.on { opacity: 1; }
.capa-hero__veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(5,7,15,.22), rgba(5,7,15,.32)); }
.capa-hero__logo {   /* mesma posição do .hero__logo */
  position: absolute; left: 50%; top: 50%;
  width: 106%; aspect-ratio: 1672 / 941;
  transform: translate(-50.24%, -53.45%);
  background: #fff;
  -webkit-mask: url(logo.png) center / 100% 100% no-repeat;
  mask: url(logo.png) center / 100% 100% no-repeat;
}

/* sem as frases e a faixa no meio da página, o blog é que sobe cobrindo os projetos */
.capa-pagina .home-blog { margin-top: var(--cover-delay); }

@media (max-width: 767px) {
  .capa-faixa { padding: 16px 0; }
  /* no celular o menu fica fixo no topo e o letreiro empilha pra encher a tela */
  .capa-letreiro .linha--mark .linha__in { height: 1.08em; }
  .capa-letreiro .statement__lines { font-size: 15vw; line-height: 1.08; }
  .capa-letreiro .parte { display: block; }
  /* as duas palavras mais compridas: menores, pra caber inteiras na largura */
  .capa-letreiro .linha--media { font-size: 13vw; }
  .capa-letreiro .linha--longa { font-size: 11.4vw; }
  /* sem espaço ao lado do texto; o próprio hero já aparece no fim da primeira tela indicando que continua */
  .capa-linha { display: none; }
  .capa-hero { height: auto; aspect-ratio: 16 / 9; }   /* como o hero do celular na home de hoje */
}

@media (prefers-reduced-motion: reduce) {
  .capa-letreiro .linha__in { transform: none; transition: none; }
  .capa-linha, .capa-linha::after { animation: none; }
  .capa-linha::after { display: none; }
  .capa-hero__foto { transition: none; }
}