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,9 +1353,11 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
       },
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 8),
-        child: ClipRRect(
-          borderRadius: BorderRadius.circular(radius),
-          child: Stack(
+        child: Hero(
+          tag: 'event-hero-${event.id}',
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(radius),
+            child: Stack(
             fit: StackFit.expand,
             children: [
               // ── Layer 0: Event image (full-bleed) ──
@@ -1487,6 +1489,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
           ),
         ),
       ),
+    ),
     );
   }
 
@@ -1770,14 +1773,16 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
           Navigator.push(context, MaterialPageRoute(builder: (_) => LearnMoreScreen(eventId: event.id, initialEvent: event)));
         }
       },
-      child: Container(
-        width: 150,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(16),
-        ),
-        clipBehavior: Clip.antiAlias,
-        child: Stack(
-          fit: StackFit.expand,
+      child: Hero(
+        tag: 'event-hero-${event.id}',
+        child: Container(
+          width: 150,
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(16),
+          ),
+          clipBehavior: Clip.antiAlias,
+          child: Stack(
+            fit: StackFit.expand,
           children: [
             // Background image
             img != null && img.isNotEmpty
@@ -1836,6 +1841,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,8 +612,10 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
               ),
             )
           : null,
-      body: Stack(
-        children: [
+      body: FadeTransition(
+        opacity: _fade,
+        child: Stack(
+          children: [
           // ── Scrollable content (carousel + card scroll together) ──
           SingleChildScrollView(
             child: Column(
@@ -735,6 +747,7 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
           ),
         ],
       ),
+    ),
     );
   }
 
@@ -876,9 +889,11 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
               left: 20,
               right: 20,
               bottom: 16,
-              child: ClipRRect(
-                borderRadius: BorderRadius.circular(20),
-                child: PageView.builder(
+              child: Hero(
+                tag: 'event-hero-${widget.eventId}',
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(20),
+                  child: PageView.builder(
                   controller: _pageController,
                   onPageChanged: (i) => _pageNotifier.value = i,
                   itemCount: images.length,
@@ -900,6 +915,7 @@ class _LearnMoreScreenState extends State<LearnMoreScreen> {
                 ),
               ),
             ),
+          ),
 
           // ---- No-image placeholder ----
           if (images.isEmpty)