/* Site-wide "coming soon" ticker. The track holds the phrase set 8 times and
   scrolls by half, so each half (about 3,800px) is wider than any screen and
   the loop never shows a gap. Loaded by every page: new-design pages via
   the base layout, legacy pages via the eleventy transform. The text lives in
   _includes/partials/ticker.html (change it there on launch day). */
@import url("fonts.css");

.ticker {
  --ticker-bg: #ffcd75;
  --ticker-ink: #40334c;
  position: relative;
  z-index: 50;
  overflow: hidden;
  background: var(--ticker-bg);
  box-shadow: inset 0 -3px 0 #b77f35;
}
.ticker-link {
  display: block;
  padding: 7px 0 9px;
  color: var(--ticker-ink);
  text-decoration: none;
}
.ticker-link:focus-visible { outline: 3px solid #40334c; outline-offset: -5px; }
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-left: 22px;
  white-space: nowrap;
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  animation: ticker-scroll 76s linear infinite;   /* 4 phrase sets per half: same pace as before */
}
/* Between phrases: the game's small Sigil (SigilMini, 10px) at exactly 2x. */
.ticker-track i {
  width: 20px; height: 20px; flex: none;
  background: url("../assets/icons/sigil-mini.png") center / 20px 20px no-repeat;
  image-rendering: pixelated;
}
.ticker:hover .ticker-track,
.ticker-link:focus-visible .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}
.ticker .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}