Add shimmer effect to support button

index.html

@@ -121,7 +121,7 @@
                     </a>
                 </li>
                 <li class="slide-up" style="animation-delay: 0.4s">
-                    <a href="https://liberapay.com/krzak">
+                    <a href="https://liberapay.com/krzak" class="support-link">
                         <strong>Support</strong>
                         <span>Liberapay</span>
                     </a>

styles.css

@@ -559,3 +559,66 @@ li a span {
 
     border-color: transparent !important;
 }
+
+/* Support Button - Shimmer Effect Style */
+.support-link {
+    background: linear-gradient(
+        135deg,
+        var(--accent-color) 0%,
+        #ff8c42 100%
+    ) !important;
+    border: 2px solid rgba(255, 255, 255, 0.4) !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.support-link::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.4),
+        transparent
+    );
+    animation: shimmer 2.5s infinite;
+    z-index: 0;
+}
+
+.support-link::after {
+    display: none !important; /* Remove the standard shine effect */
+}
+
+@keyframes shimmer {
+    0% {
+        left: -100%;
+    }
+    100% {
+        left: 200%;
+    }
+}
+
+.support-link:hover {
+    transform: translateY(-3px) scale(1.01) !important;
+    box-shadow: 0 10px 40px rgba(244, 162, 97, 0.6) !important;
+    border-color: rgba(255, 255, 255, 0.6) !important;
+}
+
+.support-link strong,
+.support-link span {
+    color: #1a103c !important;
+    position: relative;
+    z-index: 1;
+}
+
+.support-link strong {
+    font-weight: 700 !important;
+}
+
+.support-link span {
+    opacity: 0.85 !important;
+}