/* Cena "2030 — O futuro que podemos assistir".

   Vem logo abaixo da timeline e fecha a página com o mesmo mecanismo das
   outras cenas dirigidas por scroll: palco presa por `position: sticky` e
   progresso calculado de `-rect.top / (offsetHeight - innerHeight)`. Não há
   `ScrollTrigger.pin` aqui, como em nenhum outro ponto do projeto.

   Estado base = sem JavaScript: os parágrafos ficam empilhados e legíveis
   sobre o preto, o vídeo não aparece e a seção tem altura natural. É a classe
   `.is-live`, posta pelo futuro-2030.js, que troca isso pelo palco preso e
   pela leitura frase a frase. Movimento reduzido nunca recebe `.is-live`. */

.futuro {
  /* --futuro-turnos é reescrito pelo JS: uma frase por turno mais o turno do
     apagamento final. Este valor só vale enquanto o script não roda. */
  --futuro-turnos: 14;
  --futuro-passo: 52svh;   /* rolagem gasta por turno */
  --futuro-saida: 0;       /* 0 = cena acesa, 1 = cena preta */
  position: relative;
  z-index: 2;
  color: var(--calone-white);
  background: var(--calone-black);
  isolation: isolate;
}

/* O percurso é uma tela presa mais um passo por turno. */
.futuro.is-live {
  height: calc(100svh + var(--futuro-turnos) * var(--futuro-passo));
}

.futuro__palco {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(88px, 12vh, 140px) clamp(22px, 7vw, 100px);
  overflow: hidden;
}

.futuro.is-live .futuro__palco {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 540px;
}

/* Cortina do fim: cobre vídeo, véu e texto de uma vez só, para o palco chegar
   preto na hora em que se solta e sobe. É a metade que faltava da emenda com
   o rodapé, que nasce em #000 sólido. Fica por cima de tudo (z-index acima
   das frases) e nunca intercepta clique. */
.futuro.is-live .futuro__palco::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--calone-black);
  opacity: var(--futuro-saida);
  pointer-events: none;
}

/* ---------- fundo ---------- */
.futuro__video,
.futuro__veu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Fora do modo `.is-live` o vídeo não tem função: é buscado quadro a quadro
   pelo scroll, e sem o palco preso não há scroll para buscar. */
.futuro__video {
  display: none;
}

.futuro.is-live .futuro__video {
  z-index: 0;
  display: block;
  object-fit: cover;
  /* Direção de arte em P&B alto contraste, como o resto da mídia de fundo.
     Entra esmaecido e assenta quando o arquivo dá o primeiro quadro, senão a
     troca do preto para a imagem aparece como um estalo. */
  opacity: 0;
  /* Medido no arquivo cru, sem véu nem filtro: o pixel mais claro do vídeo
     inteiro chega a 120 de 255 e a mediana fica entre 0 e 5 — é um lançamento
     noturno, não um material que precise ser escurecido. Daí o brilho acima
     de 1: sem ele o rastro não aparece. O contraste fica quase neutro para
     não devolver ao preto o pouco de meio-tom que existe. */
  filter: saturate(.45) contrast(1.06) brightness(1.55);
  transition: opacity var(--motion-cinematic) var(--ease-calone);
}

.futuro.is-live.is-video-pronto .futuro__video {
  opacity: 1;
}

/* Véu ao contrário do usual: escuro no centro, claro nas bordas. Neste
   material o rastro se abre embaixo e pelos lados, e o miolo é quase preto —
   escurecer as bordas apagava justamente a única coisa visível. A elipse
   protege a faixa onde o texto assenta; o degradê vertical é só o guarda-
   -chuva do cabeçalho no topo e um assentamento no rodapé. */
.futuro__veu {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 46% at 50% 44%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, .35));
}

/* ---------- frases ---------- */
.futuro__frases {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1120px, 100%);
  gap: clamp(30px, 5.5vh, 64px);
  text-align: center;
}

/* Presas, todas ocupam a mesma célula: quem manda na visibilidade é o JS. */
.futuro.is-live .futuro__frases {
  gap: 0;
  align-items: center;
}

.futuro__frase {
  margin: 0;
  color: var(--calone-white);
  font-size: clamp(1.3rem, 2.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.futuro.is-live .futuro__frase {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform, filter;
}

/* Evita o piscar do primeiro quadro: até o laço rodar pela primeira vez, a
   frase de abertura já está no lugar certo. */
.futuro.is-live .futuro__frase:first-child {
  opacity: 1;
  visibility: visible;
}

/* Os três marcos que a copy entrega em caixa alta. A caixa vem do CSS e não
   do texto, para o conteúdo chegar em caixa normal a leitores de tela. */
.futuro__frase--marco {
  font-size: clamp(1.45rem, 3.2vw, 3.2rem);
  line-height: 1.1;
  /* caixa alta pede entreletra positiva; o -.03em da base fecha demais */
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* "Talvez seja humana." é a virada do texto e tem meia dúzia de palavras:
   ocupa a tela sozinha, no maior corpo da cena. */
.futuro__frase--forte {
  font-size: clamp(2rem, 5.4vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.futuro__frase .font-display {
  font-weight: 400;
  letter-spacing: -.015em;
}

.futuro__frase--marco .font-display {
  letter-spacing: .02em;
}

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

  .futuro.is-live .futuro__palco {
    min-height: 500px;
  }

  .futuro__frase {
    font-size: clamp(1.15rem, 5vw, 1.9rem);
    line-height: 1.2;
  }

  .futuro__frase--marco {
    font-size: clamp(1.3rem, 6.2vw, 2.2rem);
  }

  .futuro__frase--forte {
    font-size: clamp(1.9rem, 9.5vw, 3rem);
  }
}

/* Telas baixas (paisagem no telefone): o corpo passa a seguir a altura, senão
   os parágrafos longos não cabem na tela presa. */
@media (max-height: 620px) {
  .futuro.is-live .futuro__palco {
    padding-block: 72px 28px;
  }

  .futuro__frase {
    font-size: clamp(.95rem, 3.1vh, 1.4rem);
  }

  .futuro__frase--marco {
    font-size: clamp(1rem, 3.6vh, 1.6rem);
  }

  .futuro__frase--forte {
    font-size: clamp(1.4rem, 5.4vh, 2.2rem);
  }
}

/* Sem `.is-live` o JS já entrega a lista empilhada; isto só garante que nada
   fique preso a estado inline caso a preferência mude com a página aberta. */
@media (prefers-reduced-motion: reduce) {
  .futuro__frase {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    will-change: auto;
  }
}