/*
 * Runner scenarios shown as animated panels.
 * Each panel runs a 10s cycle on three dependency boxes (D1-D3) and a tests box.
 */

.lifecycle { margin: 2rem 0; }
.lifecycle h2 { font-size: 1.4rem; margin: 0 0 0.4rem; }
.lifecycle .lead { color: var(--fg-muted); max-width: 48rem; margin: 0 0 1rem; }

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
}
.legend .item { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--fg-muted); }
.legend .dot { width: 0.7rem; height: 0.7rem; border-radius: 2px; display: inline-block; background: var(--st-idle); }
.legend .dot.starting { background: var(--st-starting); }
.legend .dot.ready    { background: var(--st-ready); }
.legend .dot.testing  { background: var(--st-testing); }
.legend .dot.stopping { background: var(--st-stopping); }
.legend .dot.stopped  { background: var(--st-stopped); }
.legend .dot.error    { background: var(--st-error); }

.anim-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.anim {
	margin: 0;
	padding: 0.85rem 1rem;
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: center;
	transition: border-color 0.2s, background 0.2s, opacity 0.2s;
	opacity: 0.55;
}
.anim.active { opacity: 1; border-color: var(--accent); }
.anim-vis { min-width: 0; }
.anim-text { min-width: 0; }
.anim h3 { margin: 0 0 0.35rem; font-size: 1rem; font-family: var(--mono); }
.anim p { color: var(--fg-muted); font-size: 0.9rem; margin: 0; line-height: 1.45; }
.anim p code { color: var(--fg); background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.9em; }
.anim svg { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
	.anim { grid-template-columns: 1fr; gap: 0.5rem; }
}

.anim svg .label { fill: var(--fg); font-family: var(--mono); font-size: 11px; }
.anim svg .box   { stroke: var(--border); stroke-width: 1; fill: var(--st-idle); }

.anim svg .d1, .anim svg .d2, .anim svg .d3, .anim svg .tt {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/* Green run: deps start in order and block on Ready, tests run, deps stop in reverse. */
.anim.active.anim-clean .d1 { animation-name: clean-d1; }
.anim.active.anim-clean .d2 { animation-name: clean-d2; }
.anim.active.anim-clean .d3 { animation-name: clean-d3; }
.anim.active.anim-clean .tt { animation-name: clean-tt; }

@keyframes clean-d1 {
	0%, 4%    { fill: var(--st-idle); }
	5%, 11%   { fill: var(--st-starting); }
	12%, 71%  { fill: var(--st-ready); }
	72%, 79%  { fill: var(--st-stopping); }
	80%, 100% { fill: var(--st-stopped); }
}
@keyframes clean-d2 {
	0%, 11%   { fill: var(--st-idle); }
	12%, 18%  { fill: var(--st-starting); }
	19%, 63%  { fill: var(--st-ready); }
	64%, 71%  { fill: var(--st-stopping); }
	72%, 100% { fill: var(--st-stopped); }
}
@keyframes clean-d3 {
	0%, 18%   { fill: var(--st-idle); }
	19%, 25%  { fill: var(--st-starting); }
	26%, 55%  { fill: var(--st-ready); }
	56%, 63%  { fill: var(--st-stopping); }
	64%, 100% { fill: var(--st-stopped); }
}
@keyframes clean-tt {
	0%, 25%   { fill: var(--st-idle); }
	26%, 55%  { fill: var(--st-testing); }
	56%, 100% { fill: var(--st-ready); }
}

/* Ready failure: D2 never becomes ready. D3 and tests never start. D2 and D1 still stop in reverse. */
.anim.active.anim-ready .d1 { animation-name: ready-d1; }
.anim.active.anim-ready .d2 { animation-name: ready-d2; }
.anim.active.anim-ready .d3 { animation-name: ready-d3; }
.anim.active.anim-ready .tt { animation-name: ready-tt; }

@keyframes ready-d1 {
	0%, 4%    { fill: var(--st-idle); }
	5%, 11%   { fill: var(--st-starting); }
	12%, 59%  { fill: var(--st-ready); }
	60%, 67%  { fill: var(--st-stopping); }
	68%, 100% { fill: var(--st-stopped); }
}
@keyframes ready-d2 {
	0%, 11%   { fill: var(--st-idle); }
	12%, 29%  { fill: var(--st-starting); }
	30%, 53%  { fill: var(--st-error); }
	54%, 59%  { fill: var(--st-stopping); }
	60%, 100% { fill: var(--st-stopped); }
}
@keyframes ready-d3 {
	0%, 100%  { fill: var(--st-idle); }
}
@keyframes ready-tt {
	0%, 100%  { fill: var(--st-idle); }
}

/* Test failure: tests fail, deps still stop in reverse, RunMain exits non-zero. */
.anim.active.anim-fail .d1 { animation-name: fail-d1; }
.anim.active.anim-fail .d2 { animation-name: fail-d2; }
.anim.active.anim-fail .d3 { animation-name: fail-d3; }
.anim.active.anim-fail .tt { animation-name: fail-tt; }

@keyframes fail-d1 {
	0%, 4%    { fill: var(--st-idle); }
	5%, 11%   { fill: var(--st-starting); }
	12%, 65%  { fill: var(--st-ready); }
	66%, 73%  { fill: var(--st-stopping); }
	74%, 100% { fill: var(--st-stopped); }
}
@keyframes fail-d2 {
	0%, 11%   { fill: var(--st-idle); }
	12%, 18%  { fill: var(--st-starting); }
	19%, 57%  { fill: var(--st-ready); }
	58%, 65%  { fill: var(--st-stopping); }
	66%, 100% { fill: var(--st-stopped); }
}
@keyframes fail-d3 {
	0%, 18%   { fill: var(--st-idle); }
	19%, 25%  { fill: var(--st-starting); }
	26%, 49%  { fill: var(--st-ready); }
	50%, 57%  { fill: var(--st-stopping); }
	58%, 100% { fill: var(--st-stopped); }
}
@keyframes fail-tt {
	0%, 25%   { fill: var(--st-idle); }
	26%, 49%  { fill: var(--st-testing); }
	50%, 100% { fill: var(--st-error); }
}

@media (prefers-reduced-motion: reduce) {
	.anim svg .d1, .anim svg .d2, .anim svg .d3, .anim svg .tt {
		animation: none;
	}
	.anim svg .box { fill: var(--st-stopped); }
}