Refine secondary rail icon animations

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.17.14',
-  gatewayClient: '0.18.14',
+  macClient: '0.17.15',
+  gatewayClient: '0.18.15',
   gatewayBackend: '0.18.1',
 });
 

src/web/components/ClientOverviewPage.jsx

@@ -1164,7 +1164,7 @@ export function ClientOverviewPage({
           <svg viewBox="0 0 24 24" aria-hidden="true">
             <rect className="client-rail-device-primary" x="3.5" y="5" width="7" height="10" rx="1.5" />
             <rect className="client-rail-device-secondary" x="13.5" y="8" width="7" height="7" rx="1.5" />
-            <path className="client-rail-device-link" pathLength="1" d="M6 19h12M7 15v4M17 15v4" />
+            <path className="client-rail-device-link" d="M6 19h12M7 15v4M17 15v4" />
           </svg>
           <span>Устройства</span>
         </button>}
@@ -1183,7 +1183,8 @@ export function ClientOverviewPage({
           }}
         >
           <svg viewBox="0 0 24 24" aria-hidden="true">
-            <path className="client-rail-diagnostics-wave" pathLength="1" d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
+            <path className="client-rail-diagnostics-base" d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
+            <path className="client-rail-diagnostics-pulse" pathLength="1" d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
           </svg>
           <span>Диагностика</span>
         </button>

src/web/styles.css

@@ -1693,22 +1693,23 @@ p {
   filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 52%, transparent));
 }
 
-.client-rail-info-ring,
 .client-rail-device-primary,
 .client-rail-device-secondary,
-.client-rail-device-link,
-.client-rail-diagnostics-wave,
 .client-rail-rule-knob {
   transform-box: fill-box;
   transform-origin: center;
 }
 
-.client-rail-info-ring,
-.client-rail-device-link,
-.client-rail-diagnostics-wave {
+.client-rail-info-ring {
   stroke-dasharray: 1;
 }
 
+.client-rail-diagnostics-pulse {
+  stroke-width: 2.4;
+  opacity: 0;
+  stroke-dasharray: 0.16 0.84;
+}
+
 .client-instructions-toggle.is-open:not(.client-devices-toggle):not(.client-diagnostics-toggle) .client-rail-info-ring {
   animation: client-rail-info-refill 680ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -1721,12 +1722,8 @@ p {
   animation: client-rail-device-right 680ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-devices-toggle.is-open .client-rail-device-link {
-  animation: client-rail-device-link 680ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-wave {
-  animation: client-rail-diagnostics-wave 760ms cubic-bezier(0.16, 1, 0.3, 1);
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
+  animation: client-rail-diagnostics-pulse 760ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
@@ -1744,38 +1741,32 @@ p {
 
 @keyframes client-rail-device-left {
   0%, 100% { transform: translate(0, 0); }
-  45% { transform: translate(1.5px, -1px); }
-  72% { transform: translate(0.5px, 0); }
+  38%, 58% { transform: translate(-0.6px, -2.25px); }
+  82% { transform: translate(0.15px, 0.35px); }
 }
 
 @keyframes client-rail-device-right {
   0%, 100% { transform: translate(0, 0); }
-  45% { transform: translate(-1.5px, 1px); }
-  72% { transform: translate(-0.5px, 0); }
+  38%, 58% { transform: translate(0.6px, -2.25px); }
+  82% { transform: translate(-0.15px, 0.35px); }
 }
 
-@keyframes client-rail-device-link {
-  from { opacity: 0.28; stroke-dashoffset: 1; }
-  to { opacity: 1; stroke-dashoffset: 0; }
-}
-
-@keyframes client-rail-diagnostics-wave {
-  0%, 100% { stroke-dashoffset: 0; transform: scaleY(1); }
-  32% { stroke-dashoffset: -0.24; transform: scaleY(0.68); }
-  68% { stroke-dashoffset: -0.58; transform: scaleY(1.32); }
-  84% { stroke-dashoffset: -0.82; transform: scaleY(0.9); }
+@keyframes client-rail-diagnostics-pulse {
+  0% { opacity: 0; stroke-dashoffset: 1; }
+  16%, 84% { opacity: 1; }
+  100% { opacity: 0; stroke-dashoffset: 0; }
 }
 
 @keyframes client-rail-rule-top {
   0%, 100% { transform: translateX(0); }
-  42% { transform: translateX(3px); }
-  72% { transform: translateX(-1px); }
+  42% { transform: translateX(-3px); }
+  72% { transform: translateX(1px); }
 }
 
 @keyframes client-rail-rule-bottom {
   0%, 100% { transform: translateX(0); }
-  42% { transform: translateX(-3px); }
-  72% { transform: translateX(1px); }
+  42% { transform: translateX(3px); }
+  72% { transform: translateX(-1px); }
 }
 
 .client-local-rules-toggle:disabled {