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:
@@ -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 ── */
|
||||
|
||||
Reference in New Issue
Block a user