/* Scrolling message shortcode — horizontal / vertical / ticker layouts */

.m-scroll-msg {
  width: 100%;
  overflow: hidden;
  line-height: 1.4;
}

.m-scroll-msg__viewport {
  width: 100%;
}

.m-scroll-msg__track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
}

.m-scroll-msg__track--ticker {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.m-scroll-msg__track--vertical {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.m-scroll-msg__item {
  display: inline-block;
}

.m-scroll-msg__link {
  color: inherit;
  text-decoration: none;
}

.m-scroll-msg__link:hover,
.m-scroll-msg__link:focus-visible {
  text-decoration: underline;
}

.m-scroll-msg__track--animate-x {
  animation: m-scroll-x var(--scroll-duration, 20s) linear infinite;
}

.m-scroll-msg__track--animate-y {
  animation: m-scroll-y var(--scroll-duration, 20s) linear infinite;
}

@keyframes m-scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--scroll-distance, 50%))); }
}

@keyframes m-scroll-y {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--scroll-distance, 50%))); }
}

.m-scroll-msg--static .m-scroll-msg__track {
  flex-wrap: wrap;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .m-scroll-msg__track--animate-x,
  .m-scroll-msg__track--animate-y {
    animation: none !important;
  }
  .m-scroll-msg__track {
    flex-wrap: wrap;
  }
}