Polish subscription and server picker animations

src/web/styles/features/servers.css

@@ -638,6 +638,54 @@
   animation: none;
 }
 
+.client-profile-body.is-open .client-server-row {
+  animation: client-profile-server-in 420ms calc(var(--server-index) * 70ms) cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-profile-body.is-open .client-server-toolbar {
+  animation: client-profile-ping-in 300ms 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-profile-body.is-closing .client-server-toolbar {
+  animation: client-profile-ping-out 160ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+.client-profile-body.is-closing .client-server-row {
+  animation: client-profile-server-out 300ms var(--server-exit-delay) cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@keyframes client-profile-server-in {
+  from {
+    opacity: 0;
+    filter: blur(4px);
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes client-profile-server-out {
+  to {
+    opacity: 0;
+    filter: blur(4px);
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes client-profile-ping-in {
+  from {
+    opacity: 0;
+    filter: blur(4px);
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes client-profile-ping-out {
+  to {
+    opacity: 0;
+    filter: blur(4px);
+    transform: translateY(-5px);
+  }
+}
+
 .client-profile-body .client-server-row .client-server::before {
   content: '';
   width: 10px;

src/web/styles/features/subscription.css

@@ -223,11 +223,40 @@
 }
 
 .client-profile-body {
-  padding: 0 0 4px;
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  opacity: 0;
+  filter: blur(5px);
+  transition:
+    grid-template-rows 360ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 260ms ease,
+    filter 420ms ease,
+    visibility 0s 930ms;
 }
 
-.client-profile-body[aria-hidden='true'] {
-  display: none;
+.client-profile-body.is-open {
+  grid-template-rows: 1fr;
+  visibility: visible;
+  opacity: 1;
+  filter: blur(0);
+  transition:
+    grid-template-rows 620ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 260ms ease,
+    filter 420ms ease,
+    visibility 0s;
+  transition-delay: 0s;
+}
+
+.client-profile-body.is-closing {
+  visibility: visible;
+  transition-delay: 570ms, 570ms, 570ms, 0s;
+}
+
+.client-profile-body-inner {
+  min-height: 0;
+  overflow: hidden;
+  padding-bottom: 4px;
 }
 
 .client-profile-body .client-servers {
@@ -249,6 +278,15 @@
   font: inherit;
   text-align: left;
   cursor: pointer;
+  animation: client-profile-selected-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes client-profile-selected-in {
+  from {
+    opacity: 0;
+    filter: blur(3px);
+    transform: translateY(-4px);
+  }
 }
 
 .client-profile-selected-server > span {
@@ -299,6 +337,27 @@
 
 .client-subscription-sheet > .client-profile-add {
   margin-top: 8px;
+  animation: client-profile-add-open 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.client-subscription-sheet > .client-profile-add.is-closing {
+  animation: client-profile-add-close 320ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@keyframes client-profile-add-open {
+  from {
+    opacity: 0;
+    filter: blur(5px);
+    transform: translateY(-7px);
+  }
+}
+
+@keyframes client-profile-add-close {
+  to {
+    opacity: 0;
+    filter: blur(5px);
+    transform: translateY(-7px);
+  }
 }
 
 .client-profile-activate {
@@ -314,6 +373,11 @@
   width: 100%;
   margin-top: 10px;
   text-align: left;
+  animation: client-profile-add-trigger-in 240ms ease both;
+}
+
+@keyframes client-profile-add-trigger-in {
+  from { opacity: 0; }
 }
 
 .client-profile-server-hint,
@@ -433,6 +497,11 @@
 
 @media (prefers-reduced-motion: reduce) {
   .client-profile-chevron,
+  .client-profile-body,
+  .client-profile-body *,
+  .client-profile-selected-server,
+  .client-profile-add,
+  .client-profile-add-trigger,
   .client-profile-refresh,
   .client-profile-refresh svg,
   .client-profile-delete-lid,