/*
 * Lifecycle scenarios shown as simultaneous animated panels.
 * Each panel runs a 10s cycle on four module boxes (M1-M4).
 * State colors are defined per-theme in themes.css.
 */

.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.init     { background: var(--st-init); }
.legend .dot.run      { background: var(--st-run); }
.legend .dot.stopping { background: var(--st-stopping); }
.legend .dot.stopped  { background: var(--st-stopped); }
.legend .dot.error    { background: var(--st-error); }
.legend .dot.panic    { background: var(--st-panic); }

.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 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 .m1, .anim svg .m2, .anim svg .m3, .anim svg .m4 {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

/* Clean shutdown: signal arrives mid-cycle, modules stop in reverse order. */
.anim.active.anim-clean .m1 { animation-name: clean-m1; }
.anim.active.anim-clean .m2 { animation-name: clean-m2; }
.anim.active.anim-clean .m3 { animation-name: clean-m3; }
.anim.active.anim-clean .m4 { animation-name: clean-m4; }

@keyframes clean-m1 {
	0%, 4%    { fill: var(--st-idle); }
	5%, 9%    { fill: var(--st-init); }
	10%, 73%  { fill: var(--st-run); }
	74%, 81%  { fill: var(--st-stopping); }
	82%, 100% { fill: var(--st-stopped); }
}
@keyframes clean-m2 {
	0%, 9%    { fill: var(--st-idle); }
	10%, 14%  { fill: var(--st-init); }
	15%, 65%  { fill: var(--st-run); }
	66%, 73%  { fill: var(--st-stopping); }
	74%, 100% { fill: var(--st-stopped); }
}
@keyframes clean-m3 {
	0%, 14%   { fill: var(--st-idle); }
	15%, 19%  { fill: var(--st-init); }
	20%, 57%  { fill: var(--st-run); }
	58%, 65%  { fill: var(--st-stopping); }
	66%, 100% { fill: var(--st-stopped); }
}
@keyframes clean-m4 {
	0%, 19%   { fill: var(--st-idle); }
	20%, 24%  { fill: var(--st-init); }
	25%, 49%  { fill: var(--st-run); }
	50%, 57%  { fill: var(--st-stopping); }
	58%, 100% { fill: var(--st-stopped); }
}

/* Init error: M3's Init fails. M1 and M2 (already initialised) stop in reverse. M4 never starts. */
.anim.active.anim-init .m1 { animation-name: init-m1; }
.anim.active.anim-init .m2 { animation-name: init-m2; }
.anim.active.anim-init .m3 { animation-name: init-m3; }
.anim.active.anim-init .m4 { animation-name: init-m4; }

@keyframes init-m1 {
	0%, 4%    { fill: var(--st-idle); }
	5%, 9%    { fill: var(--st-init); }
	10%, 39%  { fill: var(--st-run); }
	40%, 47%  { fill: var(--st-stopping); }
	48%, 100% { fill: var(--st-stopped); }
}
@keyframes init-m2 {
	0%, 9%    { fill: var(--st-idle); }
	10%, 14%  { fill: var(--st-init); }
	15%, 31%  { fill: var(--st-run); }
	32%, 39%  { fill: var(--st-stopping); }
	40%, 100% { fill: var(--st-stopped); }
}
@keyframes init-m3 {
	0%, 14%   { fill: var(--st-idle); }
	15%, 23%  { fill: var(--st-init); }
	24%, 100% { fill: var(--st-error); }
}
@keyframes init-m4 {
	0%, 100%  { fill: var(--st-idle); }
}

/* Panic in Run: M3 panics, the rest still shut down gracefully. */
.anim.active.anim-panic .m1 { animation-name: panic-m1; }
.anim.active.anim-panic .m2 { animation-name: panic-m2; }
.anim.active.anim-panic .m3 { animation-name: panic-m3; }
.anim.active.anim-panic .m4 { animation-name: panic-m4; }

@keyframes panic-m1 {
	0%, 4%    { fill: var(--st-idle); }
	5%, 9%    { fill: var(--st-init); }
	10%, 73%  { fill: var(--st-run); }
	74%, 81%  { fill: var(--st-stopping); }
	82%, 100% { fill: var(--st-stopped); }
}
@keyframes panic-m2 {
	0%, 9%    { fill: var(--st-idle); }
	10%, 14%  { fill: var(--st-init); }
	15%, 65%  { fill: var(--st-run); }
	66%, 73%  { fill: var(--st-stopping); }
	74%, 100% { fill: var(--st-stopped); }
}
@keyframes panic-m3 {
	0%, 14%   { fill: var(--st-idle); }
	15%, 19%  { fill: var(--st-init); }
	20%, 49%  { fill: var(--st-run); }
	50%, 100% { fill: var(--st-panic); }
}
@keyframes panic-m4 {
	0%, 19%   { fill: var(--st-idle); }
	20%, 24%  { fill: var(--st-init); }
	25%, 49%  { fill: var(--st-run); }
	50%, 57%  { fill: var(--st-stopping); }
	58%, 100% { fill: var(--st-stopped); }
}

@media (prefers-reduced-motion: reduce) {
	.anim svg .m1, .anim svg .m2, .anim svg .m3, .anim svg .m4 {
		animation: none;
	}
	.anim svg .box { fill: var(--st-stopped); }
}