@import "tailwindcss";

* {
  font-family: "Roboto";
}

@keyframes marquee {
  from {
    transform: translateX(0); /* Início da animação: posição original */
  }
  to {
    transform: translateX(
      -50%
    ); /* Fim: move para -50% (metade da largura duplicada) para loop seamless */
  }
}
/* Classe para aplicar a animação: duração 15s, linear para suavidade, infinite para loop contínuo */
.animate-marquee {
  animation: marquee 40s linear infinite;
}
/* Pausa animação em hover para melhor UX (usuário pode ler sem movimento) */
.animate-marquee:hover {
  animation-play-state: paused;
}