/* ------------------------------------------------------------------
   Markets marquee — the countries iB23 sells and services in, moving.

   Shared by index.html and macchine.html, and used more than once on a
   page, which is why the markup is not authored: js/markets.js fills
   every <div class="markets" data-markets> from one list. Adding a
   market is one line in that file rather than an edit in three places
   that will eventually disagree.

   The track holds the countries twice and slides one half-width, so the
   second copy is exactly where the first started when the animation
   loops and the motion never visibly jumps. Left to right, which is why
   it runs from -50% to 0 rather than the other way.
------------------------------------------------------------------- */

.markets{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.markets-track{display:flex;gap:2.4em;width:max-content;
  animation:markets-scroll 38s linear infinite;}
.flagchip{display:inline-flex;align-items:center;gap:.6em;flex:none;
  font-size:.84rem;font-weight:700;letter-spacing:.02em;color:var(--gray);
  text-transform:uppercase;}
.flagchip img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);}
@keyframes markets-scroll{from{transform:translateX(-50%);} to{transform:translateX(0);}}
/* a strip that never stops is exactly what reduced-motion is asking about */
@media (prefers-reduced-motion: reduce){
  .markets-track{animation:none;transform:translateX(-50%);}
}

/* On a dark band the chips have to carry their own contrast. */
.markets.on-dark .flagchip{color:rgba(255,255,255,.72);}
.markets.on-dark .flagchip img{box-shadow:0 0 0 1px rgba(255,255,255,.28);}

/* A strip standing on its own between two sections, rather than inside one. */
.markets-band{padding:1.5em 0;border-bottom:1px solid var(--border);background:var(--bg);}
.markets-band.alt{background:var(--bg-alt);}