/* The announcement banner (homepage). Markup: src/lib/site-announce.ts. Sits under the sticky menu and scrolls away. */
.announce{
  display:block; position:relative; z-index:190; overflow:hidden; text-decoration:none;
  background:linear-gradient(90deg, #0d1117 0%, #141a23 50%, #0d1117 100%);
  color:rgba(244,244,244,0.86); font-family:var(--font, 'Mozaic Geo', 'Figtree', sans-serif);
  font-size:17px; font-weight:500; line-height:1.4;
  border-bottom:1px solid rgba(244,244,244,0.08);
}
/* a slow ember sheen drifts across; hover brightens it */
.announce::before{
  content:''; position:absolute; top:0; bottom:0; width:38%; left:-40%; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(253,100,32,0.16), transparent);
  animation:announceSheen 9s ease-in-out infinite;
}
@keyframes announceSheen{ 0%{ left:-40%; } 55%,100%{ left:110%; } }
.announce-inner{
  position:relative; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 32px; max-width:1440px; margin:0 auto;
}
.announce .announce-tag{
  display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; column-gap:9px; flex-shrink:0;
  font-size:16px; font-weight:700; color:#ff8a52; letter-spacing:0.01em;
}
.announce .announce-tag::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#fd6420;
  box-shadow:0 0 0 0 rgba(253,100,32,0.6); animation:announcePulse 2.4s ease-out infinite;
}
@keyframes announcePulse{ 0%{ box-shadow:0 0 0 0 rgba(253,100,32,0.55); } 70%,100%{ box-shadow:0 0 0 8px rgba(253,100,32,0); } }
.announce .announce-local{ color:rgba(244,244,244,0.72); font-weight:500; }
.announce .announce-local[hidden]{ display:none; }
.announce .announce-sep{ width:1px; height:14px; background:rgba(244,244,244,0.22); flex-shrink:0; }
.announce .announce-txt{ text-wrap:pretty; color:rgba(244,244,244,0.9); }
.announce .announce-cta{
  flex-shrink:0; font-weight:700; color:#f4f4f4; display:inline-flex; align-items:center; gap:6px;
  padding-bottom:1px; background:linear-gradient(#fd6420, #fd6420) 0 100% / 0% 1px no-repeat;
  transition:background-size .3s ease, color .2s ease;
}
.announce:hover .announce-cta{ color:#ff8a52; background-size:100% 1px; }
.announce .announce-arrow{ transition:transform .2s ease; }
.announce:hover .announce-arrow{ transform:translateX(3px); }
.announce:focus-visible{ outline:3px solid #e95a16; outline-offset:-3px; }
@media (prefers-reduced-motion: reduce){ .announce::before, .announce .announce-tag::before{ animation:none; } }
/* laptops and smaller: tag on its own line, the text (and the button, while there's room) on the line below */
@media (max-width: 1180px){
  .announce-inner{ flex-wrap:wrap; row-gap:2px; padding:8px 24px; text-align:center; }
  .announce .announce-tag{ flex-basis:100%; justify-content:center; }
  .announce .announce-tag + .announce-sep{ display:none; }
}
@media (max-width: 900px){
  .announce .announce-cta, .announce .announce-txt + .announce-sep{ display:none; }
  .announce .announce-txt{ font-size:16px; }
}
@media (max-width: 600px){
  .announce-inner{ padding:8px 16px; }
  .announce .announce-tag{ font-size:14px; }
  .announce .announce-txt{ font-size:15px; }
}