.ns-background-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ns-scrolling-bg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ns-row {
  height: 120px;
  overflow: hidden;
  position: relative;
}

.ns-track-wrapper {
  display: flex;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.ns-row.left .ns-track-wrapper { animation-name: scroll-left; }
.ns-row.right .ns-track-wrapper { animation-name: scroll-right; }

.ns-track-go-left,
.ns-track-go-right {
  display: flex;
  flex-shrink: 0;
  width: auto;
  gap: 10px;
}

.ns-img {
  flex: 0 0 auto;
  width: 120px; height: 120px;
  opacity: 0.3;
}

.ns-img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Fade transition for refresh */
.ns-fade { opacity: 0; transition: opacity 1s ease; }
.ns-fade.ns-fade-in { opacity: 1; }

/* Keyframes */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
@keyframes scroll-right {
  0%   { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}