Refine secondary rail icon animations

src/web/styles/primitives.css

@@ -76,16 +76,26 @@
 
 .client-rail-subscription-back,
 .client-rail-subscription-front,
-.client-rail-info-ring,
-.client-rail-info-mark,
-.client-rail-device-monitor,
-.client-rail-device-phone,
+.client-rail-book-page-position,
+.client-rail-book-spine,
+.client-rail-device-link,
 .client-rail-device-bridge,
+.client-rail-diagnostics-position,
+.client-rail-rule-knob-position {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, stroke-dasharray var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-rail-book-page,
 .client-rail-diagnostics-glass,
 .client-rail-rule-knob {
   transform-box: fill-box;
   transform-origin: center;
-  transition: transform var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, stroke-dasharray var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-rail-book-page.is-right {
+  transform-origin: left center;
 }
 
 .client-rail-action .client-rail-subscription-card,
@@ -105,17 +115,20 @@
   transform: translate(-2px, 1px);
 }
 
-.client-rail-info-ring {
-  stroke-dasharray: 1 0;
-  stroke-dashoffset: 0.1;
+.client-instructions-toggle.is-open .client-rail-book-page-position.is-left {
+  transform: translateX(-1.25px) rotate(-2.5deg);
 }
 
-.client-instructions-toggle.is-open .client-rail-info-ring {
-  stroke-dasharray: 0.9 0.1;
+.client-instructions-toggle.is-open .client-rail-book-page-position.is-right {
+  transform: translateX(1.25px) rotate(2.5deg);
 }
 
-.client-instructions-toggle.is-open .client-rail-info-mark {
-  transform: translateY(-1px);
+.client-instructions-toggle.is-open .client-rail-book-spine {
+  transform: scaleY(1.06);
+}
+
+.client-rail-device-link {
+  opacity: 0.68;
 }
 
 .client-rail-device-bridge {
@@ -124,10 +137,8 @@
 }
 
 .client-rail-subscription-scan,
-.client-rail-info-sweep,
 .client-rail-device-packet,
-.client-rail-diagnostics-scan,
-.client-rail-rule-scan {
+.client-rail-diagnostics-scan {
   stroke-width: 2.4;
   opacity: 0;
   stroke-dasharray: 0.18 0.82;
@@ -138,12 +149,8 @@
   stroke-dasharray: 0.36 0.64;
 }
 
-.client-devices-toggle.is-open .client-rail-device-monitor {
-  transform: translateX(1px);
-}
-
-.client-devices-toggle.is-open .client-rail-device-phone {
-  transform: translateX(-1px);
+.client-devices-toggle.is-open .client-rail-device-link {
+  opacity: 1;
 }
 
 .client-devices-toggle.is-open .client-rail-device-bridge {
@@ -151,28 +158,42 @@
   transform: scaleX(1);
 }
 
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
-  transform: translate(1px, -1px) rotate(-4deg);
+.client-rail-diagnostics-trace {
+  opacity: 0.72;
 }
 
-.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
-  transform: translateX(2px);
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-position {
+  transform: translate(2px, -1px) rotate(-7deg);
 }
 
-.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
-  transform: translateX(-2px);
+.client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-top {
+  transform: translateX(4px);
+}
+
+.client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-bottom {
+  transform: translateX(-4px);
 }
 
 .client-subscription-toggle.is-open .client-rail-subscription-scan,
-.client-instructions-toggle.is-open .client-rail-info-sweep,
 .client-devices-toggle.is-open .client-rail-device-packet,
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-scan,
-.client-local-rules-toggle.is-open .client-rail-rule-scan {
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-scan {
   animation: client-rail-ambient-trace 10s 1.1s linear infinite;
 }
 
-.client-local-rules-toggle.is-open .client-rail-rule-scan.is-bottom {
-  animation: client-rail-ambient-trace 10s 1.32s linear infinite;
+.client-instructions-toggle.is-open .client-rail-book-page.is-right {
+  animation: client-rail-book-turn 10s 1.1s ease-in-out infinite;
+}
+
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
+  animation: client-rail-glass-scan 10s 1.1s ease-in-out infinite;
+}
+
+.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
+  animation: client-rail-rule-tune-top 10s 1.1s ease-in-out infinite;
+}
+
+.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
+  animation: client-rail-rule-tune-bottom 10s 1.28s ease-in-out infinite;
 }
 
 @keyframes client-rail-ambient-trace {
@@ -182,6 +203,28 @@
   10%, 100% { opacity: 0; stroke-dashoffset: 0; }
 }
 
+@keyframes client-rail-book-turn {
+  0%, 2%, 10%, 100% { transform: translateX(0) scaleX(1); }
+  5% { transform: translateX(-1px) scaleX(0.18); }
+  7% { transform: translateX(-0.5px) scaleX(0.55); }
+}
+
+@keyframes client-rail-glass-scan {
+  0%, 2%, 10%, 100% { transform: translateX(0) rotate(0); }
+  4% { transform: translateX(-3px) rotate(6deg); }
+  7% { transform: translateX(1.5px) rotate(-3deg); }
+}
+
+@keyframes client-rail-rule-tune-top {
+  0%, 2%, 10%, 100% { transform: translateX(0); }
+  6% { transform: translateX(-2px); }
+}
+
+@keyframes client-rail-rule-tune-bottom {
+  0%, 2%, 10%, 100% { transform: translateX(0); }
+  6% { transform: translateX(2px); }
+}
+
 .client-local-rules-toggle:disabled {
   cursor: default;
   color: var(--client-muted);