🔧 update docs

src/components/orders/OrderStatusView.module.scss

@@ -213,7 +213,7 @@
 }
 
 .step[data-status='done'] {
-  opacity: 0.5;
+  opacity: 0.3;
 
   .stepDot {
     border-color: $color-success;
@@ -231,18 +231,36 @@
     background: $color-success;
 
     @media (prefers-reduced-motion: no-preference) {
+      animation: dotPopIn 0.4s ease-out 0.6s backwards;
+
       &::after {
         content: '';
         position: absolute;
         inset: 0;
         border-radius: 50%;
         background: $color-success;
-        animation: sonarPing 1.6s ease-out infinite;
+        opacity: 0;
+        animation: sonarPing 1.6s ease-out 1s infinite;
       }
     }
   }
 }
 
+// Animates the box size instead of transform: scale, which Chrome
+// rasterizes at a low resolution mid-animation and renders the tiny dot square.
+@keyframes dotPopIn {
+  0% {
+    border-color: $color-border;
+    background: $color-background;
+  }
+
+  50% {
+    width: 14px;
+    height: 14px;
+    margin-top: 1px;
+  }
+}
+
 @keyframes sonarPing {
   0% {
     transform: scale(1);