/* BlackStar Devs — home page news ticker
   Version 1.0.0 (2026-11-03)
   Uses the colour and font tokens defined in site.css. */

.ticker-wrap { padding-top: 16px; }
.ticker[hidden] { display: none; }
.ticker {
  display: flex; align-items: stretch;
  min-height: 44px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font: 14px/1.4 var(--f-mono);
}
.ticker-label {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  background: var(--bg-band);
  color: var(--accent);
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.ticker-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ticker-viewport {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ticker-track {
  display: flex; flex: none; width: max-content;
  animation: ticker-scroll var(--ticker-duration, 40s) linear infinite;
}
.ticker-set { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.ticker-item { display: flex; align-items: center; white-space: nowrap; color: var(--text-2); }
.ticker-item::after { content: "\2726"; color: var(--accent); margin: 0 22px; font-size: 11px; }
.ticker-item a {
  color: var(--text); padding-block: 12px;
  text-decoration: underline dotted var(--line-strong); text-underline-offset: 4px;
}
.ticker-item a:hover, .ticker-item a:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }

/* Pause on hover, on keyboard focus, or with the pause button */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.is-paused .ticker-track { animation-play-state: paused; }

.ticker-toggle {
  flex: none; width: 44px; border: 0; border-left: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ticker-toggle:hover { color: var(--text); background: #1A2029; }
.ticker-toggle svg { width: 16px; height: 16px; }
.ticker-toggle .i-play { display: none; }
.ticker.is-paused .ticker-toggle .i-play { display: block; }
.ticker.is-paused .ticker-toggle .i-pause { display: none; }

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

/* Reduced motion: no scrolling; each message on its own line, wrapping */
@media (prefers-reduced-motion: reduce) {
  .ticker-viewport { -webkit-mask-image: none; mask-image: none; padding: 8px 14px; }
  .ticker-track { animation: none; width: auto; flex: 1; min-width: 0; }
  .ticker-set { flex: 1 1 auto; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
  .ticker-set[aria-hidden="true"], .ticker-item[aria-hidden="true"] { display: none; }
  .ticker-item { white-space: normal; }
  .ticker-item::after { content: none; }
  .ticker-item a { padding-block: 4px; }
  .ticker-toggle { display: none; }
}

@media (max-width: 560px) {
  .ticker-label .text { display: none; }
  .ticker-label { padding: 0 12px; }
  .ticker { font-size: 13px; }
}