Task completed

Copy-paste CSS

/* circle: clay flash, settle to olive with spring overshoot */
.task.done .check {
  animation: settle 380ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes settle {
  0%   { transform: scale(.8);  background: #D97757; }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1);   background: #788C5D; }
}

/* checkmark draws via stroke-dashoffset, 80ms delay */
.check path        { stroke-dasharray: 20; stroke-dashoffset: 20;
                     transition: stroke-dashoffset 220ms var(--ease) 80ms; }
.task.done path    { stroke-dashoffset: 0; }

/* strikethrough grows left → right */
.label::after      { width: 0; transition: width 240ms var(--ease) 120ms; }
.task.done .label::after { width: 100%; }

/* row steps back after the celebration */
.task.done         { max-height: 44px; opacity: .6;
                     transition-delay: 600ms; }