/* 14 — Logo marquee
   Owns: .rw-logos, the scrolling track and its items
   Depends on: 01-tokens

   Rendered by [rw_logo_marquee] — includes/logo-marquee.php. That file is the
   other half of this one; neither is safe to change alone.

   Markup contract:

     <div class="rw-logos" style="--rw-logo-speed:46s;
                                  --rw-logo-height:40px;
                                  --rw-logo-gap:64px">
       <ul class="rw-logos__track">
         <li class="rw-logos__item"><img class="rw-logos__img" …></li>   x18
         <li class="rw-logos__item" aria-hidden="true">…</li>            x18 copy
       </ul>
     </div>

   The three custom properties are written inline by the shortcode so that the
   rules here stay static and a per-instance speed or size costs no extra CSS.
   Their DEFAULTS live in 01-tokens.css, not as var() fallbacks here — the
   theme's vars-resolve check (bin/verify-css.sh) requires every custom
   property used in css/ to be declared there, and one declaration site beats
   two that can drift apart.

   ── The one thing that must not be got wrong ──

   The loop works because the track holds the list TWICE and is translated by
   exactly -50%: at the end of the cycle the copy sits precisely where the
   original started, so the reset is invisible. That is only true if half the
   track's width is exactly one run — which is why the spacing between logos
   is margin-right ON EACH ITEM and NOT `gap` on the flex container.

   With `gap`, 36 items produce 36 items + 35 gaps, because a flex gap falls
   BETWEEN items and not after the last one. Half of that is 18 items and 17.5
   gaps, while one run occupies 18 items and 18 gaps — so -50% lands half a
   gap short and the strip visibly jerks once per cycle. Every marquee that
   "almost works" is this bug.

   With margin-right, each item's box is (logo + gap), 36 of them tile evenly,
   and half is exactly 18 of them. The logos having different widths does not
   matter: the two runs are identical, so whatever one run measures, the other
   measures the same. */

.rw-logos {
    /* The mask is the only thing clipping the track, so this is load-bearing
       and not just tidiness. */
    overflow: hidden;

    /* Fade both edges instead of guillotining a logo mid-letter. Two
       declarations because Safari only dropped the prefix in 15.4 and this
       silently does nothing there without it — the consequence is a hard
       edge, not a broken strip, so it degrades acceptably either way. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.rw-logos__track {
    display: flex;
    align-items: center;

    /* max-content, or the flex line would wrap to the container and the track
       would be one screen wide with the rest stacked underneath. */
    width: max-content;

    margin: 0;
    padding: 0;
    list-style: none;

    animation: rw-logo-scroll var(--rw-logo-speed) linear infinite;
}

.rw-logos__item {
    /* The spacing. See the block comment above before changing this to `gap`
       on the track — it is not equivalent and it breaks the loop. */
    margin-right: var(--rw-logo-gap);

    /* Flex items default to shrinking to fit their line. The track is wider
       than its container by design, so without this every logo would be
       squeezed and the two runs would stop being the same width. */
    flex: 0 0 auto;
}

.rw-logos__img {
    display: block;
    height: var(--rw-logo-height);

    /* Height is the constant; width follows the aspect ratio, so a wordmark
       stays wide and a roundel stays square.

       `width: auto` is defensive rather than a fix for a known rule: nothing
       in css/ or in the builder's stylesheets currently sets a width on img
       (checked 2026-09-12), but wp_get_attachment_image() emits width and
       height ATTRIBUTES from the image metadata, and a stylesheet that later
       makes content images fluid would fight the fixed height and distort
       every logo. Stating it costs nothing and pins the intent. */
    width: auto;
    object-fit: contain;
}

@keyframes rw-logo-scroll {
    /* No `from`. Starting the animation from the element's current position
       means the strip is already correct before the first frame, and it keeps
       the rule honest about the fact that -50% is the ONLY number that works
       here — see the header. */
    to { transform: translateX(-50%); }
}

/* Reduced motion.
   Stopping the animation is not sufficient on its own: the track is far wider
   than the mask, so a frozen marquee is a permanently clipped list with no way
   to see the rest of it. The strip becomes a normal horizontal scroller
   instead, so every logo stays reachable — by drag, wheel, or keyboard — which
   is what the animation was providing in the first place.

   The mask is dropped at the same time: a fade at both edges reads as "there
   is more, it is moving", and on a static scroller it just makes the end logos
   look faulty. */
@media (prefers-reduced-motion: reduce) {
    .rw-logos {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }

    .rw-logos__track {
        animation: none;
    }
}