fix(ui): make animated background drift subtly

The animated background had an animation assigned, but the layers painted at the
viewport size so the background-position changes were effectively static. Give
the ambient light layers larger paint areas and drift them slowly so the
animated option visibly moves without becoming distracting.

Reduced-motion users keep the same static background.

Test Plan:
- git diff --check

Refs: user redesign nitpick about animated background not moving
This commit is contained in:
2026-05-19 20:47:55 +02:00
parent e5235948df
commit 2af55981c3
@@ -36,15 +36,23 @@
transparent 55% transparent 55%
), ),
linear-gradient(180deg, #0c1218 0%, var(--bg-0) 100%); linear-gradient(180deg, #0c1218 0%, var(--bg-0) 100%);
background-size: 100% 100%; background-size: 145% 130%, 140% 125%, 100% 100%;
animation: bgshift 18s ease-in-out infinite alternate; animation: bgshift 22s ease-in-out infinite alternate;
} }
@keyframes bgshift { @keyframes bgshift {
0% { 0% {
background-position: 0% 0%, 0% 0%, 0% 0%; background-position: 0% 0%, 100% 0%, 0% 0%;
}
50% {
background-position: 12% 6%, 82% 9%, 0% 0%;
} }
100% { 100% {
background-position: 10% 4%, -6% 2%, 0% 0%; background-position: 4% 10%, 92% 16%, 0% 0%;
}
}
@media (prefers-reduced-motion: reduce) {
.bg-animated {
animation: none;
} }
} }