style(webdev): sparkly yellow tag with CSS gradient and shine (#52)

Replace the purple webdev pill with an animated gold/yellow gradient,
a periodic highlight sweep via ::after, and a subtle text glow.
Respects prefers-reduced-motion by disabling animations.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: basicBrogrammer

components/ArticleTag.vue

@@ -58,8 +58,72 @@ a::before {
   color: #fff;
 }
 .webdev {
-  background-color: #562765;
-  color: #fff;
+  position: relative;
+  overflow: hidden;
+  color: #3d2a00;
+  border-color: #c9a227;
+  background: linear-gradient(
+    125deg,
+    #ffd700 0%,
+    #ffec8b 18%,
+    #ffe135 38%,
+    #fffef0 50%,
+    #ffd700 62%,
+    #daa520 82%,
+    #ffec8b 100%
+  );
+  background-size: 280% 280%;
+  animation: webdev-sparkle 3.5s ease-in-out infinite;
+  text-shadow: 0 0 2px rgb(255 255 255 / 75%);
+}
+
+.webdev::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    110deg,
+    transparent 0%,
+    transparent 40%,
+    rgb(255 255 255 / 65%) 50%,
+    transparent 60%,
+    transparent 100%
+  );
+  transform: translateX(-120%);
+  animation: webdev-shine 2.6s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes webdev-sparkle {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes webdev-shine {
+  0% {
+    transform: translateX(-120%);
+  }
+  25%,
+  100% {
+    transform: translateX(120%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .webdev {
+    animation: none;
+    background-size: 100% 100%;
+  }
+
+  .webdev::after {
+    display: none;
+  }
 }
 .productivity {
   background-color: #2a0798;