chore: Use boxShadow for the glow in the Planets example and complete the code snippet (#9864)

## Summary

The Planets example built its `:active` glow from iOS-only
`shadowOpacity`/`shadowRadius` plus `elevation`, which renders as a
barely visible gray shadow on Android. The glow is now a single
cross-platform `boxShadow` transition (`` `0 0 0 0 ${color}00` `` -> ``
`0 0 18px 4px ${color}` ``), and the code snippet shows all animated
props (`:hover` name reveal, `:active` scale and glow) instead of only
the `:hover` opacity.

## Example recording

pressing a planet shows the planet-colored glow and 1.1x scale;
releasing fades the glow and keeps the name revealed (sticky touch
hover).


https://github.com/user-attachments/assets/310c71ba-29f0-4f28-8394-1b17d4af2ad4

Author: MatiPl01

apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/Planets.tsx

@@ -51,19 +51,39 @@ export default function Planets() {
           description="Three differently sized planets orbit the screen center on a tilted (elliptical) path. Each planet's name is hidden until you hover; active enlarges it with a colored glow."
           title="Planets">
           <VerticalExampleCard
-            title="Hover a planet to reveal its name"
+            title="Hover a planet to reveal its name, press it for a glow"
             code={`<Animated.View
   style={{
-    // 0.02 not 0: iOS skips alpha<0.01 views in hit-testing
-    opacity: { default: 0.02, ':hover': 1 },
+    transform: {
+      default: [{ scale: 1 }],
+      ':active': [{ scale: 1.1 }],
+    },
+    boxShadow: {
+      default: \`0 0 0 0 \${color}00\`,
+      ':active': \`0 0 18px 4px \${color}\`,
+    },
     transitionDuration: '200ms',
-  }}
-  onStartShouldSetResponder={() => true}>
-  <Text>{name}</Text>
+  }}>
+  <Animated.View
+    style={{
+      opacity: { default: 0.02, ':hover': 1 },
+      transitionDuration: '200ms',
+    }}
+    onStartShouldSetResponder={() => true}>
+    <Text>{name}</Text>
+  </Animated.View>
 </Animated.View>`}
             collapsedCode={`opacity: {
   default: 0.02,
   ':hover': 1,
+},
+transform: {
+  default: [{ scale: 1 }],
+  ':active': [{ scale: 1.1 }],
+},
+boxShadow: {
+  default: \`0 0 0 0 \${color}00\`,
+  ':active': \`0 0 18px 4px \${color}\`,
 },`}>
             <Animated.View style={styles.stage}>
               <Animated.View style={styles.orbitPlane}>
@@ -81,11 +101,11 @@ export default function Planets() {
                       {
                         backgroundColor: planet.color,
                         borderRadius: planet.size / 2,
-                        elevation: { ':active': 12, default: 0 },
+                        boxShadow: {
+                          ':active': `0 0 18px 4px ${planet.color}`,
+                          default: `0 0 0 0 ${planet.color}00`,
+                        },
                         height: planet.size,
-                        shadowColor: planet.color,
-                        shadowOpacity: { ':active': 0.9, default: 0 },
-                        shadowRadius: { ':active': 18, default: 0 },
                         transform: {
                           ':active': [{ scale: 1.1 }],
                           default: [{ scale: 1 }],
@@ -137,7 +157,6 @@ const styles = StyleSheet.create({
   },
   orbiter: {
     position: 'absolute',
-    shadowOffset: { height: 0, width: 0 },
   },
   orbitPlane: {
     height: PLANE_HEIGHT,