/* Seção #fechamento: Fase 5, com os ajustes do cliente.
   Eclipse e grade do FECHAMENTO de _referencia/canvas/Main.dc.html (eclipse de 760 px no desktop, aprovado). Por
   cima, a logo da campanha como assinatura (Motion V02, js/modulos/motion-logo.js, ~65% da largura do botão), a frase
   bicolor (o destaque) e o botão, com o mesmo espaço entre os três. O céu ecoa a hero, para a página fechar como
   abriu: coroa de raios girando devagar, órbitas com um ponto de luz, estrelas fora do eclipse e uma névoa laranja na
   base. Céu, eclipse e conteúdo dividem o mesmo centro (uma célula de grid); tudo de fundo fica atrás do eclipse e do
   texto. Com movimento reduzido, fica estático (base.css). */

/* Respiro igual em cima e embaixo do eclipse:
   - em cima: o padding-bottom da comunidade (120 px; 90 no mobile) + o padding-top daqui;
   - embaixo: o padding-bottom daqui (o rodapé não sobe mais por cima desta seção: saíram os candles).
   Desktop: 120 + 40 = 160 px. Mobile: 90 + 30 = 120 px.
   A seção termina na cor do rodapé (a base da página): a passagem é contínua, com uma linha fina no rodapé. */
/* Sem corte reto em cima nem embaixo: a seção só recorta no eixo X (overflow-x: clip, sem scroll horizontal) e fica
   numa camada abaixo da comunidade e do rodapé (z-index 0 × 1). Os efeitos do céu se estendem por baixo do fim
   transparente das duas e somem na máscara radial do .fechamento__astro. */
.fechamento {
  --eclipse: 760px;
  position: relative;
  z-index: 0;
  overflow-x: clip;
  overflow-y: visible;
  padding: 40px var(--gutter) 160px;
  background: var(--cor-base);
}

/* Névoa laranja muito suave embaixo do eclipse; some antes da borda, para a seção terminar na cor do rodapé */
.fechamento::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 106, 26, .06), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
  pointer-events: none;
}

.fechamento__grade {
  position: absolute;
  inset: 0;
  opacity: .5;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}

/* Estrelas da hero (.star e .sparkle, topo.css), em menor quantidade e fora do eclipse */
.fechamento__estrelas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ========== PALCO: céu, eclipse e conteúdo na mesma célula ========== */
/* A coluna tem a largura do contêiner (minmax(0, 1fr)): no mobile o eclipse é mais largo que a tela e transborda
   igualmente para os dois lados, sem empurrar o centro */
.fechamento__palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}

.fechamento__palco > * {
  grid-area: 1 / 1;
  justify-self: center;
}

/* ========== CÉU: coroa e órbitas, com o centro do eclipse ==========
   A caixa do céu é maior que o eclipse (1,8 × de largura, 1,64 × de altura) e tem uma máscara radial elíptica:
   tudo some suavemente antes de chegar ao conteúdo do rodapé e aos cards da comunidade, sem borda reta. */
.fechamento__astro {
  position: relative;
  z-index: 0;
  width: calc(var(--eclipse) * 1.8);
  height: calc(var(--eclipse) * 1.64);
  /* ocupa na grid só o tamanho do eclipse: a caixa maior não pode empurrar os respiros */
  margin: calc(var(--eclipse) * -.32) calc(var(--eclipse) * -.4);
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  pointer-events: none;
}

/* Coroa solar: raios finos saindo da borda do eclipse; a máscara em anel só os mostra logo fora da borda, e eles
   somem a ~35% do raio */
.fechamento__coroa {
  --r: calc(var(--eclipse) / 2);
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--eclipse) * 1.8);
  height: calc(var(--eclipse) * 1.8);
  margin: calc(var(--eclipse) * -.9) 0 0 calc(var(--eclipse) * -.9);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 178, 120, .09) 0deg .35deg, transparent .35deg 3deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 calc(var(--r) - 2px), #000 calc(var(--r) + 6px), transparent calc(var(--r) * 1.35));
  mask-image: radial-gradient(circle, transparent 0 calc(var(--r) - 2px), #000 calc(var(--r) + 6px), transparent calc(var(--r) * 1.35));
  animation: fechamento-coroa 140s linear infinite;
}

