From 21211ff493cf1b1d6091fef7699c3e88f27e303d Mon Sep 17 00:00:00 2001
From: snxraven <admin@ssh.surf>
Date: Sun, 6 Jul 2025 02:25:19 -0400
Subject: [PATCH] Add global CSS enhancements for visual effects

- Implemented dynamic gradient background animation for body
- Added neon glow hover effect to .btn-minecraft
- Applied glassmorphism effect to .section-bg
- Introduced text glitch effect for .minecraft-font on hover
- Enhanced .nav-btn with micro-animation shine effect
---
 css/style.css     | 108 +++++++++++++++++++++++++++++++++++-----------
 css/style.min.css |  96 +++++++++++++++++++++++++++++++++--------
 2 files changed, 162 insertions(+), 42 deletions(-)

diff --git a/css/style.css b/css/style.css
index cf33b53..8f60efe 100644
--- a/css/style.css
+++ b/css/style.css
@@ -15,9 +15,9 @@ html, body {
 }
 
 body {
-    background-color: #0b0f2b; /* Explicit fallback */
-    background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
     background: linear-gradient(135deg, #0b0f2b, #1a2249);
+    background-size: 200% 200%;
+    animation: bgShift 15s ease infinite;
     font-family: 'Roboto', 'Verdana', sans-serif;
     color: #e0e7ff;
     overflow-x: hidden;
@@ -26,19 +26,23 @@ body {
     scroll-behavior: smooth;
 }
 
+@keyframes bgShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
 /* Custom Scrollbar Styles */
 ::-webkit-scrollbar {
     width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-    background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249); /* Match body gradient */
     background: linear-gradient(135deg, #0b0f2b, #1a2249);
-    border: none; /* Ensure no border */
+    border: none;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
     background: linear-gradient(45deg, #14b8a6, #3b82f6);
     border-radius: 4px;
     border: 1px solid rgba(10, 17, 40, 0.8);
@@ -46,7 +50,6 @@ body {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: -webkit-linear-gradient(45deg, #2dd4bf, #60a5fa);
     background: linear-gradient(45deg, #2dd4bf, #60a5fa);
     box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);
 }
@@ -57,20 +60,53 @@ body {
     text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
     background: linear-gradient(to right, #14b8a6, #3b82f6);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     transform: translateZ(0);
+    position: relative;
+}
+
+.minecraft-font:hover {
+    animation: glitch 0.3s linear infinite;
+}
+
+@keyframes glitch {
+    0% {
+        transform: translate(0);
+        text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+    }
+    20% {
+        transform: translate(-2px, 2px);
+        text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
+    }
+    40% {
+        transform: translate(2px, -2px);
+        text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
+    }
+    60% {
+        transform: translate(-2px, 0);
+        text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
+    }
+    80% {
+        transform: translate(2px, 0);
+        text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
+    }
+    100% {
+        transform: translate(0);
+        text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+    }
 }
 
 .section-bg {
-    background: rgba(10, 17, 40, 0.75);
+    background: rgba(10, 17, 40, 0.3);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
     border-radius: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
-    transition: box-shadow 0.4s ease;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1);
+    transition: box-shadow 0.4s ease, background 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
     animation: floatSection 4s ease-in-out infinite;
     z-index: 2;
 }
@@ -90,6 +126,9 @@ body {
 }
 
 .section-bg:hover {
+    background: rgba(10, 17, 40, 0.4);
+    -webkit-backdrop-filter: blur(14px);
+    backdrop-filter: blur(14px);
     box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
 }
 
@@ -103,7 +142,6 @@ body {
 }
 
 .btn-minecraft {
-    background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
     background: linear-gradient(45deg, #14b8a6, #3b82f6);
     background-size: 300% 300%;
     border: none;
@@ -116,6 +154,7 @@ body {
     overflow: hidden;
     transition: transform 0.3s, box-shadow 0.3s;
     animation: gradientShift 5s ease infinite;
+    box-shadow: 0 0 15px rgba(20, 184, 166, 0.5), 0 0 25px rgba(59, 130, 246, 0.3);
 }
 
 .btn-minecraft::before {
@@ -125,7 +164,6 @@ body {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: left 0.5s;
 }
@@ -136,7 +174,8 @@ body {
 
 .btn-minecraft:hover {
     transform: scale(1.1);
-    box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
+    box-shadow: 0 0 20px rgba(20, 184, 166, 0.8), 0 0 30px rgba(59, 130, 246, 0.5), 0 0 40px rgba(20, 184, 166, 0.3);
+    animation: neonPulse 1.5s ease-in-out infinite;
 }
 
 .btn-minecraft::after {
@@ -158,6 +197,15 @@ body {
     opacity: 1;
 }
 
+@keyframes neonPulse {
+    0%, 100% {
+        filter: brightness(1);
+    }
+    50% {
+        filter: brightness(1.2);
+    }
+}
+
 @keyframes gradientShift {
     0% {
         background-position: 0% 50%;
@@ -215,7 +263,6 @@ body {
     left: 0;
     width: 100%;
     height: 100%;
-    background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
     z-index: 2;
 }
@@ -310,7 +357,6 @@ body {
     position: absolute;
     width: 8px;
     height: 8px;
-    background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
     background: linear-gradient(45deg, #14b8a6, #3b82f6);
     border-radius: 50%;
     opacity: 0;
@@ -318,8 +364,8 @@ body {
     z-index: -1;
     pointer-events: none;
     box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
-    mix-blend-mode: screen; /* Blend with background */
-    will-change: transform, opacity; /* Optimize rendering */
+    mix-blend-mode: screen;
+    will-change: transform, opacity;
 }
 
 .particle.large {
@@ -347,7 +393,6 @@ body {
 }
 
 .header-bg {
-    background: -webkit-linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
     background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
     border-bottom: 1px solid rgba(255, 255, 255, 0.12);
     position: relative;
@@ -375,7 +420,6 @@ footer a:hover {
 .nav-btn {
     display: inline-block;
     padding: 0.5rem 1rem;
-    background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
     background: linear-gradient(to right, #14b8a6, #3b82f6);
     color: white;
     text-decoration: none;
@@ -385,6 +429,23 @@ footer a:hover {
     transition: transform 0.2s, box-shadow 0.2s;
     min-width: 100px;
     text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.4s ease;
+}
+
+.nav-btn:hover::before {
+    left: 100%;
 }
 
 .nav-btn:hover {
@@ -418,7 +479,6 @@ footer a:hover {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
-    background: -webkit-linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
     background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(5px);
@@ -448,10 +508,10 @@ footer a:hover {
 }
 
 /* Safari-specific fix for particle rendering */
-@media not all and (min-resolution:.001dpcm) { /* Targets Safari */
+@media not all and (min-resolution:.001dpcm) {
     .particle {
-        z-index: -2; /* Lower z-index to ensure background visibility */
-        backface-visibility: hidden; /* Prevent rendering glitches */
+        z-index: -2;
+        backface-visibility: hidden;
     }
 }
 
diff --git a/css/style.min.css b/css/style.min.css
index 5a364b1..edbe4a8 100644
--- a/css/style.min.css
+++ b/css/style.min.css
@@ -758,9 +758,9 @@ html, body {
   min-height: 100vh;
 }
 body {
-  background-color: #0b0f2b;
-  background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
   background: linear-gradient(135deg, #0b0f2b, #1a2249);
+  background-size: 200% 200%;
+  animation: bgShift 15s ease infinite;
   font-family: 'Roboto', 'Verdana', sans-serif;
   color: #e0e7ff;
   overflow-x: hidden;
@@ -768,23 +768,31 @@ body {
   min-height: 100vh;
   scroll-behavior: smooth;
 }
+@keyframes bgShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
 ::-webkit-scrollbar {
   width: 8px;
 }
 ::-webkit-scrollbar-track {
-  background: -webkit-linear-gradient(135deg, #0b0f2b, #1a2249);
   background: linear-gradient(135deg, #0b0f2b, #1a2249);
   border: none;
 }
 ::-webkit-scrollbar-thumb {
-  background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
   background: linear-gradient(45deg, #14b8a6, #3b82f6);
   border-radius: 4px;
   border: 1px solid rgba(10, 17, 40, 0.8);
   transition: background 0.3s ease;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: -webkit-linear-gradient(45deg, #2dd4bf, #60a5fa);
   background: linear-gradient(45deg, #2dd4bf, #60a5fa);
   box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);
 }
@@ -794,19 +802,50 @@ body {
   text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
   background: linear-gradient(to right, #14b8a6, #3b82f6);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   transform: translateZ(0);
+  position: relative;
+}
+.minecraft-font:hover {
+  animation: glitch 0.3s linear infinite;
+}
+@keyframes glitch {
+  0% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
+  }
+  40% {
+    transform: translate(2px, -2px);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
+  }
+  60% {
+    transform: translate(-2px, 0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
+  }
+  80% {
+    transform: translate(2px, 0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
+  }
+  100% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  }
 }
 .section-bg {
-  background: rgba(10, 17, 40, 0.75);
+  background: rgba(10, 17, 40, 0.3);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
   border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
-  transition: box-shadow 0.4s ease;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1);
+  transition: box-shadow 0.4s ease, background 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
   animation: floatSection 4s ease-in-out infinite;
   z-index: 2;
 }
@@ -819,6 +858,9 @@ body {
   transform: translateZ(0);
 }
 .section-bg:hover {
+  background: rgba(10, 17, 40, 0.4);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
   box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
 }
 @keyframes floatSection {
@@ -830,7 +872,6 @@ body {
   }
 }
 .btn-minecraft {
-  background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
   background: linear-gradient(45deg, #14b8a6, #3b82f6);
   background-size: 300% 300%;
   border: none;
@@ -843,6 +884,7 @@ body {
   overflow: hidden;
   transition: transform 0.3s, box-shadow 0.3s;
   animation: gradientShift 5s ease infinite;
+  box-shadow: 0 0 15px rgba(20, 184, 166, 0.5), 0 0 25px rgba(59, 130, 246, 0.3);
 }
 .btn-minecraft::before {
   content: '';
@@ -851,7 +893,6 @@ body {
   left: -100%;
   width: 100%;
   height: 100%;
-  background: -webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.5s;
 }
@@ -860,7 +901,8 @@ body {
 }
 .btn-minecraft:hover {
   transform: scale(1.1);
-  box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
+  box-shadow: 0 0 20px rgba(20, 184, 166, 0.8), 0 0 30px rgba(59, 130, 246, 0.5), 0 0 40px rgba(20, 184, 166, 0.3);
+  animation: neonPulse 1.5s ease-in-out infinite;
 }
 .btn-minecraft::after {
   content: '';
@@ -879,6 +921,14 @@ body {
   height: 200px;
   opacity: 1;
 }
+@keyframes neonPulse {
+  0%, 100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.2);
+  }
+}
 @keyframes gradientShift {
   0% {
     background-position: 0% 50%;
@@ -932,7 +982,6 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
-  background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
   z-index: 2;
 }
@@ -1012,7 +1061,6 @@ body {
   position: absolute;
   width: 8px;
   height: 8px;
-  background: -webkit-linear-gradient(45deg, #14b8a6, #3b82f6);
   background: linear-gradient(45deg, #14b8a6, #3b82f6);
   border-radius: 50%;
   opacity: 0;
@@ -1055,7 +1103,6 @@ body {
   }
 }
 .header-bg {
-  background: -webkit-linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
   background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   position: relative;
@@ -1079,7 +1126,6 @@ footer a:hover {
 .nav-btn {
   display: inline-block;
   padding: 0.5rem 1rem;
-  background: -webkit-linear-gradient(to right, #14b8a6, #3b82f6);
   background: linear-gradient(to right, #14b8a6, #3b82f6);
   color: white;
   text-decoration: none;
@@ -1089,6 +1135,21 @@ footer a:hover {
   transition: transform 0.2s, box-shadow 0.2s;
   min-width: 100px;
   text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.nav-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.4s ease;
+}
+.nav-btn:hover::before {
+  left: 100%;
 }
 .nav-btn:hover {
   transform: translateY(-2px);
@@ -1115,7 +1176,6 @@ footer a:hover {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
-  background: -webkit-linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
   background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);