style: refine vibe echo to subtle pulsing keyframe animation

Replace static translate-on-hover with slow, muted keyframe rings that
scale outward and fade. Apply the effect to the analysis detail card and
timeline section. Remove overflow-hidden so rings aren't clipped.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: devakone

apps/web/src/app/analysis/[jobId]/AnalysisClient.tsx

@@ -908,7 +908,7 @@ export default function AnalysisClient({ jobId }: { jobId: string }) {
           </div>
 
           {/* Detailed Analysis Card */}
-          <div className="relative overflow-hidden rounded-[2rem] border border-black/5 bg-white shadow-sm">
+          <div className="vibe-echo relative rounded-[2rem] border border-black/5 bg-white shadow-sm">
             <div className="absolute inset-0 bg-gradient-to-br from-violet-500/8 via-transparent to-indigo-500/8" />
             <div className="relative p-8">
               <RepoIdentitySection
@@ -1113,7 +1113,7 @@ export default function AnalysisClient({ jobId }: { jobId: string }) {
             </div>
           </div>
 
-          <details className="rounded-3xl border border-black/5 bg-white p-6 shadow-sm">
+          <details className="vibe-echo rounded-3xl border border-black/5 bg-white p-6 shadow-sm">
             <summary className="cursor-pointer text-sm font-semibold text-zinc-900">
               Timeline and details
             </summary>

apps/web/src/app/globals.css

@@ -132,58 +132,90 @@ body {
   }
 }
 
-/* Vibe echo — cards that look like they're vibrating */
+/* Vibe echo — subtle radiating pulse on hover */
+@keyframes echo-ring-1 {
+  0% {
+    transform: scale(1);
+    opacity: 0.15;
+  }
+  100% {
+    transform: scale(1.015);
+    opacity: 0;
+  }
+}
+
+@keyframes echo-ring-2 {
+  0% {
+    transform: scale(1);
+    opacity: 0.1;
+  }
+  100% {
+    transform: scale(1.03);
+    opacity: 0;
+  }
+}
+
 .vibe-echo {
   position: relative;
+  transition: border-color 0.5s ease;
 }
 
 .vibe-echo::before,
 .vibe-echo::after {
   content: "";
   position: absolute;
-  inset: 0;
+  inset: -1px;
   border-radius: inherit;
-  border: 1px solid;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.4s, transform 0.4s;
 }
 
 .vibe-echo::before {
-  border-color: #7c3aed;
+  border: 1px solid #7c3aed;
 }
 
 .vibe-echo::after {
-  border-color: #6366f1;
+  border: 1px solid #6366f1;
+}
+
+.vibe-echo:hover {
+  border-color: rgba(124, 58, 237, 0.1);
 }
 
 .vibe-echo:hover::before {
-  opacity: 0.25;
-  transform: translate(-3px, -2px);
+  animation: echo-ring-1 3s ease-out infinite;
 }
 
 .vibe-echo:hover::after {
-  opacity: 0.15;
-  transform: translate(3px, 2px);
+  animation: echo-ring-2 3s ease-out 1s infinite;
 }
 
 /* Smaller echo for buttons */
+@keyframes echo-ring-sm {
+  0% {
+    transform: scale(1);
+    opacity: 0.15;
+  }
+  100% {
+    transform: scale(1.06);
+    opacity: 0;
+  }
+}
+
 .vibe-echo-sm {
   position: relative;
 }
 
 .vibe-echo-sm::after {
   content: "";
   position: absolute;
-  inset: 0;
+  inset: -1px;
   border-radius: inherit;
   border: 1px solid #6366f1;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.3s, transform 0.3s;
 }
 
 .vibe-echo-sm:hover::after {
-  opacity: 0.3;
-  transform: translate(2px, 1px);
+  animation: echo-ring-sm 2.5s ease-out infinite;
 }

apps/web/src/components/vcp/repo/RepoIdentitySection.tsx

@@ -37,7 +37,7 @@ export function RepoIdentitySection({
   className,
 }: RepoIdentitySectionProps) {
   return (
-    <div className={cn("relative overflow-hidden rounded-[2rem] border border-black/5 bg-white shadow-sm", className)}>
+    <div className={cn("relative rounded-[2rem] border border-black/5 bg-white shadow-sm", className)}>
       <div className="absolute inset-0 bg-gradient-to-br from-violet-500/8 via-transparent to-indigo-500/8" />
       <div className="relative p-8">
         <div className="max-w-2xl">