Refine secondary rail icons and animations

src/web/styles/primitives.css

@@ -71,8 +71,9 @@
 .client-rail-subscription-back,
 .client-rail-subscription-front,
 .client-rail-subscription-lines,
-.client-rail-book-page,
-.client-rail-book-spine,
+.client-rail-info-ring,
+.client-rail-info-sweep,
+.client-rail-info-mark,
 .client-rail-device-primary,
 .client-rail-device-secondary,
 .client-rail-device-link,
@@ -83,7 +84,7 @@
 .client-rail-rule-knob {
   transform-box: fill-box;
   transform-origin: center;
-  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease, stroke-dashoffset 620ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease, stroke-dasharray 620ms cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset 620ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-rail-action .client-rail-subscription-card,
@@ -92,63 +93,52 @@
 }
 
 .client-rail-subscription-back {
-  transform: translate(-1.4px, 1.4px);
-}
-
-.client-rail-subscription-front {
-  transform: translateX(1px);
+  transform: translate(0, 0);
 }
 
 .client-rail-subscription-lines {
-  opacity: 0.52;
-  transform: scaleX(0.68);
+  opacity: 0.9;
   transform-origin: left center;
 }
 
 .client-subscription-toggle.is-open .client-rail-subscription-back {
-  transform: translate(0, 0);
+  transform: translate(0.6px, -0.6px);
 }
 
 .client-subscription-toggle.is-open .client-rail-subscription-front {
-  transform: translate(-1px, 0.6px);
+  transform: translate(-1.5px, 1px);
 }
 
 .client-subscription-toggle.is-open .client-rail-subscription-lines {
   opacity: 1;
-  transform: scaleX(1);
+  animation: client-rail-detail-pulse 10s ease-in-out infinite;
 }
 
-.client-rail-book-page.is-left {
-  transform: translateX(1.7px) scaleX(0.58);
-  transform-origin: right center;
+.client-rail-info-ring {
+  stroke-dasharray: 1 0;
+  stroke-dashoffset: 0.25;
 }
 
-.client-rail-book-page.is-right {
-  transform: translateX(-1.7px) scaleX(0.58);
-  transform-origin: left center;
+.client-rail-info-sweep {
+  stroke-width: 2.4;
+  stroke-dasharray: 0.14 0.86;
+  opacity: 0;
 }
 
-.client-rail-book-spine {
-  opacity: 0.55;
-  transform: scaleY(0.74);
+.client-instructions-toggle.is-open .client-rail-info-ring {
+  stroke-dasharray: 0.78 0.22;
 }
 
-.client-instructions-toggle.is-open .client-rail-book-page,
-.client-instructions-toggle.is-open .client-rail-book-spine {
-  opacity: 1;
-  transform: translate(0, 0) scale(1);
+.client-instructions-toggle.is-open .client-rail-info-mark {
+  transform: translateY(-0.6px);
 }
 
-.client-rail-device-primary {
-  transform: translate(-0.9px, -1.8px);
-}
-
-.client-rail-device-secondary {
-  transform: translate(0.9px, -1.8px);
+.client-instructions-toggle.is-open .client-rail-info-sweep {
+  animation: client-rail-info-scan 10s linear infinite;
 }
 
 .client-rail-device-link {
-  opacity: 0.55;
+  opacity: 0.9;
 }
 
 .client-rail-device-bridge {
@@ -163,9 +153,16 @@
   stroke-dasharray: 0.16 0.84;
 }
 
-.client-devices-toggle.is-open .client-rail-device-primary,
+.client-rail-device-pulse {
+  stroke-dasharray: 0.5 0.5;
+}
+
+.client-devices-toggle.is-open .client-rail-device-primary {
+  transform: translateX(0.6px);
+}
+
 .client-devices-toggle.is-open .client-rail-device-secondary {
-  transform: translate(0, 0);
+  transform: translateX(-0.6px);
 }
 
 .client-devices-toggle.is-open .client-rail-device-link {
@@ -178,13 +175,13 @@
 }
 
 .client-devices-toggle.is-open .client-rail-device-pulse {
-  animation: client-rail-device-signal 760ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation: client-rail-device-signal 10s linear infinite;
 }
 
 .client-rail-diagnostics-base,
 .client-rail-diagnostics-pulse {
   vector-effect: non-scaling-stroke;
-  transform: scaleY(0.22);
+  transform: scaleY(0.8);
 }
 
 .client-diagnostics-toggle.is-open .client-rail-diagnostics-base,
@@ -193,27 +190,47 @@
 }
 
 .client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
-  animation: client-rail-diagnostics-scan 760ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation: client-rail-diagnostics-scan 10s linear infinite;
 }
 
 .client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
-  transform: translateX(3px);
+  transform: translateX(2px);
 }
 
 .client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
-  transform: translateX(-3px);
+  transform: translateX(-2px);
+}
+
+.client-local-rules-toggle.is-open .client-rail-rule-knob {
+  animation: client-rail-rule-pulse 10s ease-in-out infinite;
+}
+
+@keyframes client-rail-detail-pulse {
+  0%, 8%, 100% { transform: translateX(0); }
+  4% { transform: translateX(0.8px); }
+}
+
+@keyframes client-rail-info-scan {
+  0% { opacity: 0; stroke-dashoffset: 1; }
+  2%, 8% { opacity: 1; }
+  10%, 100% { opacity: 0; stroke-dashoffset: 0; }
 }
 
 @keyframes client-rail-device-signal {
   0% { opacity: 0; stroke-dashoffset: 1; }
-  18%, 78% { opacity: 1; }
-  100% { opacity: 0; stroke-dashoffset: 0; }
+  2%, 8% { opacity: 1; }
+  10%, 100% { opacity: 0; stroke-dashoffset: 0; }
 }
 
 @keyframes client-rail-diagnostics-scan {
   0% { opacity: 0; stroke-dashoffset: 1; }
-  16%, 84% { opacity: 1; }
-  100% { opacity: 0; stroke-dashoffset: 0; }
+  2%, 8% { opacity: 1; }
+  10%, 100% { opacity: 0; stroke-dashoffset: 0; }
+}
+
+@keyframes client-rail-rule-pulse {
+  0%, 10%, 100% { stroke-width: 1.6; }
+  5% { stroke-width: 2.4; }
 }
 
 .client-local-rules-toggle:disabled {