/* ============================================================
   .uk-trust-logos — proposed canonical client-logo strip (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the trust-logos cluster in `public/css/style.css`:

     .trust-label                  -> .uk-trust-logos-label   (uppercase eyebrow above the strip)
     .trust-logos                  -> .uk-trust-logos          (root flex row)
     .trust-logo                   -> .uk-trust-logos-logo     (single muted logo cell)
     .trust-logo:hover             -> color shift on hover
     .trust-logo svg               -> .uk-trust-logos-logo > svg (uniform 32-px height)

   Adds two flavours the legacy didn't ship:

     – `--fade-edges` : CSS mask gradient at the left + right edges so a
                        long row visually "trails off" rather than ending
                        with hard cuts. Useful when the strip is tightly
                        packed and would otherwise look pinned to the
                        column edges.

     – `--scrolling`  : infinite marquee (CSS-only). Wrap the logos in
                        `.uk-trust-logos-track` (and duplicate the
                        children once so the loop is seamless). Animation
                        respects `prefers-reduced-motion`.

   Composes with: nothing — leaf primitive. Each logo cell accepts an
   `<svg>` *or* an `<img>` (height: 32, width: auto so the aspect ratio
   stays whatever the asset provides).
   ============================================================ */

/* ============================================
   Label — uppercase eyebrow above the strip
   ============================================
   Optional. Use when the strip sits on its own as a "trusted by …"
   section; skip when the strip is appended below an existing heading.
   ============================================ */
.uk-trust-logos-label {
    margin: 0 0 var(--space-xl);
    color: var(--color-text-muted);
    font-size: var(--font-md);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   Root — centered flex row of muted logos
   ============================================
   Default opacity 0.5 keeps the strip quiet so it sits as a trust signal
   rather than competing with the section above. Hover bumps the strip
   to 0.7 (overall row) and the individual logo to text colour.
   ============================================ */
.uk-trust-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3xl);
    opacity: 0.5;
    transition: opacity var(--transition-base);
}

.uk-trust-logos:hover {
    opacity: 0.7;
}

/* ============================================
   Logo cell — uniform 32-px height
   ============================================
   svg or img child both target the same height + auto width so a mixed
   set (vector logos + raster fallbacks) still aligns on the baseline.
   ============================================ */
.uk-trust-logos-logo {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.uk-trust-logos-logo:hover {
    color: var(--color-text);
}

.uk-trust-logos-logo > svg,
.uk-trust-logos-logo > img {
    height: 32px;
    width: auto;
}

/* ============================================
   --bright — full-opacity variant (no muted treatment)
   ============================================
   For when the strip sits on a tinted / dark background and the muted
   tone reads as "broken" rather than quiet. Bumps both the row opacity
   and the per-logo color to text.
   ============================================ */
.uk-trust-logos--bright {
    opacity: 1;
}

.uk-trust-logos--bright .uk-trust-logos-logo {
    color: var(--color-text);
}

/* ============================================
   --fade-edges — left/right gradient mask
   ============================================
   Cleaner edge treatment when the strip extends to the column edges.
   Mask makes the leftmost / rightmost ~10% fade to transparent so the
   row visually trails off rather than ending in a hard cut.
   ============================================ */
.uk-trust-logos--fade-edges {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
    );
}

/* ============================================
   --scrolling — infinite marquee
   ============================================
   Logos sit inside an inner `.uk-trust-logos-track`. Author duplicates
   the children once (so the loop is seamless) and the animation
   translates the track by -50% over 30 s. Combine with `--fade-edges`
   so the in/out ends of the loop don't pop visually.
   ============================================ */
.uk-trust-logos--scrolling {
    overflow: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
}

.uk-trust-logos-track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-3xl);
    padding-right: var(--space-3xl);
    animation: uk-trust-logos-scroll 30s linear infinite;
}

@keyframes uk-trust-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .uk-trust-logos-track {
        animation: none;
    }
}