/* tick.css — the Kempt "done" gesture (logo tick + app disc tick + confetti).
   Tokens (--green, --green-fg) come from the page :root. */

/* ── Wordmark plain tick (logo) ── */
.cl-wm { display:inline-flex; align-items:center; font-weight:800; letter-spacing:-0.03em; } /* aligned with the app's locked wordmark; the handoff's -0.02em was drift (design, June 2026) */
.cl-wmtick { position:relative; display:inline-flex; margin-left:0.18em; }
.cl-wmtick .cl-ptick { width:0.74em; height:0.74em; overflow:visible; display:block; }
.cl-wmtick .cl-ptick path { fill:none; stroke:var(--green); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.cl-ptick .s1 { --len:9; stroke-dasharray:9; stroke-dashoffset:0; }
.cl-ptick .s2 { --len:19; stroke-dasharray:19; stroke-dashoffset:0; }
.cl-wm.go .cl-ptick { animation:cl-tpop .44s cubic-bezier(.3,1.5,.5,1) both; }
.cl-wm.go .cl-ptick .s1 { animation:cl-drawseg .17s cubic-bezier(.16,1,.3,1) .05s both; }
.cl-wm.go .cl-ptick .s2 { animation:cl-drawseg .17s .235s ease-in both; }
@keyframes cl-tpop { 0%{ transform:scale(.4);} 60%{ transform:scale(1.16);} 100%{ transform:scale(1);} }

/* ── Filled-disc tick (app: mark paid, reconcile, milestones) ── */
.cl-tickwrap { position:relative; display:inline-flex; }
.cl-tick { --sz:30px; width:var(--sz); height:var(--sz); border-radius:999px; background:var(--green); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.cl-tick svg { width:62%; height:62%; overflow:visible; }
.cl-tick path { stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.cl-tick .s1 { --len:9; stroke-dasharray:9; stroke-dashoffset:0; }
.cl-tick .s2 { --len:19; stroke-dasharray:19; stroke-dashoffset:0; }
.cl-tick.go { animation:cl-pop .4s .405s cubic-bezier(.34,1.6,.5,1) both; }
.cl-tick.go .s1 { animation:cl-drawseg .17s cubic-bezier(.16,1,.3,1) .05s both; }
.cl-tick.go .s2 { animation:cl-drawseg .17s .235s ease-in both; }

@keyframes cl-drawseg { from{ stroke-dashoffset:var(--len);} to{ stroke-dashoffset:0;} }
@keyframes cl-pop { 0%{ transform:scale(1);} 40%{ transform:scale(1.18);} 100%{ transform:scale(1);} }

.cl-particle { position:absolute; left:50%; top:50%; border-radius:999px; pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  .cl-wm.go .cl-ptick, .cl-wm.go .cl-ptick .s1, .cl-wm.go .cl-ptick .s2,
  .cl-tick.go, .cl-tick.go .s1, .cl-tick.go .s2 { animation:none !important; }
}