/* Announcement marquee bar */


/* ---------- ANNOUNCEMENT BAR (MARQUEE) ---------- */
.announce{
  background:var(--accent);color:#0b0b0a;
  overflow:hidden;position:relative;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.announce::before,
.announce::after{
  content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;
}
.announce::before{left:0;background:linear-gradient(90deg,var(--accent) 0%, rgba(212,255,62,0) 100%)}
.announce::after{right:0;background:linear-gradient(270deg,var(--accent) 0%, rgba(212,255,62,0) 100%)}

.announce-track{
  display:flex;align-items:center;gap:0;
  width:max-content;
  animation:marquee 40s linear infinite;
}
.announce:hover .announce-track{animation-play-state:paused}

.announce-item{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:9px 0;white-space:nowrap;
  display:flex;align-items:center;gap:14px;
}
.announce-item + .announce-item{margin-left:40px}
.announce-item::before{
  content:"◆";color:#0b0b0a;font-size:10px;opacity:.55;
}
.announce-item:first-child::before{display:none}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}