/* ── dp/marquee block: frontend ──────────────────────────────────────────
 * Registered with the block's 'style' handle (see functions.php), which
 * WordPress conditionally enqueues only on pages that actually contain a
 * dp/marquee block — never loaded site-wide. Deliberately its own file
 * rather than a Tailwind utility class: this theme's Tailwind build is
 * precompiled, only ships classes already used elsewhere, and a scrolling
 * CSS-animation keyframe isn't something Tailwind's utilities express
 * anyway (see render.php's own note on this, and the same trap documented
 * in template-threads-dislike-leaderboards.php).
 */

.dp-marquee-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 10px 0;
}

/* The track holds the message TWICE back to back (see render.php) — the
   animation only ever moves it by exactly one copy's width (translateX
   -50%), so the moment the first copy scrolls fully offscreen, the second
   copy is sitting exactly where the first one started. That's what makes
   the loop seamless with no visible seam/jump/gap. */
.dp-marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation-name: dp-marquee-scroll;
  animation-duration: var( --dp-marquee-duration, 15s );
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: var( --dp-marquee-anim-direction, normal );
}

.dp-marquee-item {
  padding: 0 2em;
  font-weight: 700;
  font-size: 15px;
}

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

/* Pause on hover/keyboard focus — lets anyone actually read it or click a
   link inside it without it sliding out from under the pointer. */
.dp-marquee-wrap:hover .dp-marquee-track,
.dp-marquee-wrap:focus-within .dp-marquee-track {
  animation-play-state: paused;
}

/* Accessibility, not optional (see T-Q in the sprint backlog — this ties
   directly into the same accessibility-audit priority). Motion-sensitive
   visitors get the message as plain static text instead of a scrolling
   animation. */
@media ( prefers-reduced-motion: reduce ) {
  .dp-marquee-track {
    animation: none;
  }
  /* The second (duplicate) copy exists purely to make the animation loop
     seamless — with the animation off it would just show the message
     twice in a row, which reads as a mistake. Hide it. */
  .dp-marquee-item:nth-child(2) {
    display: none;
  }
}

/* ── Plain variant (default) ───────────────────────────────────────────── */
.dp-marquee-wrap--plain {
  background: var( --dp-bg, #fff );
  border-top: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
}
.dark .dp-marquee-wrap--plain {
  border-color: #27272a;
}
.dp-marquee-wrap--plain .dp-marquee-item {
  color: inherit;
}

/* ── Caution-tape variant ─────────────────────────────────────────────────
   Same striped look as the Loserboards page's .loser-tape banner
   (template-threads-dislike-leaderboards.php) — not literally shared code
   (that CSS lives inline in that one template), reproduced here so this
   block has no fragile cross-file dependency. */
.dp-marquee-wrap--tape {
  padding: 0;
}
.dp-marquee-wrap--tape .dp-marquee-track {
  background: repeating-linear-gradient(
    -45deg,
    var( --dp-accent, #fdd835 ),
    var( --dp-accent, #fdd835 ) 22px,
    #18181b 22px,
    #18181b 44px
  );
  padding: 12px 0;
}
.dp-marquee-wrap--tape .dp-marquee-item {
  color: #18181b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}