feat(frontend): add dynamic animations to login and admin panel

frontend/style.css

@@ -303,6 +303,28 @@ body {
   transition: opacity var(--transition);
 }
 
+/* ===== Animations ===== */
+.stagger-1 { animation: fadeInUp 0.5s ease-out 0.1s both; }
+.stagger-2 { animation: fadeInUp 0.5s ease-out 0.2s both; }
+.stagger-3 { animation: fadeInUp 0.5s ease-out 0.3s both; }
+.stagger-4 { animation: fadeInUp 0.5s ease-out 0.4s both; }
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-6px); }
+  50% { transform: translateX(6px); }
+  75% { transform: translateX(-6px); }
+}
+
+.shake {
+  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes slideDownAlert {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 /* ===== Form Alert ===== */
 .form-alert {
   display: none;
@@ -318,6 +340,7 @@ body {
   background: rgba(248, 113, 113, 0.1);
   border: 1px solid rgba(248, 113, 113, 0.2);
   color: var(--error);
+  animation: slideDownAlert 0.3s ease-out both;
 }
 
 .form-alert.success {
@@ -325,10 +348,13 @@ body {
   background: rgba(52, 211, 153, 0.1);
   border: 1px solid rgba(52, 211, 153, 0.2);
   color: var(--success);
+  animation: slideDownAlert 0.3s ease-out both;
 }
 
 /* ===== Submit Button ===== */
 .btn-submit {
+  position: relative;
+  overflow: hidden;
   width: 100%;
   padding: 0.85rem;
   border: none;
@@ -365,6 +391,23 @@ body {
   transform: none;
 }
 
+/* ===== Ripple Effect ===== */
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 0.6s linear;
+  background-color: rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
 /* ===== Spinner ===== */
 .spinner {
   animation: spin 0.8s linear infinite;