/* Promo marquee — yellow band, infinitely scrolling text.
   CSS-only fallback; two identical copies animate to -50% for a
   seamless loop. js/marquee.js takes over once JS/fonts are ready. */

.marquee {
  overflow: hidden;
  background: #f2ff00; /* one-off band yellow */
  cursor: grab;
  touch-action: pan-y; /* horizontal drags are ours, vertical scroll stays native */
}

.marquee.is-dragging {
  cursor: grabbing;
}

.marquee__track {
  /* flex, not inline-flex: as .marquee's sole child, an inline-level box
     reserves phantom descender space below it (the "gap under an img"
     bug). width:fit-content keeps inline-flex's shrink-to-content sizing
     — needed since the no-JS fallback's spans are wider than the
     viewport, and the -50% animation needs the track's real width. */
  display: flex;
  width: fit-content;
  user-select: none; /* dragging must not select text */
  -webkit-user-select: none;
  white-space: nowrap;
  margin: 0;
  padding-block: 0.2rem;
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-regular);
  animation: marquee-scroll 24s linear infinite; /* ~50px/s at the 405px baseline, matching the JS pace */
}

.marquee__track > span {
  /* gap = one 405px design-screen width, so it stops growing on wide
     desktops (uncapped 100vw left the band empty most of each cycle) */
  padding-right: min(100vw, 25.3rem);
}

/* js/scrub-strip.js splits the track's two spans into their own
   .scrub-strip__group wrappers (position set inline by the JS) so they
   can relay past each other independently. */
.marquee__track .scrub-strip__group {
  display: inline-flex;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  padding-block: 0.2rem;
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
}

.marquee__track .scrub-strip__group > span {
  padding-right: min(100vw, 25.3rem);
}

/* runs for everyone, deliberately overriding base.css's reduce-motion
   kill — revisit if a WCAG pause control is added (2.2.2) */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation-duration: 24s !important;
  }
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* background line, not text-decoration: Chrome can drop a real underline
   under a moving/transformed element at some subpixel positions.
   css-irl.info/animating-underlines */
.marquee__track a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  background-position: 0 1.15em; /* ≈ text-underline-offset: 0.15em, em scales with the local font */
}

/* No focus ring on the subscribe link: clicking/tapping it opens the
   dialog and focus moves straight into its email field, so the ring only
   ever shows as a stray box left behind on the moving text (Safari and
   Chrome both match :focus-visible here on pointer taps). Keyboard users
   see the dialog itself open — that's the response. */
.marquee a:focus-visible {
  outline: none;
}

/* Keyboard hand-off input (marquee.js): must be rendered to take focus
   (display:none can't), but never seen — and 16px+ text, or iOS zooms
   in on it when focused. */
.keyboard-relay {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: var(--text-ui); /* 16px — iOS's no-zoom floor */
}