Bob AI: Add complex animations to interactive elements like hover ef

src/styles/animations.css

@@ -172,3 +172,53 @@
 .animated-gradient-button:hover {
   animation: gradient-shift 4s ease infinite;
 }
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-on-scroll {
+  opacity: 0;
+}
+
+.animate-on-scroll.is-visible {
+  animation: fade-in-up 0.8s ease-out forwards;
+}
+
+/* Hover effects */
+.card, .primary-button, .secondary-button {
+  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: color-mix(in srgb, var(--color-foreground) 8%, transparent) 0px 8px 40px 0px;
+}
+
+.primary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--color-accent) 45%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
+}
+
+.secondary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.08);
+}