From 1dc45a285db1f5bb0662a0d5d63497cba6a510bd Mon Sep 17 00:00:00 2001
From: James Smith <jamessmith1@outlook.com>
Date: Sun, 19 Apr 2026 14:54:34 +0100
Subject: [PATCH] perf(css): fix rendering slowdown on low-power hardware (Pi5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove backdrop-filter: blur(5px) from .card and .panel — on ARM/Linux
  Chromium this is software-rendered, causing severe CPU overhead at 42+
  instances. The opaque surface gradient makes blur imperceptible anyway.
- Remove inset vignette box-shadow from .panel added in 51c1014
- Rewrite panel-pulse keyframes to animate opacity only (was box-shadow,
  which triggers CPU repaint every frame; opacity is compositor-only)
- Gate body::before and .visuals-container::after scanline pseudo-elements
  under [data-animations="off"] — the toggle was blind to both
- Gate panel-indicator pulse under [data-animations="off"] for consistency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/core/components.css | 18 +++++++-----------
 static/css/index.css           |  5 +++++
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/static/css/core/components.css b/static/css/core/components.css
index 65cd1e0..f9b91d8 100644
--- a/static/css/core/components.css
+++ b/static/css/core/components.css
@@ -140,7 +140,6 @@
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    backdrop-filter: blur(5px);
 }
 
 .card-header {
@@ -177,8 +176,7 @@
     border: 1px solid rgba(74, 163, 255, 0.24);
     border-radius: var(--radius-lg);
     overflow: hidden;
-    box-shadow: var(--shadow-sm), inset 0 0 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    backdrop-filter: blur(5px);
+    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 @supports (clip-path: polygon(0 0)) {
@@ -234,14 +232,8 @@
 }
 
 @keyframes panel-pulse {
-    0%, 100% {
-        box-shadow: 0 0 4px var(--status-online), 0 0 8px rgba(56, 193, 128, 0.4);
-        opacity: 1;
-    }
-    50% {
-        box-shadow: 0 0 8px var(--status-online), 0 0 16px rgba(56, 193, 128, 0.6);
-        opacity: 0.85;
-    }
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
 }
 
 .panel-indicator.active {
@@ -256,6 +248,10 @@
     }
 }
 
+[data-animations="off"] .panel-indicator.active {
+    animation: none;
+}
+
 .panel-content {
     padding: var(--space-3);
 }
diff --git a/static/css/index.css b/static/css/index.css
index 9b7723b..a589275 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -7345,6 +7345,11 @@ body::before {
     animation: none !important;
 }
 
+[data-animations="off"] body::before,
+[data-animations="off"] .visuals-container::after {
+    display: none;
+}
+
 /* ============================================
    VISUAL REFRESH OVERRIDES
    ============================================ */