/* Static, complete highlights are the fallback and reduced-motion presentation. */
.ai-page .marquee-track {
  display: block;
  width: auto;
  white-space: normal;
  animation: none;
  transform: none;
}
.ai-page .marquee-sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 0 var(--pad-gutter);
}
.ai-page .marquee-sequence > span { max-width: 100%; }
.ai-page .marquee-duplicate,
.ai-page .marquee-control,
.ai-page .marquee-sequence > .dot { display: none; }

/* Motion is enabled only when the browser can also implement the native pause. */
@supports selector(.marquee:has(input:checked)) {
  @media (prefers-reduced-motion: no-preference) {
    .ai-page .marquee-control {
      display: flex;
      align-items: center;
      gap: 10px;
      width: max-content;
      max-width: calc(100% - 40px);
      min-height: 44px;
      margin: 0 var(--pad-gutter) 14px auto;
      padding: 8px 12px;
      border: 1px solid var(--ink-3);
      border-radius: 6px;
      background: var(--bg-2);
      color: var(--ink);
      font: 400 12px/1.4 var(--mono);
      cursor: pointer;
    }
    .ai-page .marquee-pause { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
    .ai-page .marquee-control:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
    .ai-page .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      white-space: nowrap;
      animation: slide var(--marquee-speed) linear infinite;
    }
    .ai-page .marquee-sequence {
      flex: 0 0 auto;
      flex-wrap: nowrap;
      gap: 56px;
      padding: 0 56px 0 0;
    }
    .ai-page .marquee-duplicate { display: flex; }
    .ai-page .marquee-sequence > .dot { display: inline; }
    .ai-page .marquee:has(.marquee-pause:checked) .marquee-track { animation-play-state: paused; }
  }
}