issue

style.css

@@ -15,56 +15,64 @@ body {
   font-family: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1.6;
   color: #1f2937;
+  /* Enable hardware acceleration */
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  /* Optimize rendering */
+  will-change: transform;
 }
 
-/* Custom animations */
+/* Custom animations - optimized for performance */
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateY3d(30px, 0, 0);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY3d(0, 0, 0);
   }
 }
 
 @keyframes slideInLeft {
   from {
     opacity: 0;
-    transform: translateX(-30px);
+    transform: translate3d(-30px, 0, 0);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
 }
 
 @keyframes slideInRight {
   from {
     opacity: 0;
-    transform: translateX(30px);
+    transform: translate3d(30px, 0, 0);
   }
   to {
     opacity: 1;
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
 }
 
-/* Animation classes */
+/* Animation classes - optimized with will-change */
 .animate-fade-in-up {
   animation: fadeInUp 0.8s ease-out forwards;
+  will-change: opacity, transform;
 }
 
 .animate-slide-in-left {
   animation: slideInLeft 0.8s ease-out forwards;
+  will-change: opacity, transform;
 }
 
 .animate-slide-in-right {
   animation: slideInRight 0.8s ease-out forwards;
+  will-change: opacity, transform;
 }
 
-/* Custom scrollbar */
+/* Custom scrollbar - simplified for performance */
 ::-webkit-scrollbar {
   width: 6px;
 }
@@ -82,19 +90,18 @@ body {
   background: #94a3b8;
 }
 
-/* Form styles */
+/* Form styles - fixed ring property */
 input:focus,
 textarea:focus {
   outline: none;
-  ring: 2px;
-  ring-color: #000000;
+  box-shadow: 0 0 0 2px #000000;
   border-color: #000000;
 }
 
-/* Smooth transitions */
+/* Smooth transitions - limited to transform and opacity for better performance */
 a,
 button {
-  transition: all 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 
 /* Mobile optimizations */
@@ -114,9 +121,10 @@ button {
   }
 }
 
-/* Loading animation for images */
+/* Loading animation for images - optimized with will-change */
 img {
   transition: opacity 0.3s ease-in-out;
+  will-change: opacity;
 }
 
 img[loading] {
@@ -134,27 +142,29 @@ button:focus {
   outline-offset: 2px;
 }
 
-/* Gradient text effect */
+/* Gradient text effect - optimized with will-change */
 .gradient-text {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  will-change: transform;
 }
 
-/* Card hover effects */
+/* Card hover effects - optimized with transform3d and will-change */
 .card-hover {
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  will-change: transform, box-shadow;
 }
 
 .card-hover:hover {
-  transform: translateY(-4px);
+  transform: translateY3d(-4px, 0, 0);
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
-/* Button press effect */
+/* Button press effect - optimized with transform3d */
 .btn-press:active {
-  transform: scale(0.98);
+  transform: scale3d(0.98, 0.98, 1);
 }
 
 /* Custom spacing for sections */
@@ -170,14 +180,15 @@ button:focus {
   }
 }
 
-/* Glass morphism effect */
+/* Glass morphism effect - optimized with will-change */
 .glass {
   background: rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.18);
+  will-change: transform;
 }
 
-/* Notification styles */
+/* Notification styles - optimized with transform3d and will-change */
 .notification {
   position: fixed;
   top: 20px;
@@ -188,12 +199,13 @@ button:focus {
   padding: 16px;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   z-index: 1000;
-  transform: translateX(100%);
+  transform: translate3d(100%, 0, 0);
   transition: transform 0.3s ease-in-out;
+  will-change: transform;
 }
 
 .notification.show {
-  transform: translateX(0);
+  transform: translate3d(0, 0, 0);
 }
 
 /* Dark mode support */
@@ -202,4 +214,11 @@ button:focus {
     background: #1f2937;
     color: #f9fafb;
   }
+}
+
+/* Performance optimization class for elements that frequently change */
+.gpu-accelerated {
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  will-change: transform;
 }