Add smooth parallax background pan

wwwroot/app.js

@@ -8,6 +8,7 @@ import {
 } from "./js/i18n.js";
 
 initI18n();
+setupBackgroundPan();
 
 const state = {
     isAuthenticated: false,
@@ -836,6 +837,42 @@ function setupCardVisualHover(el, url) {
     ["mouseleave", "blur"].forEach((evt) => el.addEventListener(evt, reset));
 }
 
+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);
+    }
+    let targetX = 0;
+    let targetY = 0;
+    let currX = 0;
+    let currY = 0;
+
+    const setTarget = (x, y) => {
+        targetX = x;
+        targetY = y;
+    };
+
+    const step = () => {
+        currX += (targetX - currX) * ease;
+        currY += (targetY - currY) * ease;
+        root.style.setProperty("--bg-x", `${currX}px`);
+        root.style.setProperty("--bg-y", `${currY}px`);
+        requestAnimationFrame(step);
+    };
+
+    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);
+    });
+
+    window.addEventListener("mouseleave", () => setTarget(0, 0));
+    window.addEventListener("blur", () => setTarget(0, 0));
+    step();
+}
+
 async function main() {
     setupHandlers();
     try {
@@ -897,7 +934,7 @@ function scoreToEmoji(score) {
 }
 
 function neutralEmoji() {
-    return "⬅️";
+    return "😐";
 }
 
 function signatureSuggestions(list) {

wwwroot/styles.css

@@ -8,6 +8,9 @@
         sans-serif;
     background: #f6e9d6;
     color: #2c1c0d;
+    --bg-scale: 115%;
+    --bg-x: 0px;
+    --bg-y: 0px;
 }
 
 *,
@@ -24,9 +27,12 @@
     align-items: center;
     gap: 16px;
     min-height: 100vh;
-    background:
-        url("background.png") center/cover no-repeat fixed,
-        #f6e9d6;
+    background-color: #f6e9d6;
+    background-image: url("background.png");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: var(--bg-scale) var(--bg-scale);
+    background-position: calc(50% + var(--bg-x)) calc(50% + var(--bg-y));
 }
 
 .lang-field {