Add floating generation status card

frontend/src/App.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence } from 'framer-motion'
 import { Navbar } from '@/components/layout/Navbar'
 import { Footer } from '@/components/layout/Footer'
 import { BackgroundEffects } from '@/components/features/BackgroundEffects'
+import { GenerationStatusCard } from '@/components/features/GenerationStatusCard'
 import { Hero } from '@/components/features/Hero'
 import { InputPanel } from '@/components/features/InputPanel'
 import { ResultsSection } from '@/components/features/ResultsSection'
@@ -28,6 +29,7 @@ export default function App() {
     <div className="relative min-h-screen overflow-x-hidden">
       <BackgroundEffects />
       <Navbar />
+      <GenerationStatusCard visible={state === 'success' && !!result} />
 
       <main className="relative z-10 pb-16 pt-24">
         <section className="mx-auto max-w-7xl px-4 sm:px-6">

frontend/src/components/features/GenerationStatusCard.tsx

@@ -0,0 +1,62 @@
+import { motion, AnimatePresence } from 'framer-motion'
+
+interface GenerationStatusCardProps {
+  visible: boolean
+}
+
+const cardAnimation = {
+  hidden: {
+    x: -220,
+    rotate: -6,
+    opacity: 0,
+  },
+  visible: {
+    x: [ -220, 20, -10, 6, 0, -3, 0 ],
+    rotate: [ -6, -2, -4, -2.5, -3.5, -3, -3 ],
+    opacity: 1,
+    transition: {
+      duration: 0.72,
+      times: [0, 0.5, 0.68, 0.8, 0.9, 0.96, 1],
+      ease: 'easeOut',
+    },
+  },
+  exit: {
+    x: -220,
+    rotate: -8,
+    opacity: 0,
+    transition: {
+      duration: 0.22,
+      ease: 'easeIn',
+    },
+  },
+}
+
+export function GenerationStatusCard({ visible }: GenerationStatusCardProps) {
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.aside
+          variants={cardAnimation}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="pointer-events-none fixed bottom-6 left-4 z-40 w-[min(18rem,calc(100vw-2rem))] sm:bottom-8 sm:left-6"
+        >
+          <div className="border-[4px] border-[#111111] bg-[#f6dd74] px-4 py-4 shadow-[10px_10px_0_#111111]">
+            <div className="mb-3 inline-flex border-[3px] border-[#111111] bg-[#fff7dc] px-2 py-1 font-['IBM_Plex_Mono'] text-[10px] font-semibold uppercase tracking-[0.18em] text-[#111111]">
+              Status note
+            </div>
+
+            <p className="font-['IBM_Plex_Mono'] text-[1.05rem] font-semibold uppercase leading-tight text-[#111111]">
+              Let&apos;s break some trust.
+            </p>
+
+            <p className="mt-3 font-['IBM_Plex_Mono'] text-[0.76rem] font-semibold uppercase tracking-[0.16em] text-[#2b2b2b]">
+              Scroll down ↓
+            </p>
+          </div>
+        </motion.aside>
+      )}
+    </AnimatePresence>
+  )
+}