Improve conference card click effect

Update the visual effect triggered when clicking on a conference card. The goal is to smoothly transition the card to a larger size.

src/components/ConferenceDialog.tsx

@@ -29,7 +29,7 @@ const ConferenceDialog = ({ conference, open, onOpenChange }: ConferenceDialogPr
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="dialog-content max-w-md">
         <DialogHeader>
           <DialogTitle className="text-xl font-bold">
             {conference.title}

src/index.css

@@ -43,3 +43,59 @@
 .countdown {
   @apply text-2xl font-semibold text-primary;
 }
+
+@keyframes scale-up {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-down {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+.dialog-content {
+  animation: scale-up 0.3s ease-out;
+}
+
+.dialog-overlay {
+  animation: fade-in 0.3s ease-out;
+}
+
+[data-state="closed"] .dialog-content {
+  animation: scale-down 0.2s ease-out;
+}
+
+[data-state="closed"] .dialog-overlay {
+  animation: fade-out 0.2s ease-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}