/*!
 * Marquee v1.0 - infinite logo and text ticker
 * by Rehmat (Animated Creativity) - https://animatedcreativity.com - MIT License
 */

/* Before the script runs (or without JavaScript) the row is a normal row you can swipe. */
[data-marquee] {
  --mq-gap: 48px;
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  scrollbar-width: none;
}
[data-marquee]::-webkit-scrollbar { display: none; }
[data-marquee] > * { flex: none; }

/* Running marquee */
.mq { overflow: hidden; gap: 0; }
.mq-track {
  display: flex;
  flex: none;
  width: max-content;
  animation: mq-run var(--mq-duration, 20s) linear infinite;
  will-change: transform;
}
.mq-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--mq-gap);
  padding-right: var(--mq-gap);   /* the space between the last item and the first copy */
}
.mq-set > * { flex: none; }

.mq[data-marquee-direction="right"] .mq-track { animation-direction: reverse; }

/* Pause: on hover, while a link inside has keyboard focus, and while off screen */
.mq:not([data-marquee-pause="false"]):hover .mq-track,
.mq:focus-within .mq-track,
.mq.mq-off .mq-track,
.mq.mq-paused .mq-track { animation-play-state: paused; }

/* Soft fade at both edges */
[data-marquee-fade] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

/* Visitors who switched off animations get a still row they can swipe */
.mq.mq-still { overflow-x: auto; }
.mq.mq-still .mq-track { animation: none; }

@keyframes mq-run {
  to { transform: translate3d(calc(-1 * var(--mq-distance, 50%)), 0, 0); }
}