:root { --ucr-news-scroll-duration: 120s; }

.ucr-newsbar {
  position: sticky;
  top: 0;
  z-index: 51;
  height: 64px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #000;
  border-block: 1px solid #1b1b1b;
  color: #ede7d8;
}

.ucr-newsbar + div > header {
  top: 64px;
}

.ucr-newsbar__label {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  width: 64px;
  justify-content: center;
  background: #000;
  color: var(--accent, #ff2a1f);
}

.ucr-newsbar__label svg {
  width: 22px;
  height: 22px;
}

.ucr-newsbar__signal-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ucr-signal-pulse 1.35s ease-out infinite;
}

.ucr-newsbar__signal-ring:nth-of-type(2) { animation-delay: .45s; }
.ucr-newsbar__signal-ring:nth-of-type(3) { animation-delay: .9s; }

@keyframes ucr-signal-pulse {
  0% { opacity: 1; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.55); }
}

.ucr-newsbar__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ucr-news-scroll var(--ucr-news-scroll-duration) linear infinite;
  animation-delay: var(--ucr-news-scroll-delay, 0s);
}

.ucr-newsbar:hover .ucr-newsbar__track {
  animation-play-state: paused;
}

.ucr-newsbar__group {
  display: flex;
  align-items: center;
  flex: none;
}

.ucr-newsbar__group a {
  padding: 0 32px;
  color: #ede7d8;
  cursor: pointer;
  font: 18px/1.333 var(--font-body, 'Lora', Georgia, serif);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
}

.ucr-newsbar__group a::after {
  content: '◆';
  margin-left: 32px;
  color: #ff2a1f;
  font-size: 12px;
}

.ucr-newsbar__group a:hover {
  color: #ff2a1f;
}

@keyframes ucr-news-scroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
  :root { --ucr-news-scroll-duration: 132s; }
  .ucr-newsbar { height: 64px; }
  .ucr-newsbar + div > header { top: 64px; }
  .ucr-newsbar__label { width: 56px; }
  .ucr-newsbar__label svg { width: 20px; height: 20px; }
  .ucr-newsbar__group a { padding-inline: 32px; font-size: 18px; }
  .ucr-newsbar__group a::after { margin-left: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ucr-newsbar__track { animation: none; transform: translateX(-12%); }
  .ucr-newsbar__signal-ring { animation: none; opacity: .7; transform: none; }
}
