/* ==========================================================================
   FB VIAGENS — Palco do globo
   O globo é uma única instância de WebGL, fixa na base da página. Todas as
   seções rolam por cima dele. Isso evita recriar contexto de GPU a cada
   seção e faz o planeta atravessar a narrativa em vez de aparecer e sumir.
   ========================================================================== */

.globo {
  position: fixed;
  inset: 0;
  z-index: var(--z-globe);
  background: var(--ink);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.1s var(--ease-out);
  overflow: hidden;
}

/* Enquanto o globo não assume a cena, ele não deve custar quadro de GPU. */
.globo[data-cena="oculto"] {
  opacity: 0;
}

.globo__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Véus de legibilidade: garantem contraste do texto sobre qualquer
   enquadramento do planeta. Sem eles, o herói depende de sorte. */
.globo__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 31, 39, 0.94) 0%,
    rgba(11, 31, 39, 0.76) 32%,
    rgba(11, 31, 39, 0.2) 58%,
    rgba(11, 31, 39, 0) 74%
  );
}

.globo__veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 31, 39, 0.7) 0%,
    rgba(11, 31, 39, 0) 26%,
    rgba(11, 31, 39, 0) 58%,
    rgba(11, 31, 39, 0.9) 100%
  );
}

/* Imagem de reserva: assume a cena quando WebGL não está disponível. */
.globo__reserva {
  position: absolute;
  inset: 0;
  background-image: url("../img/earth/earth_day_2048.jpg");
  background-size: cover;
  background-position: 72% 50%;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}

.globo[data-modo="reserva"] .globo__canvas {
  display: none;
}

.globo[data-modo="reserva"] .globo__reserva {
  opacity: 0.72;
}

@media (max-width: 900px) {
  .globo__veu {
    background: linear-gradient(
      180deg,
      rgba(11, 31, 39, 0.9) 0%,
      rgba(11, 31, 39, 0.55) 34%,
      rgba(11, 31, 39, 0.72) 58%,
      rgba(11, 31, 39, 0.96) 100%
    );
  }
  .globo__reserva {
    background-position: 62% 42%;
  }
}

/* ==========================================================================
   Herói
   ========================================================================== */

.heroi {
  position: relative;
  z-index: var(--z-content);
  min-height: 100svh;
  display: flex;
  color: var(--ivory);
}

/* A grade vive aqui dentro, e não na seção, para o conteúdo poder ficar
   dentro de uma .container sem quebrar as três faixas do herói. */
.heroi__interno {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: clamp(24px, 4vh, 48px);
  padding-top: calc(var(--header-h) + clamp(24px, 7vh, 84px));
  padding-bottom: clamp(28px, 5vh, 56px);
}

/* Sem largura própria: quem mede o título é o título. Em `ch` sobre o corpo
   de 16px, um limite aqui daria menos de 200px e espremeria o título numa
   coluna estreita, quebrando a máscara linha a linha. */
.heroi__topo {
  min-width: 0;
}

/* O título tem escala própria, menor que a do --t-display: o herói divide a
   tela com o planeta, e um título no corpo máximo cruzaria o globo. As vinte
   e três unidades cobrem a linha mais longa (22 caracteres) com folga — e a
   máscara exige que nenhuma linha quebre por conta própria. */
.heroi__titulo {
  margin-top: var(--s-5);
  font-size: clamp(2.4rem, 4.25vw, 4.05rem);
  max-width: 23ch;
}

/* A máscara por linha é o que dá o "sobe por trás do corte" na entrada.
   Só vale com JS: sem ele o título aparece inteiro, sem animação. */
.heroi__titulo .linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

html.js .heroi__titulo .linha > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1.15s var(--ease-out);
}

html.js .heroi.is-pronto .heroi__titulo .linha > span {
  transform: none;
}

/* A entrada é escalonada por linha, do topo para baixo. */
html.js .heroi.is-pronto .linha:nth-child(2) > span {
  transition-delay: 0.12s;
}
html.js .heroi.is-pronto .linha:nth-child(3) > span {
  transition-delay: 0.24s;
}

/* O resto do herói entra depois do título, para a leitura começar pela
   frase e não por uma tela que se monta toda de uma vez. */
html.js .heroi__topo,
html.js .heroi__base,
html.js .heroi .indicador-rolagem {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

html.js .heroi.is-pronto .heroi__topo,
html.js .heroi.is-pronto .heroi__base,
html.js .heroi.is-pronto .indicador-rolagem {
  opacity: 1;
  transform: none;
}

html.js .heroi.is-pronto .heroi__base {
  transition-delay: 0.52s;
}
html.js .heroi.is-pronto .indicador-rolagem {
  transition-delay: 0.74s;
}

/* A primeira coluna é medida pelo conteúdo mais largo que ela precisa
   comportar: o parágrafo de abertura e, na mesma linha, o par de botões.
   Com os 34ch que bastavam ao parágrafo, o par quebrava em duas linhas num
   monitor largo — e num monitor largo é justamente onde ele tem espaço de
   sobra. Quarenta e sete unidades cabem os dois botões com folga e ainda
   deixam o parágrafo dentro de uma medida legível. */
.heroi__base {
  display: grid;
  grid-template-columns: minmax(0, 47ch) minmax(0, 1fr);
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
}

.heroi__chamada {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 34px);
}

.heroi__resumo {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ivory-78);
  max-width: 36ch;
}

