/* ═══════════════════════════════════════════════════════════════ */
/* UNPOP — Scrolling Banner                                        */
/* ═══════════════════════════════════════════════════════════════ */

.unpop-banner-wrap {
  width: 100%;
  overflow: hidden;
  background-color: #FB923C;
  display: flex;
  align-items: center;
  position: relative;
}

.unpop-banner-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: var(--gap, 40px);
  animation: var(--direction, scrollLeft) var(--duration, 20s) linear infinite;
  will-change: transform;
}

.unpop-banner-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  line-height: 1;
}

.unpop-banner-item img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.unpop-banner-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
}

/* Animation LEFT : utilise scrollWidth réel */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - var(--gap, 40px)));
  }
}

/* Animation RIGHT : START décalé au scrollWidth réel, revient à 0 */
@keyframes scrollRight {
  0% {
    transform: translateX(calc(-100% - var(--gap, 40px)));
  }
  100% {
    transform: translateX(0);
  }
}

.unpop-banner-inner.unpop-banner-pausable {
  animation-play-state: running;
}

.unpop-banner-inner.unpop-banner-pausable:hover {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
  .unpop-banner-item {
    font-size: 18px;
  }

  .unpop-banner-inner {
    gap: var(--gap, 20px);
  }
}