Update static/global.css

static/global.css

@@ -5,26 +5,170 @@
 }
 
 body {
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif, system-ui;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
     color: #e0e0e0;
     background-color: #121212;
     padding: 0;
     min-height: 100vh;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Background Animation */
+.bg-animation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.bg-animation .particle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.3;
+    animation: float 15s infinite ease-in-out;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0) translateX(0);
+    }
+    25% {
+        transform: translateY(-20px) translateX(10px);
+    }
+    50% {
+        transform: translateY(0) translateX(20px);
+    }
+    75% {
+        transform: translateY(20px) translateX(10px);
+    }
+    100% {
+        transform: translateY(0) translateX(0);
+    }
+}
+
+.particle:nth-child(1) {
+    width: 100px;
+    height: 100px;
+    left: 10%;
+    top: 20%;
+    background: radial-gradient(
+        circle,
+        rgba(187, 134, 252, 0.3) 0%,
+        rgba(0, 0, 0, 0) 70%
+    );
+    animation-duration: 20s;
+}
+
+.particle:nth-child(2) {
+    width: 150px;
+    height: 150px;
+    right: 15%;
+    top: 30%;
+    background: radial-gradient(
+        circle,
+        rgba(3, 218, 198, 0.3) 0%,
+        rgba(0, 0, 0, 0) 70%
+    );
+    animation-duration: 25s;
+    animation-delay: 1s;
+}
+
+.particle:nth-child(3) {
+    width: 80px;
+    height: 80px;
+    left: 40%;
+    bottom: 30%;
+    background: radial-gradient(
+        circle,
+        rgba(187, 134, 252, 0.2) 0%,
+        rgba(0, 0, 0, 0) 70%
+    );
+    animation-duration: 18s;
+    animation-delay: 2s;
+}
+
+.particle:nth-child(4) {
+    width: 120px;
+    height: 120px;
+    right: 30%;
+    bottom: 20%;
+    background: radial-gradient(
+        circle,
+        rgba(3, 218, 198, 0.2) 0%,
+        rgba(0, 0, 0, 0) 70%
+    );
+    animation-duration: 22s;
+    animation-delay: 3s;
+}
+
+.particle:nth-child(5) {
+    width: 170px;
+    height: 170px;
+    left: 20%;
+    bottom: 10%;
+    background: radial-gradient(
+        circle,
+        rgba(187, 134, 252, 0.1) 0%,
+        rgba(0, 0, 0, 0) 70%
+    );
+    animation-duration: 28s;
+    animation-delay: 0.5s;
+}
+
+/* Matrix effect in background */
+.matrix-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -2;
+    opacity: 0.05;
+    background:
+        linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="20" font-family="monospace" font-size="20" fill="rgb(3, 218, 198)">01</text><text x="50" y="40" font-family="monospace" font-size="15" fill="rgb(3, 218, 198)">10</text><text x="30" y="60" font-family="monospace" font-size="25" fill="rgb(187, 134, 252)">01</text><text x="70" y="80" font-family="monospace" font-size="18" fill="rgb(187, 134, 252)">10</text></svg>');
 }
 
 header {
-    background-color: #1a1a1a;
+    background-color: rgba(26, 26, 26, 0.8);
+    backdrop-filter: blur(10px);
     color: white;
     text-align: center;
     padding: 1.5rem 1rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    position: relative;
 }
 
 h1 {
-    font-size: 2.5rem;
+    font-size: 3rem;
     margin-bottom: 0.5rem;
     color: #bb86fc;
+    text-shadow:
+        0 0 10px rgba(187, 134, 252, 0.7),
+        0 0 20px rgba(187, 134, 252, 0.5),
+        0 0 30px rgba(187, 134, 252, 0.3);
+    background: linear-gradient(45deg, #bb86fc, #03dac6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    letter-spacing: 2px;
+    transform: perspective(500px) rotateX(10deg);
+    animation: glow 2s ease-in-out infinite alternate;
+    font-weight: 800;
+}
+
+@keyframes glow {
+    from {
+        filter: brightness(1);
+    }
+    to {
+        filter: brightness(1.3);
+    }
 }
 
 .subtitle {
@@ -47,6 +191,8 @@ h1 {
     max-width: 1200px;
     margin: 0 auto;
     padding: 1.5rem;
+    position: relative;
+    z-index: 1;
 }
 
 .video-container {
@@ -56,8 +202,19 @@ h1 {
     aspect-ratio: 16 / 9;
     background-color: #1a1a1a;
     border-radius: 8px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+    box-shadow:
+        0 4px 20px rgba(0, 0, 0, 0.5),
+        0 0 15px rgba(187, 134, 252, 0.3);
     overflow: hidden;
+    transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+}
+
+.video-container:hover {
+    box-shadow:
+        0 8px 25px rgba(0, 0, 0, 0.6),
+        0 0 20px rgba(187, 134, 252, 0.4);
 }
 
 .video-container iframe {
@@ -67,11 +224,19 @@ h1 {
 }
 
 .intro-text {
-    background-color: #1e1e1e;
+    background-color: rgba(30, 30, 30, 0.8);
+    backdrop-filter: blur(5px);
     padding: 1.5rem;
     border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     margin-bottom: 2rem;
+    border: 1px solid rgba(187, 134, 252, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.intro-text:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
 }
 
 h2 {
@@ -79,6 +244,7 @@ h2 {
     margin-bottom: 1rem;
     border-bottom: 2px solid #03dac6;
     padding-bottom: 0.5rem;
+    text-shadow: 0 0 8px rgba(187, 134, 252, 0.3);
 }
 
 p {
@@ -93,20 +259,43 @@ p {
 }
 
 .point-card {
-    background-color: #1e1e1e;
+    background-color: rgba(30, 30, 30, 0.8);
+    backdrop-filter: blur(5px);
     padding: 1.5rem;
     border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-    transition: transform 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+    border: 1px solid rgba(3, 218, 198, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.point-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 0;
+    background: linear-gradient(to bottom, #bb86fc, #03dac6);
+    transition: height 0.5s ease;
 }
 
 .point-card:hover {
     transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+}
+
+.point-card:hover::before {
+    height: 100%;
 }
 
 .point-card h3 {
     color: #03dac6;
     margin-bottom: 1rem;
+    text-shadow: 0 0 8px rgba(3, 218, 198, 0.3);
 }
 
 ul {
@@ -119,11 +308,14 @@ li {
 }
 
 footer {
-    background-color: #1a1a1a;
+    background-color: rgba(26, 26, 26, 0.8);
+    backdrop-filter: blur(10px);
     color: white;
     text-align: center;
     padding: 1.5rem;
     margin-top: 2rem;
+    position: relative;
+    z-index: 1;
 }
 
 @media (max-width: 768px) {
@@ -141,4 +333,8 @@ footer {
         margin-bottom: 0.5rem;
         text-align: right;
     }
+
+    .bg-animation .particle {
+        opacity: 0.2;
+    }
 }