Bump Harbor versions and refine gateway mode transition

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.7.1',
-  gatewayClient: '0.7.1',
+  macClient: '0.7.2',
+  gatewayClient: '0.7.2',
   gatewayBackend: '0.7.0',
 });
 

src/web/components/ClientOverviewPage.jsx

@@ -515,7 +515,7 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, blocked, onSe
       {switchable ? <span className="harbor-mode-control">
         <span className="harbor-mode-stack" aria-hidden="true">
           <em className="harbor-mode-connect">Connect</em>
-          <em className="harbor-mode-gateway">Gateway</em>
+          <em className="harbor-mode-gateway"><span>Gateway</span></em>
         </span>
         <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
           <g className="is-connect"><path d="M3 6h10m-3-3 3 3-3 3" /></g>

src/web/styles.css

@@ -430,31 +430,33 @@ p {
 .harbor-mode-stack em {
   position: absolute;
   inset: 0 auto auto 0;
-  transition: color 420ms ease, opacity 420ms ease, filter 620ms cubic-bezier(0.16, 1, 0.3, 1), clip-path 720ms cubic-bezier(0.16, 1, 0.3, 1), transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color 420ms ease, opacity 420ms ease, filter 420ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .harbor-brand .harbor-mode-connect {
   z-index: 2;
   color: var(--harbor-connect);
-  clip-path: inset(-0.2em -0.3em);
   animation: harbor-mode-ambient-front 10s ease-in-out infinite;
 }
 
 .harbor-brand .harbor-mode-gateway {
   z-index: 1;
   color: var(--harbor-gateway);
-  opacity: 0;
-  filter: blur(5px);
-  clip-path: inset(-0.2em 100% -0.2em 0);
+  opacity: 0.2;
+  filter: blur(0.4px);
   transform: translate(0.42em, 0.34em) scale(0.96);
   animation: harbor-mode-ambient-back 10s ease-in-out infinite;
 }
 
+.harbor-mode-gateway > span {
+  display: block;
+  animation: harbor-mode-discovered 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
 .harbor-brand.is-gateway-active .harbor-mode-connect {
   z-index: 1;
-  opacity: 0;
-  filter: blur(5px);
-  clip-path: inset(-0.2em 0 -0.2em 100%);
+  opacity: 0.18;
+  filter: blur(0.4px);
   transform: translate(0.42em, 0.34em) scale(0.96);
 }
 
@@ -462,10 +464,17 @@ p {
   z-index: 2;
   opacity: 1;
   filter: none;
-  clip-path: inset(-0.2em -0.3em);
   transform: none;
 }
 
+@keyframes harbor-mode-discovered {
+  from {
+    opacity: 0;
+    filter: blur(5px);
+    clip-path: inset(0 100% 0 0);
+  }
+}
+
 .harbor-brand.is-gateway-active .harbor-mode-connect {
   animation-name: harbor-mode-ambient-back;
 }
@@ -3086,6 +3095,7 @@ p {
   }
 
   .harbor-mode-stack em,
+  .harbor-mode-gateway > span,
   .harbor-mode-swap g,
   .harbor-mode-swap path,
   .harbor-brand .harbor-mode-swap,