/*!
 * marquee.css — continuous marquee with optional drag.
 * Layout, spacing and motion only. Typography and colour come from the
 * widget controls.
 */

/* Shell */
.mq{
  position:relative;
  width:100%;
  overflow:hidden;
  --mq-gap:40px;
  --mq-fade:80px;
}

.mq--fade{
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,
    #000 var(--mq-fade),
    #000 calc(100% - var(--mq-fade)),
    transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0,
    #000 var(--mq-fade),
    #000 calc(100% - var(--mq-fade)),
    transparent 100%);
}

/* Drag layer — carries the drag offset, so it never fights the
   animation running on the track underneath */
.mq__drag{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}

.mq--drag{
  cursor:grab;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}

.mq--drag.is-dragging{ cursor:grabbing; }
.mq--drag .mq__item{ -webkit-user-drag:none; }

/* Track */
.mq__track{
  display:flex;
  width:max-content;
  flex-wrap:nowrap;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}

.mq.is-live .mq__track{
  animation:mq-scroll var(--mq-dur,20s) linear infinite;
  will-change:transform;
}

.mq.mq--right.is-live .mq__track{ animation-direction:reverse; }

.mq.is-paused .mq__track,
.mq.is-dragging .mq__track,
.mq.mq--hover-pause:hover .mq__track,
.mq.mq--hover-pause:focus-within .mq__track{ animation-play-state:paused; }

@keyframes mq-scroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(var(--mq-shift,0px) * -1),0,0); }
}

/* Items */
.mq__group{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:var(--mq-gap);
  padding-right:var(--mq-gap);
}

.mq__item{
  flex:0 0 auto;
  margin:0;
  white-space:nowrap;
}

.mq__sep{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.mq__sep svg{
  display:block;
  width:1em;
  height:1em;
  fill:currentColor;
}

.mq__sep i{
  display:block;
  font-size:inherit;
}

/* Opt-outs */
@media (prefers-reduced-motion:reduce){
  .mq.is-live .mq__track{ animation:none; will-change:auto; }
  .mq__track{ flex-wrap:wrap; }
}