/* ---------- manifesto ----------
   Cartão que sobe por cima do hero, com o tema invertido.
   Efeito: gem "Scroll Text Reveal" da BYQ. O palco fica preso na tela enquanto a pista
   (300vh) rola, e cada palavra sobe de trás de uma máscara conforme a rolagem. */
/* a posição, as cores e a forma de cartão vêm de .scene (scenes.css) */

/* pista de rolagem: a altura define quanto tempo a revelação dura */
.manifesto__runway {
  position: relative;
  height: var(--manifesto-pista);
}

/* palco: preso na tela durante a pista */
.manifesto__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  /* texto alinhado à esquerda, na mesma linha vertical do menu do hero */
  padding: var(--header-altura) var(--gutter) var(--space-6) calc(var(--margem-conteudo) - var(--card-inset));
  text-align: left;
}

.manifesto__title {
  max-width: 17ch;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-display);
  font-weight: var(--peso-titulo);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}
.manifesto__text {
  max-width: 34rem;
  text-wrap: pretty;
  font-size: var(--fs-corpo-g);
  line-height: var(--lh-corpo);
  color: var(--cena-apoio);
}

/* máscara de cada palavra. O padding de baixo evita cortar as descendentes */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
}
.reveal-word__inner {
  display: inline-block;
  will-change: transform;
}
/* com JS, o texto só aparece depois de dividido em palavras, para não piscar inteiro */
.js [data-reveal]:not(.is-split) { visibility: hidden; }

/* ---------- movimento reduzido: texto parado e sem pista longa ---------- */
@media (prefers-reduced-motion: reduce) {
  .manifesto__runway { height: auto; }
  .manifesto__stage { position: static; }
  .js [data-reveal]:not(.is-split) { visibility: visible; }
}