From 9eeb336a8b5470bcea03d6cd4262946b4a17adaf Mon Sep 17 00:00:00 2001
From: Mufeed VH <mufeedvh@gmail.com>
Date: Fri, 4 Jul 2025 18:45:46 +0530
Subject: [PATCH] feat(ui): enhance card hover effects with trailing border
 animation and fix symbol alignment

- Add trailing border effect to agent and project cards with animated conic gradient
- Fix rotating symbol vertical alignment from text-bottom to middle with position offset
- Implement CSS custom properties for smooth border animation on hover
- Maintain consistent styling across shimmer.css and styles.css files
---
 src/App.tsx            |  4 +--
 src/assets/shimmer.css |  3 ++-
 src/styles.css         | 61 +++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 97f71f2..9f0e6e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -185,7 +185,7 @@ function App() {
                   transition={{ duration: 0.5, delay: 0.1 }}
                 >
                   <Card 
-                    className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
+                    className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover trailing-border"
                     onClick={() => handleViewChange("agents")}
                   >
                     <div className="h-full flex flex-col items-center justify-center p-8">
@@ -202,7 +202,7 @@ function App() {
                   transition={{ duration: 0.5, delay: 0.2 }}
                 >
                   <Card 
-                    className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
+                    className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover trailing-border"
                     onClick={() => handleViewChange("projects")}
                   >
                     <div className="h-full flex flex-col items-center justify-center p-8">
diff --git a/src/assets/shimmer.css b/src/assets/shimmer.css
index 2ddb2a2..d41a94d 100644
--- a/src/assets/shimmer.css
+++ b/src/assets/shimmer.css
@@ -105,9 +105,10 @@
   font-size: 1.5rem; /* Make it bigger! */
   margin-right: 0.5rem;
   font-weight: bold;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   position: relative;
   line-height: 1;
+  top: -2px;
 }
 
 .rotating-symbol::before {
diff --git a/src/styles.css b/src/styles.css
index fc8ab23..5b1fa96 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -442,11 +442,13 @@ button:focus-visible,
 
 .rotating-symbol {
   display: inline-block;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   line-height: 1;
   animation: fade-in 0.2s ease-out;
   font-weight: normal;
   font-size: 1.5rem; /* Make it bigger! */
+  position: relative;
+  top: -2px;
 }
 
 .rotating-symbol::before {
@@ -497,6 +499,63 @@ button:focus-visible,
   animation: shimmer 0.5s;
 }
 
+/* Trailing border effect */
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes trail-rotate {
+  to {
+    --angle: 360deg;
+  }
+}
+
+.trailing-border {
+  position: relative;
+  background: var(--color-card);
+  z-index: 0;
+  overflow: visible;
+}
+
+/* The correctly traveling border line */
+.trailing-border::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  padding: 2px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--angle),
+    transparent 0%,
+    transparent 85%,
+    #d97757 90%,
+    #ff9a7a 92.5%,
+    #d97757 95%,
+    transparent 100%
+  );
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.trailing-border:hover::after {
+  opacity: 1;
+  animation: trail-rotate 2s linear infinite;
+}
+
+/* Ensure the card content stays above the border effect */
+.trailing-border > * {
+  position: relative;
+  z-index: 1;
+}
+
 /* --- THEME-MATCHING SCROLLBARS --- */
 
 /* For Firefox */