Refine goal HUD animations

styles.css

@@ -159,14 +159,137 @@ canvas {
     height: 8px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.08);
-    overflow: hidden;
+    overflow: visible;
     border: 1px solid rgba(148, 163, 184, 0.16);
+    position: relative;
+}
+.progress.goal-near,
+.progress.goal-complete {
+    box-shadow:
+        0 0 8px rgba(34, 211, 238, 0.2),
+        0 0 12px rgba(167, 139, 250, 0.16);
+}
+.progress.goal-near {
+    animation: goalAura 1100ms ease-in-out infinite;
+}
+.progress.goal-complete {
+    animation: goalAura 920ms ease-in-out infinite;
+    box-shadow:
+        0 0 12px rgba(34, 211, 238, 0.28),
+        0 0 18px rgba(167, 139, 250, 0.22);
 }
 .progress__bar {
     height: 100%;
     width: 0%;
     background: linear-gradient(135deg, #22d3ee, #a78bfa);
-    transition: width 150ms ease;
+    transition:
+        width 150ms ease,
+        transform 220ms ease,
+        filter 220ms ease;
+    position: relative;
+    box-shadow: 0 0 0 rgba(34, 211, 238, 0);
+    transform-origin: left center;
+}
+.progress__bar::after {
+    content: "";
+    position: absolute;
+    inset: -6px -2px;
+    border-radius: inherit;
+    background: inherit;
+    opacity: 0;
+    filter: blur(10px);
+    transform: scale(0.98);
+    pointer-events: none;
+    transition:
+        opacity 180ms ease,
+        transform 180ms ease;
+}
+.progress__bar.goal-gradient {
+    background: linear-gradient(90deg, #22d3ee, #a78bfa);
+    background-size: 180% 100%;
+    animation: goalShimmer 2200ms ease-in-out infinite;
+}
+.progress__bar.goal-near {
+    animation:
+        goalPulse var(--goal-pulse-speed, 900ms) ease-in-out infinite,
+        goalGlow 1400ms ease-in-out infinite;
+    box-shadow:
+        0 0 12px rgba(34, 211, 238, 0.4),
+        0 0 18px rgba(167, 139, 250, 0.3);
+    filter: saturate(1.1);
+}
+.progress__bar.goal-near::after {
+    opacity: 0.45;
+    transform: scale(1.03);
+    animation: goalAura 900ms ease-in-out infinite;
+}
+.progress__bar.goal-complete {
+    animation:
+        goalPulse 820ms ease-in-out infinite,
+        goalGlow 1000ms ease-in-out infinite,
+        goalShimmer 1400ms linear infinite;
+    box-shadow:
+        0 0 18px rgba(34, 211, 238, 0.5),
+        0 0 26px rgba(167, 139, 250, 0.4),
+        0 0 36px rgba(14, 165, 233, 0.35);
+    filter: saturate(1.2);
+}
+.progress__bar.goal-complete::after {
+    opacity: 0.65;
+    transform: scale(1.06);
+    animation: goalAura 760ms ease-in-out infinite;
+}
+@keyframes goalPulse {
+    0% {
+        transform: scaleY(1);
+        filter: brightness(1);
+    }
+    50% {
+        transform: scaleY(1.2);
+        filter: brightness(1.12);
+    }
+    100% {
+        transform: scaleY(1);
+        filter: brightness(1);
+    }
+}
+@keyframes goalAura {
+    0% {
+        opacity: 0.2;
+        transform: scale(1.02);
+    }
+    50% {
+        opacity: 0.7;
+        transform: scale(1.12);
+    }
+    100% {
+        opacity: 0.2;
+        transform: scale(1.02);
+    }
+}
+@keyframes goalGlow {
+    0% {
+        filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0));
+    }
+    50% {
+        filter: drop-shadow(
+            0 0 14px rgba(34, 211, 238, var(--goal-glow-alpha, 0.55))
+        );
+    }
+    100% {
+        filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0));
+    }
+}
+@keyframes goalShimmer {
+    0% {
+        background-position: 0% 0;
+    }
+    50% {
+        background-position: 80% 0;
+    }
+    100% {
+        background-position: 0% 0;
+    }
 }
 .selector {
     background: rgba(0, 0, 0, 0.25);