fix(homepage): correct flashcard transform rendering

Fix interactive flashcards not rendering by properly converting
react-spring animated values to CSS transforms. The x, y, rotation,
and scale spring values now use the `to` helper to create proper
CSS transform strings.

Changes:
- Import `to` helper from @react-spring/web
- Convert spring values to CSS transform using translate/rotate/scale
- Set position to absolute with left:0, top:0 as transform origin

This fixes the issue where flashcards were invisible because the
spring values weren't being properly converted to CSS.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/components/InteractiveFlashcards.tsx

@@ -3,7 +3,7 @@
 import { AbacusReact } from '@soroban/abacus-react'
 import { useDrag } from '@use-gesture/react'
 import { useEffect, useState } from 'react'
-import { animated, config, useSpring } from '@react-spring/web'
+import { animated, config, to, useSpring } from '@react-spring/web'
 import { css } from '../../styled-system/css'
 
 interface Flashcard {
@@ -130,12 +130,14 @@ function DraggableCard({ card }: DraggableCardProps) {
     <animated.div
       {...bind()}
       style={{
-        x,
-        y,
-        rotation,
-        scale,
-        zIndex,
         position: 'absolute',
+        left: 0,
+        top: 0,
+        transform: to(
+          [x, y, rotation, scale],
+          (x, y, r, s) => `translate(${x}px, ${y}px) rotate(${r}deg) scale(${s})`
+        ),
+        zIndex,
         touchAction: 'none',
         cursor: 'grab',
       }}