initial

css/matrix.css

@@ -0,0 +1,58 @@
+/* matrix.css - Matrix animation styles */
+.matrix-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.85);
+    background-image: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,20,40,0.7) 100%);
+    filter: brightness(0.55);
+}
+
+.matrix-dot {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 50%;
+    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4), 0 0 12px rgba(255, 255, 255, 0.2);
+    transition: all 0.3s ease;
+    pointer-events: none;
+}
+
+.connection-line {
+    position: absolute;
+    height: 2px;
+    background: linear-gradient(90deg, 
+        rgba(100, 149, 237, 0) 0%, 
+        rgba(138, 43, 226, 0.8) 50%, 
+        rgba(100, 149, 237, 0) 100%);
+    transform-origin: left center;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+    pointer-events: none;
+    z-index: -1;
+    box-shadow: 0 0 4px rgba(138, 43, 226, 0.4);
+}
+
+.connection-line.active {
+    opacity: 1;
+    animation: connectionPulse 2s ease-in-out infinite;
+}
+
+@keyframes connectionPulse {
+    0% {
+        filter: brightness(1);
+        box-shadow: 0 0 4px rgba(138, 43, 226, 0.4);
+    }
+    50% {
+        filter: brightness(1.5);
+        box-shadow: 0 0 8px rgba(138, 43, 226, 0.6), 0 0 16px rgba(100, 149, 237, 0.3);
+    }
+    100% {
+        filter: brightness(1);
+        box-shadow: 0 0 4px rgba(138, 43, 226, 0.4);
+    }
+}