/* RPA · Marquee. Full-bleed, CSS-only. Two halves of identical content; the track slides by
   exactly -50% so the loop is seamless. Pauses on hover and keyboard focus; static and
   wrapped under prefers-reduced-motion. Nothing here needs JavaScript. */

.rpa-marquee {
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-rule-strong));
  --_accent: var(--rpa-c-accent, var(--rpa-petrol));
  --_gap: clamp(1.25rem, 0.75rem + 2vw, 2.75rem);
  overflow: hidden;
  padding-block: clamp(1.125rem, 0.75rem + 1.4vw, 2rem);
  border-block: 1px solid var(--_rule-strong);
}

.rpa-marquee__track {
  display: flex;
  width: max-content;
  animation: rpa-marquee var(--rpa-marquee-duration, 60s) linear infinite;
  will-change: transform;
}
.rpa-marquee--right .rpa-marquee__track { animation-direction: reverse; }

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

.rpa-marquee__list {
  display: flex;
  flex: none;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpa-marquee__item {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: var(--_gap);
  margin: 0;
  padding-inline-end: var(--_gap);
  white-space: nowrap;
}

.rpa-marquee__word {
  font-family: var(--rpa-serif);
  font-size: var(--rpa-step-3);
  font-weight: 350;
  font-optical-sizing: auto;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.rpa-marquee__item:nth-child(even) .rpa-marquee__word { font-style: italic; font-weight: 300; }

.rpa-marquee__sep {
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step-0);
  color: var(--_accent);
  translate: 0 -0.35em;
}

@keyframes rpa-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion: no movement at all — one static, wrapped list on the page margins. */
@media (prefers-reduced-motion: reduce) {
  .rpa-marquee__track {
    width: auto;
    max-width: var(--rpa-shell);
    margin-inline: auto;
    padding-inline: var(--rpa-gutter);
    animation: none !important;
    will-change: auto;
  }
  .rpa-marquee__list { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.25rem; }
  .rpa-marquee__list[aria-hidden="true"] { display: none; }
  .rpa-marquee__item:last-child .rpa-marquee__sep { display: none; }
  .rpa-marquee__word { font-size: var(--rpa-step-2); }
}