feat: add bouncy sliding glass-glider animation to contribute tabs

Replicate the web app's glass-radio-group animation on the Flutter
contribute screen. Key changes:

- Sliding white glider pill behind active tab using AnimatedPositioned
- Bouncy spring physics: Cubic(0.37, 1.95, 0.66, 0.56) matching the
  web CSS cubic-bezier that overshoots and settles
- Glassmorphic container: semi-transparent white bg with white border
- AnimatedDefaultTextStyle for smooth color transitions (blue active,
  white 0.7 opacity inactive)
- AnimatedSize for icon appear/disappear on active tab
- LayoutBuilder for responsive tab width calculation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/screens/contribute_screen.dart

@@ -230,55 +230,114 @@ class _ContributeScreenState extends State<ContributeScreen> with SingleTickerPr
     );
   }
 
+  /// Bouncy spring curve matching web CSS: cubic-bezier(0.37, 1.95, 0.66, 0.56)
+  static const Curve _bouncyCurve = Cubic(0.37, 1.95, 0.66, 0.56);
+
+  /// Tab icons for each tab
+  static const List<IconData> _tabIcons = [
+    Icons.edit_outlined,
+    Icons.emoji_events_outlined,
+    Icons.workspace_premium_outlined,
+  ];
+
   Widget _buildSegmentedTabs(BuildContext context) {
     final tabs = ['Contribute', 'Leaderboard', 'Achievements'];
 
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 10),
+      child: LayoutBuilder(
+        builder: (context, constraints) {
+          final containerWidth = constraints.maxWidth;
+          // 6px padding on each side of the container
+          const double containerPadding = 6.0;
+          final innerWidth = containerWidth - (containerPadding * 2);
+          final tabWidth = innerWidth / tabs.length;
+
+          return ClipRRect(
+            borderRadius: BorderRadius.circular(16),
             child: Container(
-        padding: const EdgeInsets.all(8),
+              height: 57,
               decoration: BoxDecoration(
-          color: Colors.white.withOpacity(0.06),
+                color: Colors.white.withOpacity(0.15),
-          borderRadius: BorderRadius.circular(_cornerRadius + 6),
+                borderRadius: BorderRadius.circular(16),
-          border: Border.all(color: Colors.white.withOpacity(0.10)),
+                border: Border.all(color: Colors.white.withOpacity(0.2)),
-          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 8, offset: const Offset(0, 6))],
               ),
+              child: Stack(
+                children: [
+                  // ── Sliding glider ──
+                  AnimatedPositioned(
+                    duration: const Duration(milliseconds: 500),
+                    curve: _bouncyCurve,
+                    left: containerPadding + (_activeTab * tabWidth),
+                    top: containerPadding,
+                    width: tabWidth,
+                    height: 57 - (containerPadding * 2),
+                    child: AnimatedContainer(
+                      duration: const Duration(milliseconds: 400),
+                      curve: Curves.easeInOut,
+                      decoration: BoxDecoration(
+                        color: Colors.white.withOpacity(0.95),
+                        borderRadius: BorderRadius.circular(12),
+                        boxShadow: [
+                          BoxShadow(
+                            color: Colors.black.withOpacity(0.10),
+                            blurRadius: 15,
+                            offset: const Offset(0, 4),
+                          ),
+                          BoxShadow(
+                            color: Colors.black.withOpacity(0.08),
+                            blurRadius: 3,
+                            offset: const Offset(0, 1),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+
+                  // ── Tab labels ──
+                  Padding(
+                    padding: const EdgeInsets.all(containerPadding),
                     child: Row(
                       children: List.generate(tabs.length, (i) {
                         final active = i == _activeTab;
                         return Expanded(
                           child: GestureDetector(
                             onTap: () => setState(() => _activeTab = i),
-                child: AnimatedContainer(
+                            behavior: HitTestBehavior.opaque,
-                  duration: const Duration(milliseconds: 220),
+                            child: SizedBox(
-                  padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 10),
+                              height: double.infinity,
-                  margin: EdgeInsets.only(right: i == tabs.length - 1 ? 0 : 8),
-                  decoration: BoxDecoration(
-                    color: active ? Colors.white : Colors.transparent,
-                    borderRadius: BorderRadius.circular(_cornerRadius - 4),
-                    boxShadow: active ? [BoxShadow(color: Colors.black.withOpacity(0.06), blurRadius: 8, offset: const Offset(0, 4))] : null,
-                  ),
                               child: Row(
                                 mainAxisAlignment: MainAxisAlignment.center,
                                 children: [
-                      // show a small icon only for active tab
+                                  // Animated icon: only shows for active tab
-                      if (active) ...[
+                                  AnimatedSize(
-                        Icon(Icons.edit, size: 14, color: _primary),
+                                    duration: const Duration(milliseconds: 300),
-                        const SizedBox(width: 8),
+                                    curve: Curves.easeInOut,
-                      ],
+                                    child: active
-                      // FittedBox ensures the whole word is visible (scales down if necessary)
+                                        ? Padding(
+                                            padding: const EdgeInsets.only(right: 6),
+                                            child: Icon(
+                                              _tabIcons[i],
+                                              size: 15,
+                                              color: _primary,
+                                            ),
+                                          )
+                                        : const SizedBox.shrink(),
+                                  ),
                                   Flexible(
-                        child: FittedBox(
+                                    child: AnimatedDefaultTextStyle(
-                          fit: BoxFit.scaleDown,
+                                      duration: const Duration(milliseconds: 300),
-                          alignment: Alignment.center,
+                                      curve: Curves.easeInOut,
+                                      style: TextStyle(
+                                        color: active ? _primary : Colors.white.withOpacity(0.7),
+                                        fontWeight: FontWeight.w600,
+                                        fontSize: 14,
+                                        fontFamily: Theme.of(context).textTheme.bodyMedium?.fontFamily,
+                                      ),
                                       child: Text(
                                         tabs[i],
                                         textAlign: TextAlign.center,
-                            style: TextStyle(
+                                        overflow: TextOverflow.ellipsis,
-                              color: active ? _primary : Colors.white.withOpacity(0.95),
-                              fontWeight: active ? FontWeight.w800 : FontWeight.w600,
-                              fontSize: 16, // preferred size; FittedBox will shrink if needed
-                            ),
                                       ),
                                     ),
                                   ),
@@ -290,6 +349,12 @@ class _ContributeScreenState extends State<ContributeScreen> with SingleTickerPr
                       }),
                     ),
                   ),
+                ],
+              ),
+            ),
+          );
+        },
+      ),
     );
   }