Add pulsating energy effects to navbar sphere logo

✨ Enhanced logo animations with vibrant color cycling:
- 8-stage vibrantPulse animation with dramatic color transitions
- Enhanced gradient with 7 colors (blue→green→purple→orange→red→violet→teal)
- Dual rotating conic gradients for multi-layered energy effect
- Faster animation timings (2.5s/3.5s) for more dynamic feel
- Larger background size (400%) for smoother color transitions
- Multiple glow layers with varying intensities

The sphere now pulses with energy while cycling through the full color spectrum,
creating a mesmerizing effect that matches the dynamic AbstractCore branding!

Author: lpalbou

assets/css/main.css

@@ -267,10 +267,10 @@ a:hover {
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 50%;
-    background: linear-gradient(135deg, #3b82f6, #10b981, #6366f1);
-    background-size: 200% 200%;
+    background: linear-gradient(135deg, #3b82f6, #10b981, #6366f1, #f59e0b, #ef4444, #a855f7, #14b8a6);
+    background-size: 400% 400%;
     position: relative;
-    animation: vibrantPulse 3s ease-in-out infinite, gradientShift 4s ease-in-out infinite;
+    animation: vibrantPulse 2.5s ease-in-out infinite, gradientShift 3.5s ease-in-out infinite;
     box-shadow: 
         0 0 20px rgba(59, 130, 246, 0.4),
         0 0 40px rgba(16, 185, 129, 0.2),
@@ -286,11 +286,41 @@ a:hover {
     left: -50%;
     width: 200%;
     height: 200%;
-    background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.3), transparent);
+    background: conic-gradient(from 0deg, 
+        transparent, 
+        rgba(59, 130, 246, 0.4), 
+        rgba(16, 185, 129, 0.3), 
+        rgba(99, 102, 241, 0.4),
+        rgba(245, 158, 11, 0.3),
+        rgba(239, 68, 68, 0.4),
+        rgba(168, 85, 247, 0.3),
+        transparent);
     animation: rotate 2s linear infinite;
     border-radius: 50%;
 }
 
+.logo-circle::after {
+    content: '';
+    position: absolute;
+    top: -25%;
+    left: -25%;
+    width: 150%;
+    height: 150%;
+    background: conic-gradient(from 180deg, 
+        transparent 0deg,
+        rgba(239, 68, 68, 0.2) 45deg,
+        rgba(168, 85, 247, 0.3) 90deg,
+        rgba(20, 184, 166, 0.2) 135deg,
+        rgba(59, 130, 246, 0.3) 180deg,
+        rgba(16, 185, 129, 0.2) 225deg,
+        rgba(245, 158, 11, 0.3) 270deg,
+        rgba(99, 102, 241, 0.2) 315deg,
+        transparent 360deg);
+    animation: rotate 3s linear infinite reverse;
+    border-radius: 50%;
+    opacity: 0.6;
+}
+
 .orbit-container {
     position: absolute;
     width: 3rem;
@@ -392,26 +422,93 @@ a:hover {
     0%, 100% {
         transform: scale(1) rotateY(0deg);
         box-shadow: 
-            0 0 20px rgba(59, 130, 246, 0.4),
-            0 0 40px rgba(16, 185, 129, 0.2),
+            0 0 25px rgba(59, 130, 246, 0.6),
+            0 0 50px rgba(16, 185, 129, 0.3),
+            0 0 80px rgba(59, 130, 246, 0.1),
             inset 0 1px 0 rgba(255, 255, 255, 0.3);
     }
-    50% {
-        transform: scale(1.08) rotateY(5deg);
+    12.5% {
+        transform: scale(1.05) rotateY(45deg);
         box-shadow: 
-            0 0 30px rgba(59, 130, 246, 0.6),
-            0 0 60px rgba(16, 185, 129, 0.4),
-            0 0 80px rgba(99, 102, 241, 0.2),
+            0 0 35px rgba(16, 185, 129, 0.8),
+            0 0 70px rgba(99, 102, 241, 0.4),
+            0 0 120px rgba(16, 185, 129, 0.2),
             inset 0 1px 0 rgba(255, 255, 255, 0.4);
     }
+    25% {
+        transform: scale(1.1) rotateY(90deg);
+        box-shadow: 
+            0 0 40px rgba(99, 102, 241, 0.9),
+            0 0 80px rgba(245, 158, 11, 0.5),
+            0 0 140px rgba(99, 102, 241, 0.25),
+            inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    }
+    37.5% {
+        transform: scale(1.08) rotateY(135deg);
+        box-shadow: 
+            0 0 45px rgba(245, 158, 11, 0.8),
+            0 0 90px rgba(239, 68, 68, 0.4),
+            0 0 160px rgba(245, 158, 11, 0.2),
+            inset 0 1px 0 rgba(255, 255, 255, 0.45);
+    }
+    50% {
+        transform: scale(1.15) rotateY(180deg);
+        box-shadow: 
+            0 0 50px rgba(239, 68, 68, 0.9),
+            0 0 100px rgba(168, 85, 247, 0.5),
+            0 0 180px rgba(239, 68, 68, 0.25),
+            inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    }
+    62.5% {
+        transform: scale(1.08) rotateY(225deg);
+        box-shadow: 
+            0 0 45px rgba(168, 85, 247, 0.8),
+            0 0 90px rgba(20, 184, 166, 0.4),
+            0 0 160px rgba(168, 85, 247, 0.2),
+            inset 0 1px 0 rgba(255, 255, 255, 0.45);
+    }
+    75% {
+        transform: scale(1.1) rotateY(270deg);
+        box-shadow: 
+            0 0 40px rgba(20, 184, 166, 0.8),
+            0 0 80px rgba(59, 130, 246, 0.4),
+            0 0 140px rgba(20, 184, 166, 0.2),
+            inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    }
+    87.5% {
+        transform: scale(1.05) rotateY(315deg);
+        box-shadow: 
+            0 0 30px rgba(59, 130, 246, 0.7),
+            0 0 60px rgba(16, 185, 129, 0.3),
+            0 0 100px rgba(59, 130, 246, 0.15),
+            inset 0 1px 0 rgba(255, 255, 255, 0.35);
+    }
 }
 
 @keyframes gradientShift {
-    0%, 100% {
+    0% {
         background-position: 0% 50%;
     }
-    50% {
-        background-position: 100% 50%;
+    14% {
+        background-position: 25% 25%;
+    }
+    28% {
+        background-position: 75% 75%;
+    }
+    42% {
+        background-position: 100% 25%;
+    }
+    57% {
+        background-position: 75% 100%;
+    }
+    71% {
+        background-position: 25% 75%;
+    }
+    85% {
+        background-position: 50% 0%;
+    }
+    100% {
+        background-position: 0% 50%;
     }
 }