/* Cena "Legado" — a continuação da missão, entre a seção Sobre e a linha do
   tempo.

   Mesma mecânica da cena 2030 (futuro-2030): palco preso por `position:
   sticky`, progresso tirado do scroll, uma frase por vez. O que muda é a
   entrada — aqui as palavras chegam uma a uma, porque as frases são curtas e
   o efeito tem tempo de ser lido.

   Fundo quase preto: a seção Sobre é papel claro e a linha do tempo logo
   abaixo é #080808. Esta cena faz a passagem entre as duas em vez de deixar
   um corte seco.

   Estado base = sem JavaScript: as frases ficam empilhadas e legíveis. É a
   classe `.is-live` que liga o palco preso. */

.legado {
  --legado-passo: 78svh;      /* rolagem gasta por frase */
  --legado-final: 140svh;     /* o ato final: o planeta centraliza e aproxima */
  --legado-n: 6;              /* o JS reescreve a partir do DOM */
  position: relative;
  z-index: 1;
  background: var(--calone-ink);
  color: var(--calone-white);
}

/* Percurso = uma tela + um turno por frase + o ato final. Os dois módulos da
   cena calculam onde o ato final começa a partir destes mesmos valores, então
   mudar `--legado-final` aqui reajusta texto e planeta de uma vez. */
.legado.is-live {
  height: calc(100svh + var(--legado-passo) * var(--legado-n) + var(--legado-final));
}

.legado__palco {
  padding-block: clamp(90px, 14vh, 160px);
}

.legado.is-live .legado__palco {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
  padding-block: 0;
  overflow: hidden;
}

/* ---------- a Terra ---------- */
/* Camada de fundo do palco. Fica atrás das frases e não recebe ponteiro: a
   cena é dirigida pela rolagem, não por gesto. */
.legado__terra {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-calone, ease);
}

.legado__terra.is-pronta {
  opacity: 1;
}

.legado__terra canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* As frases sobem para cima do planeta: o canvas é irmão anterior e ficaria
   embaixo de qualquer jeito, mas o z-index explícito evita surpresa se algum
   dia elas ganharem transform e criarem contexto próprio. */
.legado__frases {
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: clamp(22px, 6vw, 80px);
}

.legado.is-live .legado__frases {
  display: grid;
}

/* Empilhadas na mesma célula: uma sai, a outra entra no mesmo lugar.

   Sem `opacity: 0` aqui: quem controla a opacidade são as palavras, uma a
   uma, e o JS só liga e desliga a `visibility` da frase. Com a frase zerada
   no CSS ela nunca voltava — as palavras acendiam dentro de um bloco
   invisível e a cena inteira ficava preta. */
.legado.is-live .legado__frase {
  grid-area: 1 / 1;
  visibility: hidden;
}

.legado__frase {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 6.4vw, 5.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.036em;    /* display grande: entreletra negativa */
  text-wrap: balance;
}

.legado__frase + .legado__frase {
  margin-top: clamp(28px, 5vh, 64px);
}

.legado.is-live .legado__frase + .legado__frase {
  margin-top: 0;
}

.legado__frase .font-display {
  font-weight: 400;
  letter-spacing: -.02em;
}

/* A última é o desfecho: maior, centrada, e sem a medida estreita das
   outras — é a frase que fecha a missão. */
.legado__frase--final {
  max-width: none;
  font-size: clamp(2.4rem, 8.2vw, 7.2rem);
}

.legado.is-live .legado__frase--final {
  text-align: center;
  justify-self: center;
}

/* Cada palavra é um bloco próprio para poder entrar sozinha. O `will-change`
   fica só nelas, e não na frase inteira, para não promover camadas à toa. */
.legado__palavra {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity, filter;
}

@media (max-width: 767px) {
  .legado {
    --legado-passo: 62svh;
  }

  .legado__frase {
    max-width: 16ch;
    font-size: clamp(1.7rem, 9.5vw, 2.8rem);
  }

  .legado__frase--final {
    font-size: clamp(2rem, 12vw, 3.4rem);
  }
}

/* Movimento reduzido: sem palco preso e sem entrada — as seis frases ficam
   empilhadas, no fluxo, que é o mesmo conteúdo em repouso. */
@media (prefers-reduced-motion: reduce) {
  /* O JS nem chega a pedir o three.js aqui; a regra é a outra metade disso. */
  .legado__terra {
    display: none;
  }

  .legado.is-live {
    height: auto;
  }

  .legado.is-live .legado__palco {
    position: relative;
    height: auto;
    padding-block: clamp(90px, 14vh, 160px);
    overflow: visible;
    place-items: start;
  }

  .legado.is-live .legado__frases {
    display: block;
  }

  .legado.is-live .legado__frase {
    visibility: visible;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .legado.is-live .legado__frase + .legado__frase {
    margin-top: clamp(28px, 5vh, 64px);
  }

  .legado.is-live .legado__frase--final {
    text-align: left;
    justify-self: start;
  }
}