/* ============================================================= *
 *  Claude Code hero — "The Stop gate"
 *  The agent's attempt to finish (a token) runs the session track to
 *  a Stop barrier. A blocking finding holds the bar down (red); the
 *  finding is fed back, the token is pushed to fix (amber → teal),
 *  returns, the finding clears, and only then does the barrier lift
 *  so the token passes to "done". One shared CSS timeline, no JS.
 *  Dramatizes the hard PostToolUse + Stop loop. Reduced-motion safe.
 * ============================================================= */

.cg-stage {
  container-type: size;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 1200 / 600;
  border: 1px solid rgba(var(--rgb-text), 0.1);
  border-radius: 2.4cqw;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #fbfcfa 0%, #f1f5ee 56%, #e7ede4 100%);
  box-shadow: 0 30px 70px -42px rgba(var(--rgb-text), 0.42);
  font-family: var(--font-mono);
  --T: 9s;
  --y: 56%;
}

.cg-floor {
  position: absolute;
  left: 50%; bottom: -6%;
  width: 230%; height: 56%;
  z-index: 0; opacity: 0.42;
  transform: translateX(-50%) perspective(48cqw) rotateX(70deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(to right, rgba(var(--rgb-brand-1), 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--rgb-brand-1), 0.18) 1px, transparent 1px);
  background-size: 5cqw 5cqw;
  -webkit-mask-image: radial-gradient(120% 85% at 50% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 85% at 50% 100%, #000 0%, transparent 72%);
}

/* PostToolUse badge — re-scan after every edit */
.cg-ptu {
  position: absolute;
  left: 3cqw; top: 3cqw;
  z-index: 6;
  display: flex; align-items: center; gap: 0.7cqw;
  padding: 0.8cqw 1.1cqw;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(var(--rgb-text), 0.1);
  box-shadow: 0 1.2cqw 2.6cqw -1.6cqw rgba(var(--rgb-text), 0.4);
  font-size: 1.05cqw; font-weight: 600; color: var(--color-text);
}
.cg-ptu .lamp {
  width: 0.9cqw; height: 0.9cqw; border-radius: 50%;
  background: var(--color-brand-1);
  box-shadow: 0 0 0 0 rgba(var(--rgb-brand-1), 0.5);
  animation: cg-ptu 2.4s ease-in-out infinite;
}
.cg-ptu small { color: var(--color-text-alt); font-weight: 500; }
@keyframes cg-ptu {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-brand-1), 0.45); }
  50% { box-shadow: 0 0 0 0.9cqw rgba(var(--rgb-brand-1), 0); }
}

/* track baseline */
.cg-track {
  position: absolute;
  left: 6cqw; right: 6cqw; top: var(--y);
  height: 0; z-index: 1;
  border-top: 1.5px dashed rgba(var(--rgb-brand-1), 0.28);
}

