Invert parallax and keep background aspect

wwwroot/app.js

@@ -841,8 +841,9 @@ function setupBackgroundPan(config = {}) {
     const root = document.documentElement;
     const maxOffset = config.maxOffsetPx ?? 30;
     const ease = config.ease ?? 0.08;
-    if (config.scalePercent) {
-        root.style.setProperty("--bg-scale", config.scalePercent);
+    const scaleFactor = config.scaleFactor ?? 1.12;
+    if (scaleFactor) {
+        root.style.setProperty("--bg-scale", scaleFactor);
     }
     let targetX = 0;
     let targetY = 0;
@@ -865,7 +866,7 @@ function setupBackgroundPan(config = {}) {
     window.addEventListener("mousemove", (e) => {
         const nx = (e.clientX / window.innerWidth - 0.5) * 2;
         const ny = (e.clientY / window.innerHeight - 0.5) * 2;
-        setTarget(nx * maxOffset, ny * maxOffset);
+        setTarget(-nx * maxOffset, -ny * maxOffset);
     });
 
     window.addEventListener("mouseleave", () => setTarget(0, 0));
@@ -934,7 +935,7 @@ function scoreToEmoji(score) {
 }
 
 function neutralEmoji() {
-    return "😐";
+    return "⬅️";
 }
 
 function signatureSuggestions(list) {

wwwroot/styles.css

@@ -8,7 +8,7 @@
         sans-serif;
     background: #f6e9d6;
     color: #2c1c0d;
-    --bg-scale: 115%;
+    --bg-scale: 1.12;
     --bg-x: 0px;
     --bg-y: 0px;
 }
@@ -28,11 +28,21 @@
     gap: 16px;
     min-height: 100vh;
     background-color: #f6e9d6;
+    position: relative;
+    overflow: hidden;
+}
+.page::before {
+    content: "";
+    position: fixed;
+    inset: 0;
     background-image: url("background.png");
     background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: var(--bg-scale) var(--bg-scale);
+    background-size: cover;
     background-position: calc(50% + var(--bg-x)) calc(50% + var(--bg-y));
+    transform: scale(var(--bg-scale));
+    transform-origin: center;
+    z-index: -1;
+    will-change: transform, background-position;
 }
 
 .lang-field {