edit particles

css/style.css

@@ -271,31 +271,39 @@ body {
 
 .particle {
     position: absolute;
-    width: 5px;
-    height: 5px;
-    background: linear-gradient(45deg, #14b8a6, #60a5fa);
+    width: 8px;
+    height: 8px;
+    background: linear-gradient(45deg, #14b8a6, #3b82f6);
     border-radius: 50%;
-    animation: float 12s infinite ease-in-out;
+    opacity: 0;
+    animation: float linear infinite, fadeInOut ease-in-out infinite;
     z-index: -1;
     pointer-events: none;
     box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
 }
 
 .particle.large {
-    width: 8px;
-    height: 8px;
-    animation-duration: 14s;
+    width: 12px;
+    height: 12px;
+}
+
+@keyframes fadeInOut {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 0.8; }
 }
 
 @keyframes float {
-    0%, 100% {
-        transform: translateY(0) translateX(0);
-        opacity: 0.2;
-    }
-    50% {
-        transform: translateY(-60px) translateX(25px);
-        opacity: 0.8;
-    }
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-100vh); }
+}
+
+.particle.fade-out {
+    animation: fadeOut 0.5s ease-out forwards;
+}
+
+@keyframes fadeOut {
+    0% { opacity: 0.8; }
+    100% { opacity: 0; }
 }
 
 .header-bg {