/*
 * marquee.css — défilement horizontal sans faille des technologies.
 * Mécanique portée de kxcloud-lab.com (double piste dupliquée pour une
 * boucle translateX(-100%) mathématiquement invisible, masques de bord
 * en dégradé, pause au survol). Logos vendorisés localement (Simple
 * Icons, MIT) — zéro dépendance CDN au runtime, zéro risque d'image
 * cassée en production.
 */

.marquee {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
  padding-block: var(--space-4);
  background: var(--color-surface-2);
  border-block: var(--border-thin) solid var(--color-border);
  position: relative;
  user-select: none;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2.5rem, 8vw, 6rem);
  z-index: 1;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-surface-2), transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-surface-2), transparent);
}

/*
 * Deux pistes identiques accolées (chacune min-width:100%). L'animation
 * translate la première de 0 à -100% ; la seconde, qui démarre juste
 * hors-champ à droite, vient occuper exactement sa place — boucle sans
 * saut ni vide, quelle que soit la largeur du viewport.
 */
.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee-scroll 26s linear infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
  transition: color var(--transition-fast);
}

.marquee__item img {
  height: 1.375rem;
  width: auto;
  color: currentColor;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--transition-fast);
}

.marquee__item:hover img {
  filter: grayscale(0) opacity(1);
}

.marquee__item:hover {
  color: var(--color-signal);
}

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