add pulsing glow animation for the pop-up

components/reward-popup.js

@@ -32,7 +32,6 @@ class RewardPopup extends HTMLElement {
           background: rgba(0, 0, 0, 0.8);
           backdrop-filter: blur(5px);
         }
-        
         .popup-content {
           position: relative;
           width: 90%;
@@ -46,9 +45,18 @@ class RewardPopup extends HTMLElement {
           transform: scale(0.9);
           transition: transform 0.3s ease;
           z-index: 2;
+          animation: pulse-glow 2s infinite alternate;
         }
-        
-        :host([open]) .popup-content {
+
+        @keyframes pulse-glow {
+          0% {
+            box-shadow: 0 0 20px var(--rarity-color);
+          }
+          100% {
+            box-shadow: 0 0 40px var(--rarity-color);
+          }
+        }
+:host([open]) .popup-content {
           transform: scale(1);
         }
         
@@ -59,7 +67,6 @@ class RewardPopup extends HTMLElement {
           text-transform: uppercase;
           letter-spacing: 2px;
         }
-        
         .reward-image {
           width: 120px;
           height: 120px;
@@ -70,9 +77,20 @@ class RewardPopup extends HTMLElement {
           align-items: center;
           justify-content: center;
           box-shadow: 0 0 20px var(--rarity-color);
+          animation: pulse-glow-image 1.5s infinite alternate;
         }
-        
-        .reward-name {
+
+        @keyframes pulse-glow-image {
+          0% {
+            transform: scale(1);
+            box-shadow: 0 0 20px var(--rarity-color);
+          }
+          100% {
+            transform: scale(1.05);
+            box-shadow: 0 0 30px var(--rarity-color);
+          }
+        }
+.reward-name {
           color: white;
           font-size: 1.2rem;
           margin-bottom: 0.5rem;