From 85053f9948a5b99fb335f48e89271b6c63c4a246 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Sat, 11 Jul 2026 16:06:25 +0300
Subject: [PATCH] Add ambient motion to harbor mode branding

---
 src/web/styles.css | 46 ++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/web/styles.css b/src/web/styles.css
index 6fceb2c..d59e365 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -222,6 +222,7 @@ p {
 .harbor-brand .harbor-mode-connect {
   z-index: 2;
   color: var(--harbor-connect);
+  animation: harbor-mode-ambient-front 10s ease-in-out infinite;
 }
 
 .harbor-brand .harbor-mode-gateway {
@@ -230,6 +231,7 @@ p {
   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-brand.is-gateway-active .harbor-mode-connect {
@@ -246,6 +248,14 @@ p {
   transform: none;
 }
 
+.harbor-brand.is-gateway-active .harbor-mode-connect {
+  animation-name: harbor-mode-ambient-back;
+}
+
+.harbor-brand.is-gateway-active .harbor-mode-gateway {
+  animation-name: harbor-mode-ambient-front;
+}
+
 .harbor-brand-control.is-mode-animating .harbor-mode-connect {
   animation: harbor-mode-float-front 1500ms ease-in-out infinite;
 }
@@ -264,12 +274,22 @@ p {
 
 @keyframes harbor-mode-float-front {
   0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-0.18em); }
+  50% { transform: translateY(0.12em); }
 }
 
 @keyframes harbor-mode-float-back {
   0%, 100% { transform: translate(0.42em, 0.34em) scale(0.96); }
-  50% { transform: translate(0.42em, 0.58em) scale(0.96); }
+  50% { transform: translate(0.42em, 0.22em) scale(0.96); }
+}
+
+@keyframes harbor-mode-ambient-front {
+  0%, 88%, 96%, 100% { transform: translateY(0); }
+  92% { transform: translateY(0.08em); }
+}
+
+@keyframes harbor-mode-ambient-back {
+  0%, 88%, 96%, 100% { transform: translate(0.42em, 0.34em) scale(0.96); }
+  92% { transform: translate(0.42em, 0.26em) scale(0.96); }
 }
 
 .harbor-brand .harbor-mode-swap {
@@ -296,11 +316,19 @@ p {
   transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.harbor-mode-swap .is-connect path {
+  animation: harbor-arrow-ambient-right 10s ease-in-out infinite;
+}
+
 .harbor-mode-swap .is-gateway {
   stroke: var(--harbor-gateway);
   transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.harbor-mode-swap .is-gateway path {
+  animation: harbor-arrow-ambient-left 10s ease-in-out infinite;
+}
+
 .harbor-brand.is-gateway-active .harbor-mode-swap .is-connect {
   transform: translateY(6px);
 }
@@ -363,12 +391,22 @@ p {
 
 @keyframes harbor-arrow-float-right {
   0%, 100% { transform: translateX(0); }
-  50% { transform: translateX(1.5px); }
+  50% { transform: translateX(1.25px); }
 }
 
 @keyframes harbor-arrow-float-left {
   0%, 100% { transform: translateX(0); }
-  50% { transform: translateX(-1.5px); }
+  50% { transform: translateX(-1.25px); }
+}
+
+@keyframes harbor-arrow-ambient-right {
+  0%, 88%, 96%, 100% { transform: translateX(0); }
+  92% { transform: translateX(0.75px); }
+}
+
+@keyframes harbor-arrow-ambient-left {
+  0%, 88%, 96%, 100% { transform: translateX(0); }
+  92% { transform: translateX(-0.75px); }
 }
 
 .client-instructions-toggle {