.bf-ticker {
  --ticker-height: 56px;
  --ticker-speed: 42s;
  --ticker-gap: 2.75rem;
  --ticker-fade: 48px;
  --ticker-border: rgba(15, 23, 42, 0.07);

  background: var(--ticker-bg);
  color: var(--ticker-fg);
  border-block: 1px solid var(--ticker-border);
  position: relative;
  font-feature-settings: "liga" 1, "kern" 1;
}

body.dark-mode .bf-ticker {
  --ticker-border: rgba(255, 255, 255, 0.08);
}

.bf-ticker__mask {
  height: var(--ticker-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--ticker-fade),
    black calc(100% - var(--ticker-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--ticker-fade),
    black calc(100% - var(--ticker-fade)),
    transparent 100%
  );
}

.bf-ticker__wrap {
  display: flex;
  flex-wrap: nowrap;
  animation: bf-marquee var(--ticker-speed) linear infinite;
  will-change: transform;
}

.bf-ticker__track {
  display: flex;
  gap: var(--ticker-gap);
  list-style: none;
  margin: 0;
  padding: 0 1rem;
  white-space: nowrap;
  align-items: center;
  flex: 0 0 auto;
}

.bf-ticker__track li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: clamp(14px, 2.2vw, 18px);
}

.bf-ticker:hover .bf-ticker__wrap,
.bf-ticker:focus-within .bf-ticker__wrap {
  animation-play-state: paused;
}

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

@media (max-width: 575.98px) {
  .bf-ticker {
    --ticker-height: 48px;
    --ticker-gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-ticker__wrap {
    animation: none;
  }
  .bf-ticker__mask {
    overflow-x: auto;
  }
}