feat: UX-005 — Hero transitions, fade screen load, AnimatedList leaderboard stagger

lib/screens/contribute_screen.dart

@@ -14,6 +14,7 @@ import 'package:share_plus/share_plus.dart';
 import '../core/app_decoration.dart';
 import '../features/gamification/models/gamification_models.dart';
 import '../features/gamification/providers/gamification_provider.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 import '../widgets/bouncing_loader.dart';
 import '../widgets/glass_card.dart';
 import '../widgets/landscape_section_header.dart';
@@ -2146,12 +2147,19 @@ class _ContributeScreenState extends State<ContributeScreen>
                   ),
                 ),
 
-                // Ranked list (rank 4+)
+                // Ranked list (rank 4+) with stagger animation
                 SliverList(
                   delegate: SliverChildBuilderDelegate(
                     (ctx, i) {
                       final entry = entries.length > 3 ? entries[i + 3] : entries[i];
-                      return _buildRankRow(entry);
+                      return AnimationConfiguration.staggeredList(
+                        position: i,
+                        duration: const Duration(milliseconds: 375),
+                        child: SlideAnimation(
+                          verticalOffset: 40.0,
+                          child: FadeInAnimation(child: _buildRankRow(entry)),
+                        ),
+                      );
                     },
                     childCount: entries.length > 3 ? entries.length - 3 : 0,
                   ),

lib/screens/home_screen.dart

@@ -1353,6 +1353,8 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
       },
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 8),
+        child: Hero(
+          tag: 'event-hero-${event.id}',
           child: ClipRRect(
             borderRadius: BorderRadius.circular(radius),
             child: Stack(
@@ -1487,6 +1489,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
           ),
         ),
       ),
+    ),
     );
   }
 
@@ -1770,6 +1773,8 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
           Navigator.push(context, MaterialPageRoute(builder: (_) => LearnMoreScreen(eventId: event.id, initialEvent: event)));
         }
       },
+      child: Hero(
+        tag: 'event-hero-${event.id}',
         child: Container(
           width: 150,
           decoration: BoxDecoration(
@@ -1837,6 +1842,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
           ],
         ),
         ),
+      ),
     );
   }
 

lib/screens/learn_more_screen.dart

@@ -28,9 +28,12 @@ class LearnMoreScreen extends StatefulWidget {
   State<LearnMoreScreen> createState() => _LearnMoreScreenState();
 }
 
-class _LearnMoreScreenState extends State<LearnMoreScreen> {
+class _LearnMoreScreenState extends State<LearnMoreScreen> with SingleTickerProviderStateMixin {
   final EventsService _service = EventsService();
 
+  late final AnimationController _fadeController;
+  late final Animation<double> _fade;
+
   void _navigateToCheckout() {
     if (!AuthGuard.requireLogin(context, reason: 'Sign in to book this event.')) return;
     if (_event == null) return;
@@ -68,10 +71,13 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
   @override
   void initState() {
     super.initState();
+    _fadeController = AnimationController(vsync: this, duration: const Duration(milliseconds: 350));
+    _fade = CurvedAnimation(parent: _fadeController, curve: Curves.easeIn);
     _pageNotifier = ValueNotifier(0);
     if (widget.initialEvent != null) {
       _event = widget.initialEvent;
       _loading = false;
+      _fadeController.forward();
       WidgetsBinding.instance.addPostFrameCallback((_) {
         _startAutoScroll();
         // Fetch full event details in background to get important_information, images, etc.
@@ -88,6 +94,7 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
     _pageController.dispose();
     _pageNotifier.dispose();
     _mapController?.dispose();
+    _fadeController.dispose();
     super.dispose();
   }
 
@@ -132,7 +139,10 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
       if (!mounted) return;
       setState(() => _error = userFriendlyError(e));
     } finally {
-      if (mounted) setState(() => _loading = false);
+      if (mounted) {
+        setState(() => _loading = false);
+        _fadeController.forward();
+      }
     }
   }
 
@@ -602,7 +612,9 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
               ),
             )
           : null,
-      body: Stack(
+      body: FadeTransition(
+        opacity: _fade,
+        child: Stack(
           children: [
           // ── Scrollable content (carousel + card scroll together) ──
           SingleChildScrollView(
@@ -735,6 +747,7 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
           ),
         ],
       ),
+    ),
     );
   }
 
@@ -876,6 +889,8 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
               left: 20,
               right: 20,
               bottom: 16,
+              child: Hero(
+                tag: 'event-hero-${widget.eventId}',
                 child: ClipRRect(
                   borderRadius: BorderRadius.circular(20),
                   child: PageView.builder(
@@ -900,6 +915,7 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
                 ),
               ),
             ),
+          ),
 
           // ---- No-image placeholder ----
           if (images.isEmpty)