/* Órbitas: círculos concêntricos de 1 px, cada vez maiores */
.orbita {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbita--1 {
  width: calc(var(--eclipse) * 1.18);
  height: calc(var(--eclipse) * 1.18);
  border-color: rgba(255, 255, 255, .07);
}

.orbita--2 {
  width: calc(var(--eclipse) * 1.4);
  height: calc(var(--eclipse) * 1.4);
}

.orbita--3 {
  width: calc(var(--eclipse) * 1.66);
  height: calc(var(--eclipse) * 1.66);
  border-color: rgba(255, 255, 255, .05);
}

/* Um ponto de luz percorre a órbita do meio em 30 s */
.orbita--ponto {
  animation: fechamento-orbita 30s linear infinite;
}

.orbita--ponto::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--cor-luz);
  box-shadow: 0 0 6px 1px rgba(255, 200, 61, .8), 0 0 16px 3px rgba(255, 140, 40, .45);
}

@keyframes fechamento-coroa {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fechamento-orbita {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ========== ECLIPSE ========== */
.eclipse {
  position: relative;
  z-index: 1;
  width: var(--eclipse);
  height: var(--eclipse);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #120c0a, #030202 70%);
  box-shadow:
    inset 0 3px 0 rgba(255, 190, 130, .65),
    inset 0 18px 40px -10px rgba(255, 106, 26, .35),
    0 -4px 30px rgba(255, 140, 70, .35),
    0 -40px 140px rgba(255, 106, 26, .22);
  pointer-events: none;
}

/* ========== CONTEÚDO: assinatura, frase e botão com um só gap ========== */
/* Compensação óptica: centrado no círculo, o bloco parecia baixo; só ele sobe 3,5% do diâmetro do eclipse
   (~26 px no desktop). O eclipse e o céu não mudam de lugar. */
.fechamento__conteudo {
  position: relative;
  z-index: 2;
  transform: translateY(calc(var(--eclipse) * -.035));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 900px;
  text-align: center;
}

/* A logo tem ~65% da largura do botão logo abaixo (--largura-botao, medida em js/modulos/fechamento.js; antes do
   JS, a medida do desktop). Mesma proporção do quadro final (1306 × 646): a troca da imagem pela animação não mexe no
   layout. O ingresso entra voando de fora da área (overflow visível no SVG). */
.fechamento__marca {
  width: calc(var(--largura-botao, 276px) * .65);
  aspect-ratio: 1306 / 646;
}

.fechamento__marca img,
.fechamento__marca svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* lettering um pouco menos brilhante que o ingresso (no quadro estático, assinatura-escuro.svg já vem assim) */
.fechamento__marca #lettering-motion {
  opacity: .92;
}

/* Frase: o destaque. Jakarta 800, no máximo 2 linhas no desktop, bicolor como os títulos de seção */
/* Duas linhas a partir de 600 px (ajuste do cliente): a caixa vai a ~68% do eclipse, para a frase não caber numa
   linha só (em ~810 px ela encostava na borda). O piso de 8.6em existe porque, a 72 px, a linha mais longa
   ("você não opera sozinho.") tem 8.4em = 604 px, mais que os 68% (517 px), e a frase cairia para 3 linhas. */
.fechamento__frase {
  max-width: max(calc(var(--eclipse) * .68), 8.6em);
  font: 800 clamp(40px, 5vw, 72px)/1.02 var(--fonte-impacto);
  letter-spacing: var(--tracking-impacto);
  color: #fff;
  text-wrap: balance;
}

.fechamento__frase > span {
  color: rgba(255, 255, 255, .42);
}

@media (max-width: 767.98px) {
  .fechamento {
    --eclipse: min(620px, 160vw);
    padding: 30px var(--gutter) 120px;
  }

  .fechamento__conteudo {
    gap: 20px;
  }

  .fechamento__marca {
    width: calc(var(--largura-botao, 252px) * .65);
  }
}