feat: add global animation styles

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ark-database-web",
       "version": "1.0.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "lucide-react": "^0.460.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1721,6 +1722,12 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "lucide-react": "^0.460.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/index.css

@@ -20,6 +20,9 @@ body {
 /* Match theme: avoid default blue accent on controls */
 :root {
   accent-color: #eeb726;
+  --animate-duration: 720ms;
+  --animate-delay: 0s;
+  --animate-repeat: 1;
 }
 
 header a,

src/main.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import "animate.css";
 import "./index.css";
 
 const adminOnly = import.meta.env.VITE_ADMIN_ONLY === "true";