fix: ProgressBar indeterminate animation and AvatarGroup key collision

- Use translateX instead of left for indeterminate shimmer (left doesn't
  work on non-absolutely-positioned elements)
- Use index-based key in AvatarGroup to prevent duplicate name collisions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/composites/AvatarGroup/AvatarGroup.tsx

@@ -16,7 +16,7 @@ export function AvatarGroup({ names, max = 3, size = 'md', className }: AvatarGr
     <span className={`${styles.group} ${styles[size]} ${className ?? ''}`}>
       {visible.map((name, index) => (
         <Avatar
-          key={name}
+          key={`${name}-${index}`}
           name={name}
           size={size}
           className={`${styles.avatar} ${index === 0 ? styles.first : ''}`}

src/design-system/primitives/ProgressBar/ProgressBar.module.css

@@ -36,13 +36,12 @@
 
 /* Indeterminate shimmer */
 @keyframes shimmer {
-  0%   { left: -40%; width: 40%; }
-  50%  { left: 30%; width: 60%; }
-  100% { left: 100%; width: 40%; }
+  0%   { transform: translateX(-100%); width: 40%; }
+  50%  { transform: translateX(75%); width: 60%; }
+  100% { transform: translateX(250%); width: 40%; }
 }
 
 .indeterminate {
-  position: relative;
   width: 40% !important;
   animation: shimmer 1.4s ease-in-out infinite;
 }