Refine rail drawer switching and toggle animations

src/web/styles/primitives.css

@@ -68,80 +68,152 @@
   filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 52%, transparent));
 }
 
+.client-rail-subscription-back,
+.client-rail-subscription-front,
+.client-rail-subscription-lines,
+.client-rail-book-page,
+.client-rail-book-spine,
 .client-rail-device-primary,
 .client-rail-device-secondary,
+.client-rail-device-link,
+.client-rail-device-bridge,
+.client-rail-device-pulse,
+.client-rail-diagnostics-base,
+.client-rail-diagnostics-pulse,
 .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);
 }
 
-.client-rail-info-ring {
-  stroke-dasharray: 1;
+.client-rail-action .client-rail-subscription-card,
+.client-rail-action .client-rail-rule-knob {
+  fill: var(--client-bg);
 }
 
+.client-rail-subscription-back {
+  transform: translate(-1.4px, 1.4px);
+}
+
+.client-rail-subscription-front {
+  transform: translateX(1px);
+}
+
+.client-rail-subscription-lines {
+  opacity: 0.52;
+  transform: scaleX(0.68);
+  transform-origin: left center;
+}
+
+.client-subscription-toggle.is-open .client-rail-subscription-back {
+  transform: translate(0, 0);
+}
+
+.client-subscription-toggle.is-open .client-rail-subscription-front {
+  transform: translate(-1px, 0.6px);
+}
+
+.client-subscription-toggle.is-open .client-rail-subscription-lines {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.client-rail-book-page.is-left {
+  transform: translateX(1.7px) scaleX(0.58);
+  transform-origin: right center;
+}
+
+.client-rail-book-page.is-right {
+  transform: translateX(-1.7px) scaleX(0.58);
+  transform-origin: left center;
+}
+
+.client-rail-book-spine {
+  opacity: 0.55;
+  transform: scaleY(0.74);
+}
+
+.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-rail-device-primary {
+  transform: translate(-0.9px, -1.8px);
+}
+
+.client-rail-device-secondary {
+  transform: translate(0.9px, -1.8px);
+}
+
+.client-rail-device-link {
+  opacity: 0.55;
+}
+
+.client-rail-device-bridge {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.client-rail-device-pulse,
 .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);
-}
-
-.client-devices-toggle.is-open .client-rail-device-primary {
-  animation: client-rail-device-left 680ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
+.client-devices-toggle.is-open .client-rail-device-primary,
 .client-devices-toggle.is-open .client-rail-device-secondary {
-  animation: client-rail-device-right 680ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translate(0, 0);
+}
+
+.client-devices-toggle.is-open .client-rail-device-link {
+  opacity: 1;
+}
+
+.client-devices-toggle.is-open .client-rail-device-bridge {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.client-devices-toggle.is-open .client-rail-device-pulse {
+  animation: client-rail-device-signal 760ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-rail-diagnostics-base,
+.client-rail-diagnostics-pulse {
+  vector-effect: non-scaling-stroke;
+  transform: scaleY(0.22);
+}
+
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-base,
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
+  transform: scaleY(1);
 }
 
 .client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
-  animation: client-rail-diagnostics-pulse 760ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation: client-rail-diagnostics-scan 760ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
-  animation: client-rail-rule-top 680ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateX(3px);
 }
 
 .client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
-  animation: client-rail-rule-bottom 680ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateX(-3px);
 }
 
-@keyframes client-rail-info-refill {
-  from { opacity: 0.28; stroke-dashoffset: 1; }
-  to { opacity: 1; stroke-dashoffset: 0; }
-}
-
-@keyframes client-rail-device-left {
-  0%, 100% { transform: translate(0, 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); }
-  38%, 58% { transform: translate(0.6px, -2.25px); }
-  82% { transform: translate(-0.15px, 0.35px); }
-}
-
-@keyframes client-rail-diagnostics-pulse {
+@keyframes client-rail-device-signal {
   0% { opacity: 0; stroke-dashoffset: 1; }
-  16%, 84% { opacity: 1; }
+  18%, 78% { 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); }
-}
-
-@keyframes client-rail-rule-bottom {
-  0%, 100% { transform: translateX(0); }
-  42% { transform: translateX(3px); }
-  72% { transform: translateX(-1px); }
+@keyframes client-rail-diagnostics-scan {
+  0% { opacity: 0; stroke-dashoffset: 1; }
+  16%, 84% { opacity: 1; }
+  100% { opacity: 0; stroke-dashoffset: 0; }
 }
 
 .client-local-rules-toggle:disabled {