Enhance UI components with improved styles, animations, and transitions for better user experience

themes/lucentui/css/app.css

@@ -624,11 +624,72 @@ x-navigation-link svg {
     animation: skeleton-loading 1.5s infinite;
 }
 
+/* Enhanced skeleton shimmer for dark themes */
+.skeleton-shimmer {
+    position: relative;
+    overflow: hidden;
+    background: hsl(var(--neutral) / 0.2);
+}
+
+.skeleton-shimmer::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        hsl(var(--neutral) / 0.3) 50%,
+        transparent 100%
+    );
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
 @keyframes skeleton-loading {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
 }
 
+/* Status badge pulse animation for active states */
+.status-pulse {
+    animation: status-pulse 2s ease-in-out infinite;
+}
+
+@keyframes status-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+/* Smooth page transitions for Livewire navigate */
+[wire\:navigate] {
+    view-transition-name: page;
+}
+
+::view-transition-old(page) {
+    animation: fade-out 150ms ease-out;
+}
+
+::view-transition-new(page) {
+    animation: fade-in 150ms ease-in;
+}
+
+@keyframes fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+@keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
 /* =============================================================================
    BUTTON LOADING SPINNER
    ============================================================================= */