/* KKME motion — three verbs. Nothing else moves. */
.prule{display:block;width:100%;height:44px}.prule .ln{fill:none;stroke:var(--ink);stroke-width:.9;opacity:.8}.prule .ar{fill:var(--ink);opacity:.06}.prule .pk{fill:var(--amber)}
.frule{display:block;width:100%;height:40px}.frule .mid{stroke:var(--rule)}.frule .ln{fill:none;stroke:var(--green);stroke-width:.9;opacity:.9}
/* 1 · line draw, once on reveal (add .draw when the element enters the viewport) */
.draw{stroke-dasharray:2400;stroke-dashoffset:2400;animation:kkme-draw 2.4s ease-out forwards}@keyframes kkme-draw{to{stroke-dashoffset:0}}
/* 2 · live tick — the only loop on the site */
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:kkme-tick 2.4s ease-out infinite}@keyframes kkme-tick{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* 3 · bar grow, once on reveal; set --to on the element */
.bar{height:6px;background:var(--rule);position:relative}.bar i{position:absolute;inset:0 auto 0 0;background:var(--amber);width:0;animation:kkme-grow 1.6s .3s cubic-bezier(.2,.8,.2,1) forwards}@keyframes kkme-grow{to{width:var(--to,60%)}}
/* count-up is JS (see count-up.js); respects the same gate */
@media (prefers-reduced-motion:reduce){.draw{animation:none;stroke-dashoffset:0}.live-dot{animation:none}.bar i{animation:none;width:var(--to,60%)}}