.heroi__acoes {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* Selo discreto com as regiões realmente atendidas — dado, não enfeite. */
.heroi__selo {
  justify-self: end;
  align-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--stone);
  text-transform: uppercase;
  text-align: right;
}

.heroi__selo::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: none;
  background: var(--gold-45);
}

@media (max-width: 900px) {
  .heroi__base {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--s-5);
  }
  .heroi__titulo {
    max-width: 14ch;
  }
  .heroi__selo {
    justify-self: start;
    text-align: left;
  }
}

/* ==========================================================================
   Indicador de rolagem
   ========================================================================== */

/* Alinhado à coluna de conteúdo, não à borda da janela: em telas mais largas
   que o contêiner, `left: var(--gutter)` deixaria o indicador solto para
   fora do eixo do título. */
.indicador-rolagem {
  position: absolute;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  bottom: clamp(24px, 4vh, 44px);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
  z-index: calc(var(--z-content) + 1);
}

.indicador-rolagem__traco {
  position: relative;
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--gold-45), transparent);
  overflow: hidden;
}

/* O traço desce por `transform`, não por `top`: a animação roda para sempre
   e `top` obrigaria o navegador a refazer o layout do herói inteiro a cada
   quadro. Com `translateY` o trabalho é só do compositor. */
.indicador-rolagem__traco::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: descer-rolagem 2.8s var(--ease-soft) infinite;
}

@keyframes descer-rolagem {
  0% {
    transform: translateY(0);
  }
  60%,
  100% {
    transform: translateY(200%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .indicador-rolagem__traco::after {
    animation: none;
    top: 0;
  }
}

@media (max-width: 640px) {
  .indicador-rolagem {
    display: none;
  }
}

/* ==========================================================================
   Seções escuras que hospedam o globo
   Estas seções precisam ser translúcidas para o planeta aparecer atrás.
   ========================================================================== */

.secao-orbita {
  position: relative;
  z-index: var(--z-content);
  color: var(--ivory);
}

/* O fundo da seção existe para o corte com as vizinhas — o topo e a base
   precisam ser tinta cheia, senão a emenda com a seção opaca anterior fica
   dura de um lado e mole do outro. No meio, porém, ele tem de abrir: é ali
   que o planeta aparece, e um fundo opaco o apagaria. */
.secao-orbita::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(11, 31, 39, 0.97) 0%,
    rgba(11, 31, 39, 0.34) 18%,
    rgba(11, 31, 39, 0.1) 46%,
    rgba(11, 31, 39, 0.3) 74%,
    rgba(11, 31, 39, 0.97) 100%
  );
}

/* Quando o globo reaparece mais adiante na página, ele fica menor e
   deslocado — a mesma cena vista de outro lugar. Aqui o planeta está em
   crepúsculo e o texto é uma lista de regiões: o véu precisa escurecer a
   faixa da esquerda, onde o texto fica, sem apagar a faixa da direita,
   que é onde está o planeta. Daí duas camadas. A queda para zero coincide
   com a borda esquerda do disco (≈62% da largura), não é arbitrária. */
.globo[data-cena="alcance"] .globo__veu {
  background:
    linear-gradient(
      100deg,
      rgba(11, 31, 39, 0.9) 0%,
      rgba(11, 31, 39, 0.62) 32%,
      rgba(11, 31, 39, 0.2) 56%,
      rgba(11, 31, 39, 0) 66%
    ),
    linear-gradient(
      180deg,
      rgba(11, 31, 39, 0.76) 0%,
      rgba(11, 31, 39, 0.3) 30%,
      rgba(11, 31, 39, 0.34) 70%,
      rgba(11, 31, 39, 0.84) 100%
    );
}

/* No convite final o planeta volta a ocupar quase todo o quadro, agora do
   lado da noite: as luzes das cidades são o único ponto claro, e é o que
   dá textura ao fundo. O véu fica leve de propósito — quem garante a
   leitura do formulário é o painel dele, não o escurecimento geral. */
.globo[data-cena="planejar"] .globo__veu {
  background:
    linear-gradient(
      100deg,
      rgba(11, 31, 39, 0.5) 0%,
      rgba(11, 31, 39, 0.44) 44%,
      rgba(11, 31, 39, 0.38) 76%,
      rgba(11, 31, 39, 0.56) 100%
    ),
    linear-gradient(
      180deg,
      rgba(11, 31, 39, 0.86) 0%,
      rgba(11, 31, 39, 0.26) 30%,
      rgba(11, 31, 39, 0.3) 72%,
      rgba(11, 31, 39, 0.9) 100%
    );
}

/* O formulário é o único ponto do site em que texto pequeno fica sobre o
   planeta — e a superfície noturna tem luzes de cidade, que são pontos
   claros. O véu não resolve rótulo de campo: daí o painel, que também dá
   ao último bloco o peso de um objeto, e não de um amontoado solto. */
.planejar__formulario {
  padding: clamp(22px, 3.2vw, 44px);
  border: 1px solid var(--hairline-on-ink);
  border-radius: 2px;
  /* Sem backdrop-filter. Atrás do painel está o planeta girando: o desfoque
     era refeito a cada quadro, por todo o tempo em que a seção fica na tela
     — o trecho mais pesado da página, e o único em que texto pequeno precisa
     de chão firme. A 92% de opacidade só passam 8% do fundo, e a diferença
     entre esse fundo desfocado e nítido não se vê. O que se vê é a tinta. */
  background: rgba(11, 31, 39, 0.92);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}