/* BitVibe Labs shared brand-kit — repo-rotator.
   One repo card at a time: it slides in from the right, holds centered long
   enough to read the FULL description, then slides out to the left as the next
   enters. Replaces the continuous horizontal repo-marquee across products so a
   visitor can actually read each description as it passes.

   Markup contract (server- or JS-rendered):
     <div class="repo-rotator" aria-label="…">        (add data-manual if JS-populated)
       <a class="repo-chip is-active" href="…">
         <span class="repo-chip-title">owner/<strong>repo</strong></span>
         <span class="repo-chip-desc">…full description…</span>
       </a>
       <a class="repo-chip" …>…</a>                    (the rest, NOT doubled)
     </div>
   The FIRST chip MUST carry `is-active` so a no-JS / reduced-motion visitor
   still sees one card. repo-rotator.js drives the rotation (discrete class
   toggles on a timer + these CSS transitions — no per-frame JS).

   Uses the shared tokens every product defines (--bg, --bg-elevated,
   --border(-strong), --radius-lg/md, --primary, --fg(-muted), --font-mono/sans,
   --ease-out, --duration-fast, --space-5); fallbacks keep it safe standalone. */

.repo-rotator {
  position: relative;
  overflow: hidden;
  height: 132px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5, 32px);
}

/* Every card is absolutely stacked + centered; only the active one is shown. */
.repo-rotator .repo-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: min(560px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  /* resting = centered but hidden */
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 620ms var(--ease-out, ease),
              opacity 460ms var(--ease-out, ease),
              border-color var(--duration-fast, 150ms) ease,
              background var(--duration-fast, 150ms) ease;
}
.repo-rotator .repo-chip.is-active {
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* incoming card start-state: nudged right + transparent, jump (no anim) here */
.repo-rotator .repo-chip.is-entering {
  transform: translate(calc(-50% + 46px), -50%);
  opacity: 0;
  visibility: visible;
  transition: none;
}
/* outgoing card slides left as it fades */
.repo-rotator .repo-chip.is-leaving {
  transform: translate(calc(-50% - 46px), -50%);
  opacity: 0;
  visibility: visible;
}
.repo-rotator .repo-chip:hover {
  border-color: var(--primary);
  background: var(--bg-elevated-hover, var(--bg-elevated));
}
.repo-rotator .repo-chip-title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repo-rotator .repo-chip-title strong { color: var(--fg); font-weight: 500; }
.repo-rotator .repo-chip-desc {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.45;
  font-family: var(--font-sans);
  /* full description, up to 3 lines (covers ~virtually every summary) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Respect reduced-motion: no lateral slide, just a gentle fade. The driver
   also stops auto-advancing, so a reduced-motion visitor sees the first card. */
@media (prefers-reduced-motion: reduce) {
  .repo-rotator .repo-chip {
    transition: opacity 200ms linear;
  }
  .repo-rotator .repo-chip.is-entering,
  .repo-rotator .repo-chip.is-leaving {
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 540px) {
  .repo-rotator { height: 156px; }
  .repo-rotator .repo-chip { width: calc(100% - 24px); }
}