/* loop-back arc (fed back) */
.cg-loop {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.cg-loop path {
  fill: none;
  stroke: var(--color-brand-5);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
  opacity: 0;
  animation: cg-loopglow var(--T) ease-in-out infinite;
}
.cg-loop text {
  fill: var(--color-brand-5);
  font: 600 13px var(--font-mono);
  opacity: 0;
  animation: cg-loopglow var(--T) ease-in-out infinite;
}
@keyframes cg-loopglow {
  0%, 30% { opacity: 0; }
  34%, 44% { opacity: 0.95; }
  50%, 100% { opacity: 0; }
}

/* the Stop gate */
.cg-gate { position: absolute; left: 70cqw; top: var(--y); z-index: 4; }
.cg-post {
  position: absolute; top: -9cqw;
  width: 1.4cqw; height: 9cqw; border-radius: 0.7cqw;
  background: linear-gradient(180deg, #1c3940, #0d232a);
}
.cg-post.l { left: -5cqw; }
.cg-post.r { left: 4cqw; }
.cg-bar {
  position: absolute;
  left: -4cqw; top: -8cqw;
  width: 9cqw; height: 1.5cqw;
  border-radius: 0.75cqw;
  background: repeating-linear-gradient(45deg, var(--color-brand-1) 0 1.4cqw, #fff 1.4cqw 2.8cqw);
  transform-origin: 0.75cqw 50%;
  transform: rotate(-74deg);
  box-shadow: 0 0.4cqw 1cqw -0.4cqw rgba(0,0,0,0.4);
  animation: cg-bar var(--T) var(--ease-out-cubic) infinite;
}
@keyframes cg-bar {
  0%, 74% { transform: rotate(0deg); background: repeating-linear-gradient(45deg, var(--color-brand-5) 0 1.4cqw, #fff 1.4cqw 2.8cqw); }
  80%, 94% { transform: rotate(-74deg); background: repeating-linear-gradient(45deg, var(--color-brand-1) 0 1.4cqw, #fff 1.4cqw 2.8cqw); }
  100% { transform: rotate(0deg); }
}
.cg-lamp {
  position: absolute; left: 4.2cqw; top: -10.6cqw;
  width: 2cqw; height: 2cqw; border-radius: 50%;
  background: var(--color-brand-1);
  box-shadow: 0 0 1.4cqw var(--color-brand-1);
  animation: cg-lamp var(--T) steps(1) infinite;
}
@keyframes cg-lamp {
  0%, 24% { background: #c7c7c7; box-shadow: none; }
  26%, 76% { background: var(--color-brand-5); box-shadow: 0 0 1.4cqw var(--color-brand-5); }
  78%, 94% { background: var(--color-brand-1); box-shadow: 0 0 1.4cqw var(--color-brand-1); }
  96%, 100% { background: #c7c7c7; box-shadow: none; }
}
.cg-gate-disc {
  position: absolute; left: 4.5cqw; top: -1.4cqw;
  width: 5.4cqw; height: 5.4cqw; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #1c9a86, var(--color-brand-1) 58%, #0c3a33);
  color: #eafff7;
  box-shadow: 0 0 0 0.3cqw rgba(var(--rgb-brand-1), 0.16);
}
.cg-gate-disc svg { width: 3cqw; height: 3cqw; }
.cg-gate-label {
  position: absolute; left: 0; top: 1.4cqw;
  transform: translateX(-50%);
  font-size: 1.2cqw; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text);
}

/* done zone */
.cg-done {
  position: absolute; left: 90cqw; top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid; place-items: center; gap: 0.6cqw;
  width: 9cqw; height: 9cqw; border-radius: 1.4cqw;
  border: 1.5px dashed var(--color-brand-1);
  color: var(--color-brand-1);
  background: color-mix(in srgb, var(--color-brand-1) 9%, #fff);
  animation: cg-done var(--T) ease-in-out infinite;
}
.cg-done svg { width: 2.6cqw; height: 2.6cqw; }
.cg-done span { font-size: 1.05cqw; font-weight: 700; }
@keyframes cg-done {
  0%, 84% { border-color: rgba(var(--rgb-text), 0.18); color: var(--color-text-alt); background: transparent; }
  90%, 100% { border-color: var(--color-brand-1); color: var(--color-brand-1); background: color-mix(in srgb, var(--color-brand-1) 9%, #fff); }
}

/* finding card above the gate */
.cg-finding {
  position: absolute; left: 70cqw; top: 8cqw;
  transform: translateX(-50%);
  z-index: 7;
  width: 27cqw;
  padding: 1.1cqw 1.3cqw;
  border-radius: 1.2cqw;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-brand-5) 45%, transparent);
  box-shadow: 0 2cqw 4cqw -2cqw rgba(var(--rgb-text), 0.5);
  opacity: 1; transform-origin: 50% 120%;
  animation: cg-find-show var(--T) ease-out infinite;
}
@keyframes cg-find-show {
  0%, 26% { opacity: 0; transform: translateX(-50%) translateY(0.8cqw) scale(0.96); }
  31%, 80% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  86%, 100% { opacity: 0; transform: translateX(-50%) translateY(-0.6cqw) scale(0.97); }
}
.cg-find-head {
  display: flex; align-items: center; gap: 0.6cqw;
  margin-bottom: 0.5cqw;
}
.cg-find-sev {
  font-size: 0.9cqw; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25cqw 0.55cqw; border-radius: 0.45cqw;
  color: #fff;
  background: var(--color-brand-1);
  animation: cg-sev var(--T) steps(1) infinite;
}
@keyframes cg-sev {
  0%, 58% { background: var(--color-brand-5); }
  60%, 100% { background: var(--color-brand-1); }
}
.cg-find-rule { font-size: 0.95cqw; color: var(--color-text-alt); margin-left: auto; }
.cg-find-body { position: relative; min-height: 3.4cqw; }
.cg-find-state { position: absolute; inset: 0; }
.cg-find-state .t1 { font-size: 1.25cqw; font-weight: 700; color: var(--color-text); margin-bottom: 0.25cqw; }
.cg-find-state .t2 { font-size: 1cqw; color: var(--color-text-alt); }
.cg-find-state.bad { opacity: 0; animation: cg-fade-bad var(--T) steps(1) infinite; }
.cg-find-state.good { opacity: 1; animation: cg-fade-good var(--T) steps(1) infinite; }
.cg-find-state.good .t1 { color: var(--color-brand-1); }
@keyframes cg-fade-bad { 0%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes cg-fade-good { 0%, 58% { opacity: 0; } 60%, 100% { opacity: 1; } }

/* travelling token — the agent's "done" attempt */
.cg-token {
  position: absolute; left: 6cqw; top: var(--y);
  z-index: 6;
  display: inline-flex; align-items: center; gap: 0.7cqw;
  padding: 0.85cqw 1.2cqw;
  border-radius: 999px;
  font-size: 1.15cqw; font-weight: 700;
  white-space: nowrap;
  color: #fff; background: var(--color-brand-1); border: 1.5px solid var(--color-brand-1);
  transform: translateY(-50%) translateX(78cqw);
  animation: cg-token-x var(--T) var(--ease-in-out-cubic, cubic-bezier(.65,.05,.36,1)) infinite,
             cg-token-color var(--T) steps(1) infinite,
             cg-token-fade var(--T) linear infinite;
}
.cg-token .dot { width: 1cqw; height: 1cqw; border-radius: 50%; background: currentColor; flex: none; }
.cg-token .lbl { position: relative; display: inline-grid; }
.cg-token .lbl > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; animation: var(--T) steps(1) infinite; }
.cg-token .lbl > span:nth-child(1) { animation-name: cg-k0; }
.cg-token .lbl > span:nth-child(2) { animation-name: cg-k1; }
.cg-token .lbl > span:nth-child(3) { animation-name: cg-k2; }
.cg-token .lbl > span:nth-child(4) { animation-name: cg-k3; }
@keyframes cg-k0 { 0%, 26% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes cg-k1 { 0%, 29% { opacity: 0; } 30%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes cg-k2 { 0%, 47% { opacity: 0; } 48%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes cg-k3 { 0%, 73% { opacity: 0; } 74%, 100% { opacity: 1; } }
.cg-token .lbl > span:nth-child(4) { opacity: 1; }
@keyframes cg-token-x {
  0%   { transform: translateY(-50%) translateX(4cqw); }
  24%  { transform: translateY(-50%) translateX(45cqw); }
  32%  { transform: translateY(-50%) translateX(45cqw); }
  46%  { transform: translateY(-50%) translateX(20cqw); }
  60%  { transform: translateY(-50%) translateX(20cqw); }
  72%  { transform: translateY(-50%) translateX(45cqw); }
  80%  { transform: translateY(-50%) translateX(45cqw); }
  92%, 100% { transform: translateY(-50%) translateX(78cqw); }
}
@keyframes cg-token-color {
  0% { color: var(--color-brand-1); background: color-mix(in srgb, var(--color-brand-1) 10%, #fff); border: 1.5px solid color-mix(in srgb, var(--color-brand-1) 40%, transparent); }
  30% { color: var(--color-brand-5); background: color-mix(in srgb, var(--color-brand-5) 12%, #fff); border: 1.5px solid color-mix(in srgb, var(--color-brand-5) 50%, transparent); }
  48% { color: #b07d12; background: color-mix(in srgb, var(--color-brand-4) 16%, #fff); border: 1.5px solid color-mix(in srgb, var(--color-brand-4) 55%, transparent); }
  72% { color: #fff; background: var(--color-brand-1); border: 1.5px solid var(--color-brand-1); }
  100% { color: #fff; background: var(--color-brand-1); border: 1.5px solid var(--color-brand-1); }
}
@keyframes cg-token-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

.cg-caption {
  margin: 1.6rem auto 0;
  max-width: 46rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-text-alt);
}
.cg-caption b { color: var(--color-brand-1); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cg-token { animation: none; transform: translateY(-50%) translateX(78cqw); color: #fff; background: var(--color-brand-1); border: 1.5px solid var(--color-brand-1); }
  .cg-token .lbl > span { animation: none; }
  .cg-token .lbl > span:nth-child(4) { opacity: 1; }
  .cg-bar { animation: none; transform: rotate(-74deg); }
  .cg-lamp { animation: none; background: var(--color-brand-1); box-shadow: 0 0 1.4cqw var(--color-brand-1); }
  .cg-done { animation: none; border-color: var(--color-brand-1); color: var(--color-brand-1); }
  .cg-finding, .cg-loop path, .cg-loop text, .cg-ptu .lamp { animation: none; }
  .cg-finding { opacity: 1; transform: translateX(-50%); }
  .cg-find-state.bad { opacity: 0; } .cg-find-state.good { opacity: 1; }
  .cg-find-sev { background: var(--color-brand-1); }
}

@media (max-width: 560px) {
  .cg-token { font-size: 1.5cqw; }
  .cg-ptu small { display: none; }
}