Remove laggy screen wide timer effect

Author: codergautam

styles/globals.scss

@@ -1225,19 +1225,19 @@ h1, h2, h3, span, label {
     transform: translateX(50%) scale(1.05);
 }
 
-// Screen edge warning effect - controlled by JavaScript conditions
-body:has(.timer.critical)::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    z-index: 999;
-    animation: screenPulse 1s ease-in-out infinite;
-    border: 8px solid transparent;
-}
+// Screen edge warning effect - disabled for performance
+// body:has(.timer.critical)::before {
+//     content: '';
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     pointer-events: none;
+//     z-index: 999;
+//     animation: screenPulse 1s ease-in-out infinite;
+//     border: 8px solid transparent;
+// }
 
 @keyframes timerPulse {
     0% {
@@ -1267,48 +1267,48 @@ body:has(.timer.critical)::before {
     }
 }
 
-@keyframes screenPulse {
-    0% {
-        border-color: rgba(200, 80, 80, 0);
-        box-shadow:
-            inset 0 0 0 rgba(200, 80, 80, 0),
-            inset 30px 0 100px rgba(200, 80, 80, 0),
-            inset -30px 0 100px rgba(200, 80, 80, 0),
-            inset 0 30px 100px rgba(200, 80, 80, 0),
-            inset 0 -30px 100px rgba(200, 80, 80, 0);
-    }
-    50% {
-        border-color: rgba(200, 80, 80, 0.6);
-        box-shadow:
-            inset 0 0 120px rgba(200, 80, 80, 0.1),
-            inset 30px 0 100px rgba(200, 80, 80, 0.25),
-            inset -30px 0 100px rgba(200, 80, 80, 0.25),
-            inset 0 30px 100px rgba(200, 80, 80, 0.25),
-            inset 0 -30px 100px rgba(200, 80, 80, 0.25);
-    }
-    100% {
-        border-color: rgba(200, 80, 80, 0);
-        box-shadow:
-            inset 0 0 0 rgba(200, 80, 80, 0),
-            inset 30px 0 100px rgba(200, 80, 80, 0),
-            inset -30px 0 100px rgba(200, 80, 80, 0),
-            inset 0 30px 100px rgba(200, 80, 80, 0),
-            inset 0 -30px 100px rgba(200, 80, 80, 0);
-    }
-}
+// @keyframes screenPulse {
+//     0% {
+//         border-color: rgba(200, 80, 80, 0);
+//         box-shadow:
+//             inset 0 0 0 rgba(200, 80, 80, 0),
+//             inset 30px 0 100px rgba(200, 80, 80, 0),
+//             inset -30px 0 100px rgba(200, 80, 80, 0),
+//             inset 0 30px 100px rgba(200, 80, 80, 0),
+//             inset 0 -30px 100px rgba(200, 80, 80, 0);
+//     }
+//     50% {
+//         border-color: rgba(200, 80, 80, 0.6);
+//         box-shadow:
+//             inset 0 0 120px rgba(200, 80, 80, 0.1),
+//             inset 30px 0 100px rgba(200, 80, 80, 0.25),
+//             inset -30px 0 100px rgba(200, 80, 80, 0.25),
+//             inset 0 30px 100px rgba(200, 80, 80, 0.25),
+//             inset 0 -30px 100px rgba(200, 80, 80, 0.25);
+//     }
+//     100% {
+//         border-color: rgba(200, 80, 80, 0);
+//         box-shadow:
+//             inset 0 0 0 rgba(200, 80, 80, 0),
+//             inset 30px 0 100px rgba(200, 80, 80, 0),
+//             inset -30px 0 100px rgba(200, 80, 80, 0),
+//             inset 0 30px 100px rgba(200, 80, 80, 0),
+//             inset 0 -30px 100px rgba(200, 80, 80, 0);
+//     }
+// }
 
-// Fallback for browsers that don't support :has()
-.screen-critical-warning {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    z-index: 999;
-    animation: screenPulse 1s ease-in-out infinite;
-    border: 8px solid transparent;
-}
+// Fallback for browsers that don't support :has() - disabled for performance
+// .screen-critical-warning {
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     pointer-events: none;
+//     z-index: 999;
+//     animation: screenPulse 1s ease-in-out infinite;
+//     border: 8px solid transparent;
+// }
 
 // Animated Counter Styles
 .animated-counter {