Rename client app to Harbor Connect and refresh state animations

src/web/styles.css

@@ -921,6 +921,26 @@ p {
   animation: client-state-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.client-connection-title {
+  display: grid;
+  min-height: 24px;
+  place-items: center;
+}
+
+.client-connection-title > span {
+  grid-area: 1 / 1;
+  opacity: 0;
+  filter: blur(5px);
+  transform: scale(0.97);
+  transition: opacity 480ms ease, filter 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-connection-title > .is-active {
+  opacity: 1;
+  filter: blur(0);
+  transform: scale(1);
+}
+
 .client-state-detail {
   min-height: 20px;
   display: grid;
@@ -978,12 +998,24 @@ p {
 
 .client-duration-seconds-value {
   display: inline-block;
-  animation: client-second-tick 380ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-duration-second-digit {
+  display: inline-block;
+  animation: client-second-tick 520ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes client-second-tick {
-  from { opacity: 0.28; filter: blur(3px); transform: scale(0.9); }
-  to { opacity: 1; filter: blur(0); transform: scale(1); }
+  from {
+    opacity: 0.82;
+    filter: blur(1px);
+    text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 52%, transparent);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    text-shadow: 0 0 0 transparent;
+  }
 }
 
 .client-duration-toggle {
@@ -1912,6 +1944,7 @@ p {
   .client-copy-feedback,
   .client-duration,
   .client-duration-seconds-value,
+  .client-duration-second-digit,
   .client-instructions,
   .client-instructions-toggle,
   .client-instructions-toggle svg,
@@ -1961,7 +1994,9 @@ p {
   }
 
   .client-state-copy h2,
+  .client-connection-title > span,
   .client-state-detail > * {
+    transition: none;
     animation: none;
   }
 }