Merge branch 'master' into improve-slide

- Update slideInFromRight animation to include scaling and rotation- Add hover effects for alert cards- Implement glowing effect for new alerts- Adjust alert card landing animation
- Optimize transitions and add perspective for3D effects

web-app/src/app/routes/alert/alert-center/alert-center.component.less

@@ -284,20 +284,88 @@
 
 @keyframes slideInFromRight {
   0% {
-    transform: translateX(100%);
+    transform: translate3d(120%, 0, 0) scale(0.95) rotate(3deg);
     opacity: 0;
+    filter: blur(2px);
+    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
+  }
+  50% {
+    opacity: 1;
+    filter: blur(0);
+    transform: translate3d(-5%, 0, 0) scale(1) rotate(-1deg);
+  }
+  75% {
+    transform: translate3d(2%, 0, 0) scale(1) rotate(0.5deg);
   }
   100% {
-    transform: translateX(0);
-    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
   }
 }
 
 .alert-card {
   position: relative;
-  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
+  transition:
+    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    opacity 0.5s ease-out,
+    box-shadow 0.3s ease;
+  will-change: transform, opacity;
+
+  &:hover {
+    transform: translateY(-2px) scale(1.005);
+    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 0.3) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0;
+    animation: slideGlow 1s cubic-bezier(0.4, 0, 0.2, 1);
+  }
 
   &.new-alert {
-    animation: slideInFromRight 0.5s ease-out forwards;
+    animation:
+      slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+      cardLanding 0.6s 0.3s ease-out forwards;
   }
 }
+
+@keyframes slideGlow {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes cardLanding {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+  80% { transform: translateY(2px); }
+  100% { transform: translateY(0); }
+}
+
+.alert-card:nth-child(1) { animation-delay: 0.1s; }
+.alert-card:nth-child(2) { animation-delay: 0.15s; }
+.alert-card:nth-child(3) { animation-delay: 0.2s; }
+.alert-card:nth-child(n+4) { animation-delay: 0.25s; }
+
+.alert-cards {
+  perspective: 1200px;
+}