.live-track {
  --duration: 2.8s;
  --font-size: 200px;
  --text-color: #ffffff;
  --cycle-spacing: 400px;
  --backdrop-color: #1a0d1a;
  --glow-color: #ff0073;
  --glow-radius: 0px;
  --cycle-offset: -360px;
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation-duration: var(--duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.live-track[data-direction="left"] {
  animation-name: tool-left;
}

.live-track[data-direction="right"] {
  animation-name: tool-right;
}

.live-track[data-direction="topToBottom"],
.live-track[data-direction="bottomToTop"] {
  top: 0;
  left: 50%;
  flex-direction: column;
  align-items: center;
}

.live-track[data-direction="topToBottom"] {
  animation-name: tool-top-bottom;
}

.live-track[data-direction="bottomToTop"] {
  animation-name: tool-bottom-top;
}

.track-content {
  display: inline-flex;
  align-items: center;
  gap: max(18px, calc(var(--font-size) * 0.28));
  margin-right: var(--cycle-spacing);
  white-space: nowrap;
  color: var(--text-color);
  font-size: var(--font-size);
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 0 var(--glow-radius) var(--glow-color),
    0 4px 14px rgba(0, 0, 0, 0.42);
}

.live-track[data-direction="topToBottom"] .track-content,
.live-track[data-direction="bottomToTop"] .track-content {
  margin-right: 0;
  margin-bottom: var(--cycle-spacing);
}

.live-track img {
  width: auto;
  height: max(82px, calc(var(--font-size) * 1.35));
  max-height: 42vh;
  border-radius: var(--radius, 14px);
  object-fit: contain;
}

.mirrored {
  transform: scaleX(-1);
}

.marquee-text {
  display: inline-block;
}

.text-backdrop {
  padding: calc(var(--font-size) * 0.08) calc(var(--font-size) * 0.18);
  border-radius: max(10px, calc(var(--font-size) * 0.12));
  background: color-mix(in srgb, var(--backdrop-color) 86%, transparent);
}

@keyframes tool-left {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(var(--cycle-offset), -50%, 0); }
}

@keyframes tool-right {
  from { transform: translate3d(var(--cycle-offset), -50%, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

@keyframes tool-top-bottom {
  from { transform: translate3d(-50%, var(--cycle-offset), 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes tool-bottom-top {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(-50%, var(--cycle-offset), 0); }
}