/* ============================================================
   Hero category cards — auto-cycling highlight
   ------------------------------------------------------------
   Reimplements the Framer "category cards" interaction that died
   with the runtime: an accent progress bar fills along the bottom
   of the active card; when it completes the next card activates;
   loops endlessly. A dots row mirrors the active card. The active
   card also reveals its "N projects" subtext (fades up); inactive
   cards hide it (fades down, title drops). Hover/keyboard-focus a
   card to pause + focus it; click scrolls to its section.

   category-cards.js owns the state and injects .cc-progress; the
   active/inactive colours are applied inline by the JS (cards are
   inline-styled). This file styles the injected bar + focus ring.
   ============================================================ */

:root { --cc-accent: rgb(232, 80, 58); }

.cc-progress {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;            /* flush with the card's bottom edge */
  height: 3px;
  background: var(--cc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 2;
  /* the transform transition is toggled inline by the JS: eased on a
     hover/focus snap, none during the per-frame auto-fill */
}

/* keyboard affordance — !important so it beats the cards' inline outline:none */
[role="listitem"]:focus-visible {
  outline: 2px solid var(--cc-accent) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cc-progress,
  .cc-subtitle { transition: none !important; }
}