/* Base Styles */
body {
  cursor: pointer;
}

/* Animations */
.marquee-container {
  overflow: hidden;
}

.marquee-content {
  display: flex;
  animation: scroll 15s linear infinite;
  width: max-content;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-content-reverse {
  display: inline-block;
  animation: scroll-reverse 15s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-reverse {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes infinite-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: infinite-marquee 15s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Hide scrollbar for a cleaner marquee look */
.marquee-container::-webkit-scrollbar {
  display: none;
}

.marquee-container {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}