.main-marq {
  overflow: hidden;
}

.marq {
  position: relative;
  width: 100%;
}

.marq-inner {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 2rem;
  will-change: transform;
  animation: marquee var(--duration, 20s) linear infinite;
}

.marq-text {
  flex: 0 0 auto;
  font-size: 4.5rem;
  font-family: 'peridot-pe-variable';
  font-weight: 300;
  margin-top: 10vh;
  margin-bottom: 10vh;
}

/* Pause on hover (προαιρετικό) */

.main-marq:hover .marq-inner {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--shift, 500px)));
  }
}

/* Προσβασιμότητα: αν ο χρήστης ζητά λιγότερη κίνηση */

@media (prefers-reduced-motion: reduce) {
  .marq-inner {
    animation: none;
  }
}