/* тонкие линии сверху и снизу */
.marquee-modern-line{
  position:relative;
  z-index:3;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(79,124,255,.22) 15%,
    rgba(255,255,255,.08) 50%,
    rgba(79,124,255,.22) 85%,
    transparent
  );
}

/* сама бегущая лента */
.marquee-modern-track{
  display:flex;
  width:max-content;
  padding:24px 0;
  animation:marqueeModern 34s linear infinite;
  will-change:transform;
}

/* группы нужны для бесконечной прокрутки */
.marquee-modern-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

/* отдельные слова */
.marquee-modern-group span{
  position:relative;
  display:flex;
  align-items:center;
  white-space:nowrap;

  padding:0 38px;

  color:rgba(247,248,250,.62);

  font-size:13px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;

  transition:
    color .3s ease,
    text-shadow .3s ease,
    transform .3s ease;
}

/* точка между словами */
.marquee-modern-group span::after{
  content:"";
  width:5px;
  height:5px;
  flex-shrink:0;

  margin-left:38px;

  border-radius:50%;
  background:#4F7CFF;

  box-shadow:
    0 0 0 5px rgba(79,124,255,.05),
    0 0 18px rgba(79,124,255,.45);
}

/* лёгкое оживление при наведении */
.marquee-modern-group span:hover{
  color:#fff;
  text-shadow:0 0 24px rgba(79,124,255,.3);
  transform:translateY(-1px);
}

/* мягкие затемнения по краям */
.marquee-modern::before,
.marquee-modern::after{
  content:"";
  position:absolute;
  z-index:2;
  top:1px;
  bottom:1px;
  width:130px;
  pointer-events:none;
}

.marquee-modern::before{
  left:0;
  background:linear-gradient(
    90deg,
    #0B0F16 0%,
    rgba(11,15,22,.9) 30%,
    transparent 100%
  );
}

.marquee-modern::after{
  right:0;
  background:linear-gradient(
    -90deg,
    #0B0F16 0%,
    rgba(11,15,22,.9) 30%,
    transparent 100%
  );
}

/* движение */
@keyframes marqueeModern{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

/* пауза при наведении */
.marquee-modern:hover .marquee-modern-track{
  animation-play-state:paused;
}

/* mobile */
@media(max-width:767px){

  .marquee-modern-track{
    padding:19px 0;
    animation-duration:27s;
  }

  .marquee-modern-group span{
    padding:0 24px;
    font-size:11px;
    letter-spacing:.11em;
  }

  .marquee-modern-group span::after{
    margin-left:24px;
    width:4px;
    height:4px;
  }

  .marquee-modern::before,
  .marquee-modern::after{
    width:55px;
  }
}

/* accessibility */
@media(prefers-reduced-motion:reduce){
  .marquee-modern-track{
    animation:none;
  }
}