/* Sakhi — visible-intelligence specialist lanes (2026-08-12)
   Finder / Thinker / Maker / Keeper — meaningful, calm motion on the
   Command Center's live job cards. Purely additive: does not touch
   sakhi.css (compiled Tailwind bundle) and degrades to the existing
   .cc-pulse badge-only animation if this file fails to load.

   Design intent: calm, premium, alive — not a generic spinner grid.
   Each lane's motion should read as "what that specialist is actually
   doing" at a glance:
     Finder  — a soft horizontal scan sweep (going out and looking)
     Thinker — settling/connecting dots (making sense of things)
     Maker   — a bottom-up assembling bar (building something)
     Keeper  — a slow, steady watch-pulse (quietly keeping watch)

   All motion respects prefers-reduced-motion and costs nothing when the
   card leaves the screen (pure CSS, no JS timers, no canvas). */

.cc-job {
  position: relative;
  overflow: hidden;
}

.cc-lane-motion {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  pointer-events: none;
  display: block;
  border-radius: 0 0 var(--r-lg, 18px) var(--r-lg, 18px);
  overflow: hidden;
}

/* ---- Finder: a soft scan sweep, like a beam passing over the card ---- */
.cc-lane-finder .cc-lane-motion {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--primary) 55%, transparent) 50%,
    transparent 100%
  );
  background-size: 55% 100%;
  animation: cc-finder-sweep 2.6s ease-in-out infinite;
}
@keyframes cc-finder-sweep {
  0%   { background-position: -60% 0; opacity: .35; }
  50%  { background-position: 130% 0; opacity: .85; }
  100% { background-position: -60% 0; opacity: .35; }
}

/* ---- Thinker: settling connection dots — quick then calm, like a
   confidence score arriving ---- */
.cc-lane-thinker .cc-lane-motion {
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--marigold) 75%, transparent) 1.4px,
    transparent 1.6px
  );
  background-size: 10px 3px;
  background-repeat: repeat-x;
  animation: cc-thinker-settle 1.8s cubic-bezier(.32, .72, 0, 1) infinite;
}
@keyframes cc-thinker-settle {
  0%   { background-position: 0 0; opacity: .3; }
  40%  { opacity: .9; }
  100% { background-position: 22px 0; opacity: .3; }
}

/* ---- Maker: a bottom-up assembling bar — output being built ---- */
.cc-lane-maker .cc-lane-motion {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--leaf) 70%, transparent),
    color-mix(in srgb, var(--leaf) 25%, transparent)
  );
  background-size: 200% 100%;
  animation: cc-maker-build 2.2s ease-in-out infinite;
}
@keyframes cc-maker-build {
  0%   { background-position: 100% 0; opacity: .4; }
  50%  { background-position: 0 0;   opacity: .9; }
  100% { background-position: 100% 0; opacity: .4; }
}

/* ---- Keeper: a slow, steady watch-pulse — quiet, not urgent ---- */
.cc-lane-keeper .cc-lane-motion {
  background: color-mix(in srgb, var(--primary) 45%, transparent);
  animation: cc-keeper-watch 3.2s ease-in-out infinite;
}
@keyframes cc-keeper-watch {
  0%, 100% { opacity: .25; }
  50%      { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-lane-motion { animation: none !important; opacity: .5; }
}