/**
 * Message marquee: single-line scrolling "Our message in 5 points" under the beta banner.
 * Content from STRATEGIC_FIVE_POINTS (content.py). Respects prefers-reduced-motion.
 */

.message-marquee {
  overflow: hidden;
  width: 100%;
  max-width: var(--max-width-container, 1120px);
  margin: 0 auto;
  padding: 0.4rem 0;
  background: var(--color-bg-muted, #e5e5e5);
  border-bottom: 1px solid var(--color-border-light, #d4d4d4);
  font-size: 0.875rem;
  line-height: 1.4;
  color: #333;
}

.message-marquee__track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: message-marquee-scroll 55s linear infinite;
}

.message-marquee__text {
  padding-right: 2rem;
}

.message-marquee__separator {
  padding-right: 2rem;
}

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

@media (prefers-reduced-motion: reduce) {
  .message-marquee__track {
    animation: none;
    padding-left: 1rem;
  }

  .message-marquee__track .message-marquee__text:last-child,
  .message-marquee__track .message-marquee__separator {
    display: none;
  }
}