/* Pagina Sobre: faixa de marcas do grupo.
   Carregada so pela pagina Sobre, depois do dpx.css. Nenhuma outra pagina
   le este arquivo.

   A cor mora so dentro da caixa da faixa, de ponta a ponta da tela, com um
   fio em cima e outro embaixo separando a caixa do azul da pagina. Fora da
   caixa a Sobre continua no azul de sempre. Dentro, luz difusa na ordem da
   leitura: verde no comeco, perto do titulo, depois violeta, o vermelho da
   Raizon e da Aija, e o amarelo no fim.

   As seis marcas passam o tempo todo, em branco e na mesma altura otica.
   Cada trilho leva a lista tres vezes, para nao abrir buraco em tela larga,
   e vem duas vezes, para a volta emendar sem salto. O movimento e so de
   deslocamento, que a placa de video faz sozinha, e para quando a faixa sai
   da tela. Quem pede menos movimento no aparelho ve as marcas paradas,
   centralizadas. */
.faixa-marcas-secao{ padding:clamp(40px,4.4vw,70px) 0; }
.faixa-marcas-secao .secao-topo{ margin-bottom:clamp(14px,1.6vw,22px); }
.faixa-marcas{
  position:relative; overflow:hidden;
  padding:clamp(28px,2.8vw,42px) 0;
  background:
    radial-gradient(26% 130% at 6% 58%,  rgba(24,226,150,.60) 0%, rgba(24,226,150,.22) 44%, rgba(24,226,150,0) 76%),
    radial-gradient(22% 120% at 17% 30%, rgba(14,196,214,.34) 0%, rgba(14,196,214,0) 72%),
    radial-gradient(26% 140% at 33% 60%, rgba(124,58,246,.66) 0%, rgba(124,58,246,.24) 44%, rgba(124,58,246,0) 76%),
    radial-gradient(18% 120% at 47% 34%, rgba(206,40,168,.42) 0%, rgba(206,40,168,0) 72%),
    radial-gradient(26% 140% at 62% 58%, rgba(226,48,44,.70) 0%, rgba(226,48,44,.26) 44%, rgba(226,48,44,0) 76%),
    radial-gradient(18% 110% at 75% 32%, rgba(255,112,48,.40) 0%, rgba(255,112,48,0) 72%),
    radial-gradient(26% 130% at 90% 56%, rgba(255,198,58,.62) 0%, rgba(255,198,58,.22) 44%, rgba(255,198,58,0) 76%),
    linear-gradient(174deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.07) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #050a36 0%, #03072a 100%);
}
/* o fio que separa a caixa do azul da pagina, em cima e embaixo */
.faixa-marcas::before,
.faixa-marcas::after{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, #18E296, #7C3AF6 33%, #E2302C 64%, #FFC63A);
}
.faixa-marcas::before{ top:0; }
.faixa-marcas::after{ bottom:0; }
/* a janela esmaece as marcas nas pontas; a caixa de cor fica inteira */
.faixa-marcas__janela{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
}
.faixa-marcas__trilho{
  display:flex; width:max-content;
  animation:faixa-marcas 64s linear infinite;
}
.faixa-marcas.animacao-parada .faixa-marcas__trilho{ animation-play-state:paused; }
.faixa-marcas__lista{
  display:flex; align-items:center; flex:none;
  gap:clamp(52px,5.6vw,88px); padding:0 clamp(52px,5.6vw,88px) 0 0; margin:0;
  list-style:none;
}
.faixa-marcas__lista li{ flex:none; }
.faixa-marcas__lista img{
  display:block; height:clamp(36px,3.4vw,48px); width:auto;
  filter:drop-shadow(0 1px 10px rgba(2,4,30,.45));
}
@keyframes faixa-marcas{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (max-width:640px){
  .faixa-marcas__trilho{ animation-duration:52s; }
}
@media (prefers-reduced-motion: reduce){
  .faixa-marcas__janela{ -webkit-mask-image:none; mask-image:none; }
  .faixa-marcas__trilho{ animation:none; width:auto; justify-content:center; }
  .faixa-marcas__lista{ flex-wrap:wrap; justify-content:center; row-gap:26px; padding:0 var(--margem); }
  .faixa-marcas__lista[aria-hidden="true"],
  .faixa-marcas__lista li[aria-hidden="true"]{ display:none; }
}