fix blur on image alt text background

.claude/.pre-pr-sweep-state

@@ -0,0 +1 @@
+gif-autoplay@86b6827814e8320576e6a403f11ef4f318a72fc1

src/components/Lightbox/Lightbox.web.tsx

@@ -230,7 +230,11 @@ function LightboxGallery({
           style={[
             a.px_4xl,
             a.py_2xl,
-            {backgroundColor: 'rgba(0, 0, 0, 0.45)'},
+            {
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              // @ts-expect-error web only
+              backdropFilter: 'blur(16px)',
+            },
             delayedFadeInAnim,
           ]}>
           <Pressable

src/components/Lightbox/chrome/Footer.tsx

@@ -7,6 +7,7 @@ import {
   View,
 } from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {BlurView} from 'expo-blur'
 import {useLingui} from '@lingui/react/macro'
 
 import {atoms as a, useTheme} from '#/alf'
@@ -37,6 +38,7 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
         {paddingBottom: insets.bottom + 8},
       ]}>
       <View style={[a.mx_md, styles.altWrap]}>
+        <BlurView intensity={16} tint="dark" style={styles.altBlur}>
           <ScrollView
             scrollEnabled={isAltExpanded}
             onMomentumScrollBegin={() => {
@@ -67,6 +69,7 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
               </Text>
             </Pressable>
           </ScrollView>
+        </BlurView>
       </View>
     </View>
   )
@@ -74,8 +77,12 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
 
 const styles = StyleSheet.create({
   altWrap: {
-    backgroundColor: 'rgba(0, 0, 0, 0.45)',
     borderRadius: 12,
     overflow: 'hidden',
   },
+  altBlur: {
+    // Tint kept over the blur so dense, text-heavy images stay readable,
+    // including on Android where the blur falls back to a flat overlay.
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
 })