.lbs{
  position:relative;
  width:100%;

  /* Resolve runtime variables from per-strip “set” values.
     We use distinct names to avoid self-referential var() issues on mobile overrides. */
  --lbs-height:   var(--lbs-height-set, 66px);
  --lbs-gap:      var(--lbs-gap-set, 42px);
  --lbs-speed:    var(--lbs-speed-set, 22s);
  --lbs-img-max:  var(--lbs-img-max-set, 200px);
  --lbs-edge-w:   var(--lbs-edge-w-set, clamp(18px, 6vw, 78px));

  --lbs-edge-mask: linear-gradient(
    to right,
    transparent 0,
    #000 var(--lbs-edge-w),
    #000 calc(100% - var(--lbs-edge-w)),
    transparent 100%
  );
}
.lbs__inner{ width:100%; }
.lbs--boxed .lbs__inner{
  max-width:1240px; margin:0 auto; padding:0 16px;
}

.lbs__track-wrap{
  position:relative;
  overflow:hidden;

  /* Colour-agnostic fade OUT of the content itself */
  -webkit-mask-image: var(--lbs-edge-mask);
  mask-image: var(--lbs-edge-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.lbs-edge--none .lbs__track-wrap{
  -webkit-mask-image:none;
  mask-image:none;
}

.lbs__track{
  display:flex;
  align-items:center;
  gap: var(--lbs-gap);
  list-style:none;
  padding:0;
  margin:0;
  min-height: var(--lbs-height);
  will-change: transform;
}

.lbs__item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  min-height: var(--lbs-height);
}

/* Media sizing */
.lbs__img,
.lbs__svg{
  display:block;
  height: calc(var(--lbs-height) * 0.55);
  width:auto;
  max-width: var(--lbs-img-max);
  opacity:.95;
  transition: opacity .2s ease, filter .2s ease;
}

.lbs__item--text{ padding:0 4px; }
.lbs__text{
  display:inline-block;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height:1;
  white-space:nowrap;
  opacity:.95;
  letter-spacing:.01em;
}

.lbs__link{ display:block; text-decoration:none; }

/* SVG overlay reveal: apply a colour overlay that fades away on hover to reveal original icon colours. */
.lbs__media{ position:relative; display:block; }
.lbs__media--svg{ line-height:0; }

/* Overlay copy is recoloured using currentColor; original keeps its native fills/strokes. */
.lbs__svg--cc, .lbs__svg--cc *{ fill: currentColor; stroke: currentColor; }

.lbs__svg-overlay{
  position:absolute;
  inset:0;
  color: var(--lbs-overlay-color, currentColor);
  opacity:1;
  transition: opacity var(--lbs-overlay-ms, 220ms) ease;
  pointer-events:none;
}

.lbs--overlay .lbs__item:hover .lbs__svg-overlay{ opacity:0; }

/* Caption layout (Image & Text) */
.lbs__content{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.lbs__caption{ font-size: 12px; line-height:1.1; white-space:nowrap; opacity:.9; }

/* If overlay mode is enabled, keep raster images as-is */
.lbs__img{ filter:none; }

.lbs--static .lbs__track-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lbs--static .lbs__track-wrap::-webkit-scrollbar{ display:none; }

/* Only pause-on-hover for real hover devices (prevents “stuck paused” on touch). */
@media (hover: hover) and (pointer: fine){
  .lbs--scroll:hover .lbs__track{ animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce){
  .lbs--scroll .lbs__track{ animation:none !important; transform:none !important; }
}

/* Optional blur layers (still colour-agnostic; no tint) */
.lbs-edge--blur::before,
.lbs-edge--blur::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: var(--lbs-edge-w);
  z-index:5;
  pointer-events:none;

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
  mask-image: linear-gradient(to right, #000 70%, transparent);
}
.lbs-edge--blur::before{ left:0; }
.lbs-edge--blur::after{ right:0; transform: scaleX(-1); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .lbs-edge--blur::before, .lbs-edge--blur::after{ display:none; }
}

/* Fade-only mode: no blur overlays needed */
.lbs-edge--fade::before,
.lbs-edge--fade::after{ display:none; }

@media (max-width: 768px){
  .lbs{
    --lbs-height:   var(--lbs-height-m-set,  var(--lbs-height-set, 66px));
    --lbs-gap:      var(--lbs-gap-m-set,     var(--lbs-gap-set, 42px));
    --lbs-speed:    var(--lbs-speed-m-set,   var(--lbs-speed-set, 22s));
    --lbs-img-max:  var(--lbs-img-max-m-set, var(--lbs-img-max-set, 200px));
    --lbs-edge-w:   var(--lbs-edge-w-m-set,  var(--lbs-edge-w-set, 64px));
  }
}