/* === Marquee — przewijany pasek napisów ===
   Reference: royalold.weblance-devs.pl (homepage) — full-bleed dark band with
   large display text scrolling right-to-left, paused on hover.
   Measured on the reference at 1920px: one pass = 1443px in 14.2857s = 101 px/s.

   --marquee-duration is the ONE pace knob. The reference keeps a FIXED
   duration no matter how much text it holds, so a shorter track scrolls
   slower. Reproduce the PACE, not the duration:

       duration (s) ≈ track width (px) / 101

   11 phrases → measured track 5403px @1920px → 5403 / 101 ≈ 53.5s.
   Re-measure the track width after changing the phrase list.

   Because both the type AND the pace scale with the fluid root, the band
   keeps the reference's pace RELATIVE TO ITS OWN TYPE SIZE at every
   breakpoint (≈2.1 × font-size per second), even though the raw px/s differs. */

.block-marquee {
  /* Reference's realised item gap: `padding-right: 50px` on every item.
     Written as N/16 rem per the theme's scale model = 1:1 at 1920px. */
  --marquee-gap: 3.125rem;
  /* Reference's realised band is 181.6px tall: it authors `padding: 50px 0`
     but its phrases are <h3>s, so the default 8px/16px margins add 24px.
     62px reproduces that realised height with the text properly centred
     (the reference's text sits 6px above centre — an h3 artefact, not design). */
  --marquee-pad: 3.875rem;
  --marquee-duration: 53.5s;

  background: var(--color-fg);
  color: var(--color-on-accent);
  padding-block: var(--marquee-pad);
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--fs-marquee);
  font-weight: var(--fw-display);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  text-transform: capitalize;
}

.block-marquee__viewport {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.block-marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  animation: block-marquee-scroll var(--marquee-duration) linear infinite;
}

/* Same affordance as the reference band: the strip can be stopped to read it. */
.block-marquee:hover .block-marquee__track {
  animation-play-state: paused;
}

.block-marquee__item {
  flex-shrink: 0;
  padding-right: var(--marquee-gap);
}

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

/* NOTE: this block deliberately does NOT use the shared `.wl-section` wrapper.
   The band is full-bleed and carries the reference's own vertical rhythm
   (62px), not the theme's section rhythm (96px), so the shared class would
   only have to be overridden.

   The flexible-content renderer emits an empty `<section class="wl-section
   block-marquee">` when a block renders nothing (see
   library/flexible.php — "Block returned early (no data)"). For every other
   block that placeholder is invisible; here it would paint a bare dark strip,
   so hide it. */
.block-marquee:empty {
  display: none;
}

/* Reduced motion is already handled globally (base.css sets `animation: none`),
   so the band degrades to a static strip of the first copy. */