/* =====================================================================
   DIVISOR ENTRE SEÇÕES
   Uma linha só, no vocabulário do site: o dourado das esferas e do fio,
   com o contorno escuro das molduras das seções. Um brilho passa de vez em
   quando, como no título do hero.

   Uso: <div class="divisor" role="separator"></div> entre duas <section>.

   Não depende do --u de nenhuma seção (fica entre elas, fora de todas):
   a espessura acompanha a largura da janela, com piso e teto.
   ===================================================================== */
.divisor{
  position:relative; overflow:hidden;
  height:clamp(10px, .75vw, 16px);
  /* faixas de corte seco, de cima para baixo: contorno, reflexo, ouro claro,
     ouro, ouro queimado, contorno — a mesma ordem da barra das esferas */
  background:linear-gradient(180deg,
    #0c0a12 0 18%,
    #fff6cf 18% 30%,
    #ffd23f 30% 52%,
    #ff9d12 52% 70%,
    #c66d00 70% 82%,
    #0c0a12 82% 100%);
}
/* o brilho: uma faixa clara que atravessa a linha e some; só transform, então custa pouco.
   Fica dentro do miolo dourado (18% a 82%): por cima do contorno, deixava o preto cinza */
.divisor::after{
  content:""; position:absolute; top:18%; bottom:18%; left:0; width:16%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85) 50%, transparent);
  transform:translateX(-110%);
  animation:divisorBrilho 7.9s ease-in-out infinite;
}
@keyframes divisorBrilho{
  0%, 62%{ transform:translateX(-110%) }
  100%{ transform:translateX(640%) }
}
@media (prefers-reduced-motion:reduce){
  .divisor::after{ animation:none; opacity:0 }
}