Add ambient visual reactivity and location visit variety

- #app's filter (hue-rotate/saturate) now tracks dread continuously,
  and a fixed vignette bleeds red as hemlighet drops below 40 — no
  new assets, just CSS driven by existing state.
- A kaos log entry now triggers a brief screen-glitch shake.
- Location visits pick from 3 flavor-text variants per site instead
  of a single fixed line, so repeat visits don't repeat verbatim.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-07-13 00:01:51 +02:00
parent 80fdebf102
commit 6ed9d2dac3
3 changed files with 74 additions and 9 deletions

View File

@@ -36,6 +36,29 @@ body {
max-width: 1200px;
margin: 0 auto;
gap: 0;
filter: hue-rotate(calc(var(--dread-intensity, 0) * -35deg)) saturate(calc(1 + var(--dread-intensity, 0) * 0.7));
transition: filter 2s ease;
}
#app.kaos-glitch { animation: kaos-glitch-shake 0.4s steps(2, end) 2; }
@keyframes kaos-glitch-shake {
0% { transform: translate(0, 0); }
20% { transform: translate(-2px, 1px); filter: hue-rotate(20deg); }
40% { transform: translate(2px, -1px); filter: hue-rotate(-15deg); }
60% { transform: translate(-1px, 2px); filter: hue-rotate(10deg); }
80% { transform: translate(1px, -2px); }
100% { transform: translate(0, 0); }
}
#danger-vignette {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999; /* below modals (1000/1001), above map/log */
background: radial-gradient(ellipse at center, transparent 55%, var(--danger) 150%);
opacity: var(--hemlighet-danger, 0);
transition: opacity 1.5s ease;
}
/* ── Header ── */