new background

project-context.md

@@ -48,7 +48,7 @@ Havenllo (Haven + Trello) is a lightweight, single-user, no-authentication kanba
 - `web/src/components/CardDetailModal.tsx`: accessible card dialog with title editing, current-list status, native move-to-list selector, CommonMark Write/Preview description editor, timestamps, and delete confirmation.
 - `web/src/components/ConfirmDialog.tsx`: accessible destructive-action confirmation.
 - `web/src/components/Toast.tsx`: auto-dismissing non-blocking feedback.
-- `web/src/styles.css`: dark night-shift control-room theme with graphite surfaces, acid-lime/aurora accents, subtle grid/orbit decoration, stage-specific columns, centered short rails, horizontal mobile scrolling, pointer drop feedback, Markdown typography, focus states, 44px touch targets, and reduced-motion support.
+- `web/src/styles.css`: dark night-shift control-room theme with graphite surfaces, acid-lime/aurora accents, layered iridescent canvas wash, geometric grid/orbit decoration, stage-specific columns, centered short rails, horizontal mobile scrolling, pointer drop feedback, Markdown typography, focus states, 44px touch targets, and reduced-motion support.
 
 ### Embedding bridge
 

web/src/styles.css

@@ -621,7 +621,7 @@ textarea { min-height: 96px; resize: vertical; }
   font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: #07090e;
   color: #f1f5ed;
-  --canvas: #07090e;
+  --canvas: #090810;
   --canvas-glow: #121b1c;
   --surface: #10151d;
   --surface-raised: #171e28;
@@ -645,29 +645,35 @@ textarea { min-height: 96px; resize: vertical; }
 body {
   background-color: var(--canvas);
   background-image:
-    radial-gradient(circle at 78% -12%, rgba(169, 146, 255, 0.2), transparent 32rem),
+    radial-gradient(ellipse at 50% -18%, rgba(255, 125, 178, 0.22), transparent 36rem),
-    radial-gradient(circle at 4% 26%, rgba(109, 247, 208, 0.1), transparent 29rem),
+    radial-gradient(circle at 104% 24%, rgba(169, 146, 255, 0.23), transparent 31rem),
+    radial-gradient(circle at -8% 94%, rgba(109, 247, 208, 0.16), transparent 32rem),
+    conic-gradient(from 215deg at 50% 45%, rgba(215, 255, 99, 0.045), transparent 17%, rgba(169, 146, 255, 0.065) 37%, transparent 54%, rgba(109, 247, 208, 0.045) 75%, transparent 88%),
     linear-gradient(rgba(215, 255, 99, 0.035) 1px, transparent 1px),
     linear-gradient(90deg, rgba(215, 255, 99, 0.035) 1px, transparent 1px),
     var(--canvas);
-  background-size: auto, auto, 48px 48px, 48px 48px, auto;
+  background-size: auto, auto, auto, auto, 72px 72px, 72px 72px, auto;
   background-attachment: fixed;
 }
 
 .app-shell { position: relative; min-height: 100vh; overflow: hidden; }
 .app-shell::before {
   position: absolute;
-  top: 90px;
+  top: 112px;
-  right: -160px;
+  right: -218px;
-  width: 380px;
+  width: 520px;
-  height: 380px;
+  height: 520px;
-  border: 1px solid rgba(215, 255, 99, 0.12);
+  border: 1px solid rgba(215, 255, 99, 0.14);
   border-radius: 50%;
-  box-shadow: 0 0 0 22px rgba(215, 255, 99, 0.025), 0 0 0 44px rgba(215, 255, 99, 0.018);
+  box-shadow: 0 0 0 20px rgba(215, 255, 99, 0.04), 0 0 0 43px rgba(169, 146, 255, 0.045), 0 0 0 86px rgba(109, 247, 208, 0.025);
   content: "";
   pointer-events: none;
+  transform: rotate(14deg);
+  animation: orbit-drift 28s ease-in-out infinite alternate;
 }
 
+@keyframes orbit-drift { from { transform: translate3d(0, 0, 0) rotate(14deg); } to { transform: translate3d(-34px, 24px, 0) rotate(28deg); } }
+
 button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex="-1"]:focus-visible {
   outline: 2px solid var(--signal);
   outline-offset: 4px;