UI: Add animations to TimeTableScreen journey route (#277)

### TL;DR
Added animated entrance effects for journey route text in the TimeTable screen.

### What changed?
- Created a new `JourneyRoute` composable that displays the origin and destination with animated entrances
- Added fade and slide animations for the "from" and "to" station names
- Implemented a staggered animation effect with the destination appearing 500ms after the origin

### Why make this change?
To enhance the user experience by providing visual feedback when viewing journey details. The staggered animation helps users process the information sequentially and makes the interface feel more dynamic and polished.

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/TimeTableScreen.kt

@@ -1,28 +1,39 @@
 package xyz.ksharma.krail.trip.planner.ui.timetable
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.slideInVertically
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toImmutableList
+import kotlinx.coroutines.delay
 import xyz.ksharma.krail.design.system.LocalOnContentColor
 import xyz.ksharma.krail.design.system.components.RoundIconButton
 import xyz.ksharma.krail.design.system.components.Text
@@ -34,6 +45,7 @@ import xyz.ksharma.krail.trip.planner.ui.components.JourneyCardState
 import xyz.ksharma.krail.trip.planner.ui.state.TransportModeLine
 import xyz.ksharma.krail.trip.planner.ui.state.timetable.TimeTableState
 import xyz.ksharma.krail.trip.planner.ui.state.timetable.TimeTableUiEvent
+import xyz.ksharma.krail.trip.planner.ui.state.timetable.Trip
 import xyz.ksharma.krail.design.system.R as DesignSystemR
 
 @Composable
@@ -72,24 +84,7 @@ fun TimeTableScreen(
         )
 
         timeTableState.trip?.let { trip ->
-            Column(
-                modifier = Modifier
-                    .padding(horizontal = 16.dp)
-                    .padding(bottom = 20.dp)
-                    .clip(
-                        RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp),
-                    ),
-            ) {
-                Text(
-                    text = trip.fromStopName,
-                    style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
-                )
-                Spacer(modifier = Modifier.height(8.dp))
-                Text(
-                    text = trip.toStopName,
-                    style = KrailTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
-                )
-            }
+            JourneyRoute(trip)
         }
 
         LazyColumn(contentPadding = PaddingValues(vertical = 16.dp)) {
@@ -141,6 +136,62 @@ fun TimeTableScreen(
     }
 }
 
+@Composable
+private fun JourneyRoute(trip: Trip) {
+    val (showFirstText, setShowFirstText) = remember { mutableStateOf(false) }
+    val (showSecondText, setShowSecondText) = remember { mutableStateOf(false) }
+    val textStyle = KrailTheme.typography.titleMedium
+
+    LaunchedEffect(Unit) {
+        setShowFirstText(true)
+        delay(500) // Delay for half a second before showing the second text
+        setShowSecondText(true)
+    }
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .padding(bottom = 20.dp)
+            .clip(RoundedCornerShape(8.dp)),
+    ) {
+        val density = LocalDensity.current
+
+        Row(Modifier.height(with(density) { textStyle.fontSize.toDp() })) {
+            AnimatedVisibility(
+                visible = showFirstText,
+                enter = fadeIn(animationSpec = tween(500)) + slideInVertically(
+                    animationSpec = tween(
+                        600,
+                    ),
+                ) { it },
+            ) {
+                Text(
+                    text = trip.fromStopName,
+                    style = textStyle.copy(fontWeight = FontWeight.Normal),
+                )
+            }
+        }
+        Spacer(modifier = Modifier.height(8.dp))
+
+        Row(Modifier.height(with(density) { textStyle.fontSize.toDp() })) {
+            AnimatedVisibility(
+                visible = showSecondText,
+                enter = fadeIn(animationSpec = tween(500)) + slideInVertically(
+                    animationSpec = tween(
+                        600,
+                    ),
+                ) { it },
+            ) {
+                Text(
+                    text = trip.toStopName,
+                    style = textStyle.copy(fontWeight = FontWeight.Normal),
+                )
+            }
+        }
+    }
+}
+
 @Composable
 fun JourneyCardItem(
     timeToDeparture: String,