/* ==========================================================================
   FAIXA ANTES E DEPOIS
   Pares de foto em moldura de polaroid, deslizando devagar na horizontal.
   Feito pra ser leve: funciona em 3G e em celular fraco.

   Nao depende de biblioteca nenhuma. E so CSS e um JS de 20 linhas.
   ========================================================================== */

.faixa{
  position: relative;
  overflow: hidden;
  padding: 6px 0 10px;

  /* as bordas se dissolvem, entao a faixa "entra e sai" da tela sem corte seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.faixa__trilho{
  display: flex;
  gap: 26px;
  width: max-content;
  animation: faixa-anda 46s linear infinite;
}

/* passar o mouse pausa (no celular nao tem efeito, e proposital) */
.faixa:hover .faixa__trilho{ animation-play-state: paused; }

/* o trilho tem as fotos DUAS vezes. Andar ate -50% cai exatamente no
   comeco da segunda volta, entao a emenda fica invisivel e o loop e continuo. */
@keyframes faixa-anda{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

.faixa__par{
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.faixa__foto{
  padding: 3px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(20,19,15,.14), 0 1px 2px rgba(20,19,15,.06);
}

.faixa__foto img{
  width: 78px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* o "antes" fica atras, mais girado e com a cor puxada pra tras.
   o "depois" vem na frente, sobrepondo. E o que conta a historia sozinho. */
.faixa__foto--antes{
  transform: rotate(-5deg);
  filter: saturate(.85);
  z-index: 1;
}
.faixa__foto--depois{
  transform: rotate(3deg);
  margin-left: -16px;   /* a sobreposicao */
  z-index: 2;
  position: relative;
}

@media (max-width: 640px){
  .faixa__foto img{ width: 68px; }
  .faixa__trilho{ gap: 22px; }
}

/* respeita quem desligou animacao no sistema */
@media (prefers-reduced-motion: reduce){
  .faixa__trilho{ animation: none; }
}