.y-slider-wrapper{
  overflow:hidden;
  width:100%;
  /* Safe padding so random vertical offsets don't get clipped */
  padding-top: calc(15px + var(--y-rand, 0px));
  padding-bottom: calc(15px + var(--y-rand, 0px));
}

.y-slider-track{
  display:flex;
  width:max-content;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}

/* directions */
.y-slider-track.y-dir-rtl{animation-name:yScrollRTL;}
.y-slider-track.y-dir-ltr{animation-name:yScrollLTR;}

.y-slider-box{
  flex:0 0 auto;
  text-align:center;
  white-space:normal;
  box-shadow: var(--y-shadow-x,0px) var(--y-shadow-y,4px) 10px rgba(0,0,0,0.08);
}

/* keep lines centered even if box wraps */
.y-line1,.y-line2{display:block; text-align:center;}

@keyframes yScrollRTL{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes yScrollLTR{from{transform:translateX(-50%);}to{transform:translateX(0);}}


/* Fade edges (uses CSS mask, independent of background) */
.y-slider-wrapper[data-fade="yes"]{
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--y-fade, 40px),
    #000 calc(100% - var(--y-fade, 40px)),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--y-fade, 40px),
    #000 calc(100% - var(--y-fade, 40px)),
    transparent 100%);
}