/* ==========================================================
   FigBuild 2026 badge – "2026" pill slides out and back
   ========================================================== */

/* ---------- Tokens ---------- */
.figbuild-badge {
  --fb-ink: #000;
  --fb-paper: #fff;
  --fb-size: 1.5rem;
  --fb-pad-block: 0.2rem;
  --fb-pad-inline: 0.5rem;
  --fb-gap: 0.125rem;
  --fb-reach: 6rem;            /* wide enough to fit the pill */
  --fb-cycle: 3s;
  --fb-ease: cubic-bezier(0.7, 0, 0.2, 1);

  display: inline-flex;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-size: var(--fb-size);
  line-height: 1;
}

/* ---------- "FigBuild" box (sits on top) ---------- */
.figbuild-name {
  position: relative;
  z-index: 1;
  background: var(--fb-ink);
  color: var(--fb-paper);
  padding-block: var(--fb-pad-block);
  padding-inline: var(--fb-pad-inline);
}

/* ---------- Window that opens to make room ---------- */
.figbuild-window {
  display: inline-block;
  overflow: hidden;
  animation: figbuild-open var(--fb-cycle) var(--fb-ease) infinite;
}

/* ---------- "2026" pill ---------- */
.figbuild-year {
  display: inline-block;
  margin-inline-start: var(--fb-gap);
  background: var(--fb-ink);
  color: var(--fb-paper);
  padding-block: var(--fb-pad-block);
  padding-inline: var(--fb-pad-inline);
  border-radius: var(--fb-size);
  animation: figbuild-slide var(--fb-cycle) var(--fb-ease) infinite;
}

/* ---------- Motion: tucked, slide out, hold, tuck back ---------- */
@keyframes figbuild-open {
  0%, 10%, 90%, 100% { max-inline-size: 0; }
  35%, 65%           { max-inline-size: var(--fb-reach); }
}

@keyframes figbuild-slide {
  0%, 10%, 90%, 100% { transform: translateX(-100%); }
  35%, 65%           { transform: translateX(0); }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .figbuild-window,
  .figbuild-year { animation: none; }
}