.announcement-marquee {
  --marquee-duration: 40s;
  width: 100%;
  height: 2rem;
  overflow: hidden;
  box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid rgba(7, 44, 153, 0.1);
  border-bottom-color: oklch(0.22 0.16 268 / 10%);
  color: #072c99;
  color: oklch(0.36 0.18 264);
  font-family: "Euclid Circular A", system-ui, -apple-system, sans-serif !important;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.announcement-marquee *,
.announcement-marquee *::before,
.announcement-marquee *::after {
  box-sizing: border-box;
  font-family: inherit !important;
}

.announcement-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
  animation: announcement-marquee-scroll var(--marquee-duration) linear infinite;
}

.announcement-marquee__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 0.35rem 2rem;
  white-space: nowrap;
}

.announcement-marquee__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.9rem;
  white-space: nowrap;
}

.announcement-marquee__text,
.announcement-marquee__separator {
  flex: 0 0 auto;
  white-space: nowrap;
}

.announcement-marquee__separator {
  opacity: 0.7;
  font-size: 0.9rem;
}

@keyframes announcement-marquee-scroll {
  from {
    transform: translateX(0);
  }

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

@media (prefers-reduced-motion: reduce) {
  .announcement-marquee__track {
    animation: none;
    transform: translateX(0);
    will-change: auto;
  }
}

.marquee-demo {
  margin: 0;
  overflow-x: hidden;
}