[DESIGN-004] Add staggered layered animations to hero section (feat)

- Implemented sequential fade-in animations for all hero elements
- Each element appears with timed delay (0.2s → 1.3s)
- Added fadeInUp, fadeInScale, slideInRight animations
- Main illustration fades in at 0.3s
- Floating cards appear sequentially (0.9s, 1.1s, 1.3s)
- Text and buttons animate from bottom to top
- Smooth professional loading experience
- Mimics layered reveal seen in premium themes

Animation Timeline:
- 0.2s: Coming soon badge
- 0.3s: Main illustration
- 0.4s: Heading
- 0.6s: Description
- 0.8s: Primary button
- 1.0s: Secondary button
- 0.9s-1.3s: Floating stats cards

src/presentation/web/assets/custom.css

@@ -46,3 +46,36 @@ body {
     50% { transform: scale(1.05) translateY(-15px); }
 }
 
+@keyframes fadeInUp {
+    0% { 
+        opacity: 0; 
+        transform: translateY(60px) scale(0.9);
+    }
+    100% { 
+        opacity: 1; 
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes fadeInScale {
+    0% { 
+        opacity: 0; 
+        transform: scale(0.8);
+    }
+    100% { 
+        opacity: 1; 
+        transform: scale(1);
+    }
+}
+
+@keyframes slideInRight {
+    0% { 
+        opacity: 0; 
+        transform: translateX(100px);
+    }
+    100% { 
+        opacity: 1; 
+        transform: translateX(0);
+    }
+}
+

src/presentation/web/pages/landing/index.py

@@ -126,6 +126,7 @@ def hero() -> rx.Component:
                     box_shadow="0 12px 50px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.3)",
                     margin_bottom="32px",
                     font_size="17px",
+                    style={"animation": "fadeInUp 0.8s ease-out 0.2s backwards"},
                 ),
                 # rx.badge(
                 #     rx.hstack(
@@ -158,6 +159,7 @@ def hero() -> rx.Component:
                     line_height="1.15",
                     letter_spacing="-0.04em",
                     margin_top="16px",
+                    style={"animation": "fadeInUp 0.8s ease-out 0.4s backwards"},
                 ),
                 rx.text(
                     "اولین و تخصصی‌ترین ارائه‌دهنده کلود اختصاصی وردپرس در ایران.",
@@ -169,6 +171,7 @@ def hero() -> rx.Component:
                     font_weight="500",
                     margin_top="24px",
                     margin_bottom="8px",
+                    style={"animation": "fadeInUp 0.8s ease-out 0.6s backwards"},
                 ),
                 rx.hstack(
                     rx.button(
@@ -189,7 +192,7 @@ def hero() -> rx.Component:
                             "box_shadow": "0 25px 70px rgba(27, 75, 127, 0.9), 0 0 120px rgba(109, 215, 229, 0.6)"
                         },
                         transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
-                        style={"animation": "glow 4s ease-in-out infinite"},
+                        style={"animation": "glow 4s ease-in-out infinite, fadeInUp 0.8s ease-out 0.8s backwards"},
                     ),
                     rx.button(
                         rx.hstack(
@@ -214,6 +217,7 @@ def hero() -> rx.Component:
                             "box_shadow": "0 20px 60px rgba(109, 215, 229, 0.5)"
                         },
                         transition="all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+                        style={"animation": "fadeInUp 0.8s ease-out 1s backwards"},
                     ),
                     spacing="6",
                     margin_top="56px",
@@ -280,7 +284,7 @@ def hero() -> rx.Component:
                         border_radius="20px",
                         backdrop_filter="blur(10px)",
                         box_shadow="0 10px 40px rgba(16, 185, 129, 0.3)",
-                        style={"animation": "floatSlow 6s ease-in-out infinite"},
+                        style={"animation": "fadeInScale 0.6s ease-out 0.9s backwards, floatSlow 6s ease-in-out 1.5s infinite"},
                     ),
                     # Floating card 2 - left middle
                     rx.box(
@@ -300,7 +304,7 @@ def hero() -> rx.Component:
                         border_radius="18px",
                         backdrop_filter="blur(10px)",
                         box_shadow="0 10px 40px rgba(245, 158, 11, 0.3)",
-                        style={"animation": "floatSlow 7s ease-in-out infinite reverse"},
+                        style={"animation": "fadeInScale 0.6s ease-out 1.1s backwards, floatSlow 7s ease-in-out 1.7s infinite reverse"},
                     ),
                     # Floating card 3 - bottom center
                     rx.box(
@@ -325,7 +329,7 @@ def hero() -> rx.Component:
                         border_radius="16px",
                         backdrop_filter="blur(10px)",
                         box_shadow="0 10px 40px rgba(109, 215, 229, 0.3)",
-                        style={"animation": "floatSlow 8s ease-in-out infinite"},
+                        style={"animation": "fadeInScale 0.6s ease-out 1.3s backwards, floatSlow 8s ease-in-out 1.9s infinite"},
                     ),
                     # Main image
                     rx.image(
@@ -333,7 +337,7 @@ def hero() -> rx.Component:
                         width="600px",
                         height="auto",
                         filter="drop-shadow(0 20px 60px rgba(27, 75, 127, 0.4))",
-                        style={"animation": "scaleFloat 5s ease-in-out infinite"},
+                        style={"animation": "fadeInScale 1s ease-out 0.3s backwards, scaleFloat 5s ease-in-out 1.3s infinite"},
                     ),
                     position="relative",
                 ),