/* ===========================================================================
   Brands — deploy 010, rebuilt as a logo carousel in deploy 098.
   =========================================================================== */

.bmarq{position:relative; overflow:hidden;
  /* the strip runs off both edges rather than stopping at the container */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}

.bmarq__track{display:flex; width:max-content}

.bmarq__set{display:flex; align-items:center; gap:var(--s-4);
  margin:0; padding:0 calc(var(--s-4) / 2); list-style:none}

/* One copy's width per cycle, so the second copy is exactly where the first
   was when it repeats and there is no seam. Duration follows the count, so
   sixteen brands and six brands travel at the same speed rather than the same
   tempo. */
.bmarq__track{animation:bmarq-run linear infinite;
  animation-duration:calc(var(--brand-count, 16) * 2.6s)}
@keyframes bmarq-run{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.bmarq:hover .bmarq__track,
.bmarq:focus-within .bmarq__track{animation-play-state:paused}

.blogo{display:grid; place-items:center; width:120px; height:120px; flex:none;
  padding:0; overflow:hidden;
  background:var(--ink-900); border:1px solid var(--ink-700);
  border-radius:var(--r-card);
  transition:border-color var(--t-micro) ease-out, transform var(--t-micro) ease-out}
.blogo img{width:100%; height:100%; object-fit:cover; display:block}

/* Two of the stocked brands have no logo. Same tile, same footprint, the name
   set in the display face rather than a gap in the strip. */
.blogo--text{padding:10px; background:var(--ink-800)}
.blogo--text span{font-family:var(--font-display); font-weight:700; font-size:1rem;
  line-height:1.1; letter-spacing:.02em; text-transform:uppercase;
  text-align:center; color:var(--text-secondary)}

/* Owns its colour on hover as well as at rest, or Bootstrap's a:hover wins.
   See deploy/_tools/check-link-hover.py. */
.blogo:hover{text-decoration:none; border-color:var(--fuse-gold); transform:translateY(-2px)}
.blogo:hover span{color:var(--fuse-gold)}
.blogo:focus-visible{outline:2px solid var(--spark-cyan); outline-offset:2px}

@media(max-width:559px){
  .blogo{width:92px; height:92px}
  .blogo--text span{font-size:.8125rem}
}

/* Motion turned down: the strip stops moving and becomes something you push.
   Hiding it would remove sixteen real links; leaving it animated would ignore
   the setting. */
@media(prefers-reduced-motion:reduce){
  .bmarq{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .bmarq__track{animation:none}
  .bmarq__set:nth-child(2){display:none}
}