Challenge 1: An Animated Toggle — Solution

@Composable
fun ToggleCard(isActive: Boolean) {
    val backgroundColor by animateColorAsState(
        targetValue = if (isActive) Color(0xFF3DDC84) else Color(0xFFCCCCCC),
        label = "backgroundColor"
    )
    val size by animateDpAsState(
        targetValue = if (isActive) 120.dp else 80.dp,
        label = "cardSize"
    )

    Box(
        modifier = Modifier
            .size(size)
            .background(backgroundColor)
    )
}

@Composable
fun ToggleScreen() {
    var isActive by remember { mutableStateOf(false) }

    Column(modifier = Modifier.padding(16.dp)) {
        ToggleCard(isActive = isActive)
        Spacer(modifier = Modifier.height(12.dp))
        Button(onClick = { isActive = !isActive }) {
            Text("Toggle")
        }
    }
}

Notes:
- Both animateColorAsState and animateDpAsState read the SAME isActive
  boolean as their target-value condition — tapping the Button flips
  isActive once, and both animations run simultaneously, driven by that
  single state change.
- Each animate*AsState call is independent (its own internal animation
  state), but because they're both triggered by the same isActive
  change, they visually appear synchronized — this is a simpler
  alternative to updateTransition, which exists specifically for cases
  needing tighter, guaranteed synchronization between multiple animated
  values.
- The label parameter (a string, purely for debugging/tooling) doesn't
  affect behavior — it just makes each animation identifiable in Android
  Studio's animation inspection tools.