/* ═══════════════════════════════════════════════════════════════════════════
   MARQUEE — continuous scrolling text strip
   Pure CSS animation, no JS. Decorative rhythm between sections.
   ═══════════════════════════════════════════════════════════════════════════ */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  user-select: none;
}

.marquee__inner {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}

.marquee__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-fg-faint);
  padding-right: var(--space-8);
  flex-shrink: 0;
}

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

/* Pause on hover — lets user read */
.marquee:hover .marquee__inner {
  animation-play-state: paused;
}