profile refactor

src/widgets/swap-form/ui/SwapConfirmModal.module.css

@@ -7,6 +7,11 @@
   align-items: center;
   justify-content: center;
   z-index: 100;
+  animation: overlayIn 0.2s ease;
+}
+
+.overlay.closing {
+  animation: overlayOut 0.2s ease forwards;
 }
 
 .card {
@@ -19,6 +24,31 @@
   display: flex;
   flex-direction: column;
   gap: 24px;
+  animation: cardIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.card.closing {
+  animation: cardOut 0.2s cubic-bezier(0.55, 0, 1, 0.45) forwards;
+}
+
+@keyframes overlayIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes overlayOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes cardIn {
+  from { opacity: 0; transform: translateY(16px) scale(0.96); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes cardOut {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to { opacity: 0; transform: translateY(16px) scale(0.96); }
 }
 
 .header {