Mobile: standalone photo demo + full-bleed full-screen cards

- New /demo flow (no login/backend): take/pick a photo → card front;
  swipe → back reveals QR + name/title. Built in-memory on device.
- CardFace renders image backgrounds (local URI or asset key) + borderRadius prop
- CardViewer `fullScreen` mode fills the device window (useWindowDimensions),
  radius 0, status bar hidden; applied to the demo and the real card viewer
- Landing screen offers the demo without signing in
- Added expo-image-picker (camera/photo perms); pinned expo-constants/expo-linking
  to SDK 51 (npm had resolved newer-SDK majors that broke the Gradle build)
- Native android/ is gitignored (regenerated by `expo prebuild`)

Built and deployed to a physical Android device (BUILD SUCCESSFUL).

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

cardclaws-mobile/app/index.tsx

@@ -1,8 +1,29 @@
-// Entry redirect: authenticated users land on their cards, others on login.
-import { Redirect } from "expo-router";
-import { useAuthStore } from "../src/stores/authStore";
+// Landing: jump straight into the no-login demo, or sign in to the full app.
+import { useRouter } from "expo-router";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 
 export default function Index() {
-  const authed = useAuthStore((s) => s.accessToken !== null);
-  return <Redirect href={authed ? "/(tabs)/cards" : "/(auth)/login"} />;
+  const router = useRouter();
+  return (
+    <View style={styles.root}>
+      <Text style={styles.title}>CardClaws</Text>
+      <Text style={styles.tagline}>The other side of you.</Text>
+
+      <Pressable style={styles.primary} onPress={() => router.push("/demo")}>
+        <Text style={styles.primaryText}>Try the card demo</Text>
+      </Pressable>
+      <Pressable onPress={() => router.push("/(auth)/login")}>
+        <Text style={styles.link}>Sign in to the full app</Text>
+      </Pressable>
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: "#0a0a0c", alignItems: "center", justifyContent: "center", padding: 24, gap: 14 },
+  title: { color: "#f5f5f7", fontSize: 44, fontWeight: "800", letterSpacing: -1 },
+  tagline: { color: "#9a9aa0", marginBottom: 24 },
+  primary: { backgroundColor: "#ff3b30", borderRadius: 16, paddingVertical: 16, paddingHorizontal: 40 },
+  primaryText: { color: "#fff", fontWeight: "700", fontSize: 17 },
+  link: { color: "#9a9aa0", marginTop: 12 },
+});