/* Container & theming via CSS variables */
.osl-wrap{
  --osl-height: 64px;
  --osl-gap: 4rem;
  --osl-speed: 25s;
  --osl-bg: #0c1716;
  --osl-fade: 120px;
  --osl-grayscale: 1;
  --osl-brightness: 0.85;

  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--osl-bg);
  padding: 1.25rem 0;
  isolation: isolate;
}

/* Left/right fades */
.osl-wrap::before,
.osl-wrap::after{
  content:"";
  position:absolute;
  top:0;
  width:var(--osl-fade);
  height:100%;
  pointer-events:none;
  z-index:2;
}
.osl-wrap::before{
  left:0;
  background: linear-gradient(to right, var(--osl-bg) 0%, rgba(0,0,0,0) 100%);
}
.osl-wrap::after{
  right:0;
  background: linear-gradient(to left, var(--osl-bg) 0%, rgba(0,0,0,0) 100%);
}

/* Mask + track */
.osl-mask{ overflow:hidden; }
.osl-track{
  display:flex;
  align-items:center;
  gap: var(--osl-gap);
  will-change: transform;
  animation: osl-scroll var(--osl-speed) linear infinite;
}

/* Pause on hover (optional) */
.osl-wrap[data-pause-on-hover="true"]:hover .osl-track{
  animation-play-state: paused;
}

/* Each logo */
.osl-item{ flex: 0 0 auto; }
.osl-logo{
  height: var(--osl-height);
  width: auto;
  display:block;
  filter: grayscale(var(--osl-grayscale)) brightness(var(--osl-brightness));
  transition: filter .25s ease, transform .25s ease;
  transform: translateZ(0); /* GPU hint */
}
.osl-link:hover .osl-logo,
.osl-item:hover .osl-logo{
  filter: none;
  transform: scale(1.03);
}

/* Seamless loop: translate by 50% after duplicating track contents */
@keyframes osl-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .osl-track{ animation: none; }
}