/* Block: marquee-text — scoped */

.marquee {
  overflow: hidden;
  width: 100%;
  /* Soft fade at edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: whyso-marquee-scroll var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}

.marquee__inner {
  display: flex;
  gap: var(--sp-300);
  padding-inline: calc(var(--sp-300) / 2);
  flex-shrink: 0;
}

.marquee__pill {
  padding: var(--sp-200) var(--sp-500);
  border-radius: var(--r-pill);
  background: var(--marquee-pill-color, var(--color-purple));
  color: #ffffff;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-700);
  line-height: 1.2;
  white-space: nowrap;
}

.marquee--pause-on-hover:hover .marquee__track,
.marquee--pause-on-hover:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes whyso-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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