/* Container & theming via CSS variables */
.osl-wrap {
  --osl-height: 64px;
  --osl-gap: 4rem;
  --osl-speed: 50s !important;
  --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);
  width: max-content; /* let track width equal its full content so -50% covers one full set */
  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%); }
}

/* Mobile: speed up scroll while keeping full logo loop */
@media (max-width: 640px) {
  .osl-wrap {
    /* Override inline --osl-speed from shortcode on small screens */
    --osl-speed: 16s !important;
  }
  .osl-track {
    /* Force duration so inline var cannot override */
    animation-duration: 32s !important;
  }
}

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