Add cursor-tracking card glare and accent-linked background blobs

- Subtle radial glare follows cursor over card/template-card elements
  using a single document-level mousemove listener (event delegation)
- Ambient background blob colors now derive from the selected accent
  color with hue-shifted variants
- Glare intensity kept very subtle (3.5% dark / 12% light theme)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 11:13:55 +03:00
parent 40ea2e3b99
commit ff7b595032
6 changed files with 102 additions and 11 deletions

View File

@@ -136,17 +136,7 @@ body.modal-open {
animation: blobC 22s ease-in-out infinite alternate;
}
[data-theme="dark"] {
--bg-anim-a: rgba(76, 175, 80, 0.10);
--bg-anim-b: rgba(33, 150, 243, 0.08);
--bg-anim-c: rgba(156, 39, 176, 0.07);
}
[data-theme="light"] {
--bg-anim-a: rgba(76, 175, 80, 0.10);
--bg-anim-b: rgba(33, 150, 243, 0.08);
--bg-anim-c: rgba(156, 39, 176, 0.07);
}
/* Blob colors derived from accent via JS (--bg-anim-a/b/c set in index.html) */
@keyframes blobA {
0% { transform: translate(0, 0) scale(1); }