/* /styles/components/marquee.css */

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-lg);
  padding-inline: var(--space-md);
  animation: marquee-slide 40s linear infinite;
  will-change: transform;
}

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

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--text-secondary);
  font-style: italic;
  white-space: nowrap;
}

.marquee__item--strong {
  color: var(--text-primary);
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.marquee__separator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  flex-shrink: 0;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee--slow .marquee__track {
  animation-duration: 70s;
}