/* ==========================================================================
   FUNDO DE ESTRELAS — Interfone
   --------------------------------------------------------------------------
   SUBSTITUI a versão anterior de assets/fundo-pontos.css.
   Mudanças: as poças de luz foram removidas e a densidade de pontos subiu.

   Carregar DEPOIS do <style> inline da página:
       <link rel="stylesheet" href="assets/fundo-pontos.css">
   Precisa do assets/fundo-pontos.js, que gera os pontos.

   Comportamento:
   · sobre o hero preto a camada não aparece
   · ao rolar, os pontos surgem de baixo pra cima em degradê
   · cada ponto deriva devagar pra baixo, em velocidade e direção próprias
   · todos piscam fora de fase, como um céu
   Só transform e opacity. Nenhuma animação causa layout shift.
   ========================================================================== */


/* ---- camadas -------------------------------------------------------------
   Um elemento fixed atrás do background do body fica invisível.
   Por isso o preto sai do body e sobe pro html.                             */
html          { background: var(--black); }
body          { background: transparent; }
main,
footer.site   { position: relative; z-index: 1; }
/* header.site já é sticky com z-index 40 — não mexer */
/* .hero tem background #000 + isolation:isolate, então cobre a camada.
   É de propósito: é o que mantém a primeira tela preta e limpa.            */


/* ---- a camada ------------------------------------------------------------ */
.fundo-pontos {
  --entrada: 0;                 /* 0 no topo – 1 depois do hero (via JS)      */
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  /* degradê de entrada: revela de baixo pra cima conforme --entrada sobe */
  -webkit-mask-image: linear-gradient(to top,
      #000 0%,
      #000 calc(var(--entrada) * 118%),
      transparent calc(var(--entrada) * 118% + 26%));
          mask-image: linear-gradient(to top,
      #000 0%,
      #000 calc(var(--entrada) * 118%),
      transparent calc(var(--entrada) * 118% + 26%));
}


/* ---- as estrelas ---------------------------------------------------------
   Os spans são criados pelo JS. Cada um recebe suas próprias variáveis:
   --x posição   --t tamanho   --a opacidade   --dx desvio horizontal
   --dur deriva  --atraso (negativo, pra já nascerem espalhados)   --dp piscada
   -------------------------------------------------------------------------- */
.fp-campo { position: absolute; inset: 0; }

.fp-ponto {
  position: absolute;
  top: -8vh; left: var(--x);
  width: var(--t); height: var(--t);
  border-radius: 50%;
  background: rgba(255,255,255, var(--a));
  animation:
    fp-cai   var(--dur) linear var(--atraso) infinite,
    fp-pisca var(--dp)  ease-in-out var(--atraso) infinite;
}

/* as maiores ganham um halo — é o que faz o campo ler como céu
   em vez de textura chapada */
.fp-ponto.grande {
  box-shadow: 0 0 6px rgba(255,255,255,.55);
}

/* poucas amarelas, só pra marca aparecer no meio do branco */
.fp-ponto.quente {
  background: rgba(245,197,24, calc(var(--a) + .22));
  box-shadow: 0 0 7px rgba(245,197,24,.45);
}

@keyframes fp-cai {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx), 122vh, 0); }
}
@keyframes fp-pisca {
  0%, 100% { opacity: .22; }
  50%      { opacity: 1; }
}


/* ---- movimento reduzido --------------------------------------------------
   Nada se move, mas nada some: os pontos ficam parados onde nasceram
   (o JS distribui em --y).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fp-ponto     { animation: none; top: var(--y); opacity: var(--a); }
  .fundo-pontos { -webkit-mask-image: none; mask-image: none; opacity: .8; }
}