performance tweaks

assets/styles.css

@@ -167,6 +167,7 @@ body {
     pointer-events: none;
     animation: flicker 4s infinite;
     z-index: 3;
+    will-change: opacity; /* Performance: GPU-accelerated opacity animation */
 }
 
 @keyframes flicker {
@@ -277,11 +278,13 @@ body {
 .vhs-tracking.active.vertical {
     opacity: 1;
     animation: vhsScrollVertical 0.4s linear;
+    will-change: transform, opacity; /* Performance: GPU-accelerated animation */
 }
 
 .vhs-tracking.active.horizontal {
     opacity: 1;
     animation: vhsScrollHorizontal 0.4s linear;
+    will-change: transform, opacity; /* Performance: GPU-accelerated animation */
 }
 
 @keyframes vhsScrollVertical {
@@ -304,6 +307,7 @@ body {
     pointer-events: none;
     z-index: 20;
     overflow: hidden;
+    contain: strict; /* Performance: isolates paint scope for animated children */
 }
 
 .dim-spot {
@@ -340,24 +344,6 @@ body {
     animation: dimSpotDrift3 50s ease-in-out infinite;
 }
 
-.dim-spot-4 {
-    bottom: 0%;
-    right: 0%;
-    width: 45%;
-    height: 55%;
-    background: radial-gradient(ellipse 80% 90% at center, rgba(0, 0, 0, 0.5) 0%, transparent 65%);
-    animation: dimSpotDrift4 60s ease-in-out infinite;
-}
-
-.dim-spot-5 {
-    top: 35%;
-    left: 55%;
-    width: 30%;
-    height: 35%;
-    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
-    animation: dimSpotDrift5 40s ease-in-out infinite;
-}
-
 /* Slow drifting animations - each spot moves in a different pattern */
 @keyframes dimSpotDrift1 {
     0%, 100% { transform: translate(0%, 0%); }
@@ -380,20 +366,6 @@ body {
     75% { transform: translate(-4%, -10%); }
 }
 
-@keyframes dimSpotDrift4 {
-    0%, 100% { transform: translate(0%, 0%); }
-    25% { transform: translate(-8%, -6%); }
-    50% { transform: translate(-12%, 4%); }
-    75% { transform: translate(4%, -8%); }
-}
-
-@keyframes dimSpotDrift5 {
-    0%, 100% { transform: translate(0%, 0%); }
-    25% { transform: translate(-15%, 10%); }
-    50% { transform: translate(10%, 15%); }
-    75% { transform: translate(15%, -10%); }
-}
-
 /* ========================================
    DISPLAY GLITCH EFFECTS - END
    ======================================== */