/* ---------- Site-wide Ticker ---------- */
/* Spec: docs/superpowers/specs/2026-04-19-ticker-design.md */
.ticker {
  position: relative;
  z-index: 999;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--white, #fff);
  color: var(--charcoal, #000);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Articulat CF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.005em;
}

.ticker__track {
  display: inline-flex;
  animation: ticker-scroll 90s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__item {
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--charcoal, #000);
  text-decoration: none;
}
.ticker__item--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ticker__item--dim { opacity: 0.5; }
.ticker__sep {
  opacity: 0.2;
  padding: 0 4px;
  user-select: none;
}
.ticker__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay, #7A6B5D);
  box-shadow: 0 0 0 0 rgba(122, 107, 93, 0.5);
  animation: ticker-pulse 1.8s ease-out infinite;
}
@keyframes ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(122, 107, 93, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(122, 107, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(122, 107, 93, 0); }
}
.ticker__item--link:focus-visible {
  outline: 2px solid var(--charcoal, #000);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobile */
@media (max-width: 768px) {
  .ticker { font-size: 11px; }
  .ticker__item { padding: 0 22px; }
}

/* Reduced-motion fallback: disable scroll; cycle one item at a time with CSS fade */
@media (prefers-reduced-motion: reduce) {
  .ticker { justify-content: center; }
  .ticker__track { animation: none; display: none; }
  .ticker__static {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: ticker-fade 6s ease-in-out infinite;
  }
}
@keyframes ticker-fade {
  0%, 15%   { opacity: 0; }
  25%, 75%  { opacity: 1; }
  85%, 100% { opacity: 0; }
}

/* Keep long announcements inside narrow screens in reduced-motion mode. */
.ticker__static{max-width:100%;min-width:0}
.ticker__static .ticker__item{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
