From 4640cd11a7539bb48debe77ae956c28a682b6af5 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 7 Jan 2026 13:05:42 +0100
Subject: [PATCH] feat: ux enhancements (animations, dynamic backgrounds,
 micro-interactions)

---
 src/web/public/style.css                      | 102 ++++++++++++++++++
 ...26-01-07-ux-enhancements-and-animations.md |  34 ------
 2 files changed, 102 insertions(+), 34 deletions(-)
 delete mode 100644 tickets/2026-01-07-ux-enhancements-and-animations.md

diff --git a/src/web/public/style.css b/src/web/public/style.css
index ddbbcbc..f968e4d 100644
--- a/src/web/public/style.css
+++ b/src/web/public/style.css
@@ -280,4 +280,106 @@ footer {
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
+}
+
+/* Animations & Micro-Interactions */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Entry Animations */
+.fade-in {
+    animation: fadeIn 0.4s ease-out forwards;
+}
+
+/* Stagger animations for children using nth-child */
+main>* {
+    opacity: 0;
+    /* Initially hidden */
+    animation: slideUp 0.5s ease-out forwards;
+}
+
+main>*:nth-child(1) {
+    animation-delay: 0.1s;
+}
+
+main>*:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+main>*:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+main>*:nth-child(4) {
+    animation-delay: 0.4s;
+}
+
+/* Dynamic Background */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background:
+        radial-gradient(circle at 15% 50%, hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08), transparent 25%),
+        radial-gradient(circle at 85% 30%, hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.08), transparent 25%);
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* Link Interactions */
+a {
+    position: relative;
+    transition: color 0.2s ease, opacity 0.2s ease;
+}
+
+header nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 0%;
+    height: 2px;
+    background: var(--primary);
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+header nav a:hover::after {
+    width: 100%;
+}
+
+/* Accessibility: Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
 }
\ No newline at end of file
diff --git a/tickets/2026-01-07-ux-enhancements-and-animations.md b/tickets/2026-01-07-ux-enhancements-and-animations.md
deleted file mode 100644
index 2139618..0000000
--- a/tickets/2026-01-07-ux-enhancements-and-animations.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# 2026-01-07-ux-enhancements-animations.md: UX Enhancements & Micro-Interactions
-
-**Status:** Draft
-**Created:** 2026-01-07
-**Tags:** ux, animation, interactivity, frontend
-
-## 1. Context & User Story
-* **As a:** User interacting with the dashboard
-* **I want to:** See smooth transitions and immediate feedback when interacting with elements
-* **So that:** The application feels responsive, "alive," and high-quality.
-
-## 2. Technical Requirements
-### Data Model Changes
-- N/A
-
-### API / Interface
-- N/A
-
-## 3. Constraints & Validations (CRITICAL)
-- **Performance:** Animations must use `transform` and `opacity` properties to ensure 60fps performance without triggering expensive layout reflows.
-- **Accessibility:** Respect `prefers-reduced-motion` media queries to disable animations for sensitive users.
-- **Subtlety:** Animations should be fast and subtle (e.g., 150ms-300ms), not distracting.
-
-## 4. Acceptance Criteria
-1. [ ] Content fades in smoothly when the page loads.
-2. [ ] Interactive elements (buttons, links, cards) have hover effects (scale, lift, or glow) that provide visual feedback.
-3. [ ] A subtle, dynamic background effect (e.g., slow gradient mesh or blur) is implemented to remove the "flat" look.
-4. [ ] Loading states (skeletons or spinners) are available for future dynamic content.
-
-## 5. Implementation Plan
-- [ ] Add keyframe animations for entry transitions (fade-in, slide-up) in `style.css`.
-- [ ] Apply hover transitions to `.card` and navigation links.
-- [ ] Implement a subtle background gradient using `background-image` or pseudo-elements.
-- [ ] Add `prefers-reduced-motion` overrides.