added big sigil background

frontend/src/components/CyberFx.astro

@@ -42,6 +42,13 @@
 			});
 		}
 
+		/* ─── One slow-spinning sigil filling the background ─── */
+		const wire = document.querySelector<HTMLElement>('.cs-fx-wire');
+		if (wire && !wire.classList.contains('cs-fx-wire--sig')) {
+			wire.innerHTML = buildCybersigil({ count: 9 });
+			wire.classList.add('cs-fx-wire--sig');
+		}
+
 		/* ─── Scroll-entry databend on images ─── */
 		if (!reduced && 'IntersectionObserver' in window) {
 			const targets = document.querySelectorAll<HTMLElement>(

frontend/src/styles/global.css

@@ -1935,7 +1935,7 @@ input[type="date"] { color-scheme: light; }
 /* Corrupted-tube grain: cold static + tight scanlines, blue-shifted. */
 .cybersigil body::after,
 html.cybersigil body::after {
-  opacity: 0.42;
+  opacity: 0.24;
   background-image:
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.91 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
     repeating-linear-gradient(
@@ -1984,17 +1984,23 @@ html.cybersigil body::after {
   background-size: 7px 7px;
 }
 
-/* Slow wireframe mesh drift — a derelict orbital, almost subliminal. */
+/* Slow background growth — one generated sigil (DOM injected by CyberFx),
+ * spreading from its central spine out to both sides, rotating almost
+ * imperceptibly. Sits behind the imagery (see image-lift rules below). */
 .cybersigil .cs-fx-wire {
   top: 50%;
   left: 50%;
-  width: 78vmin;
+  width: 92vmin;
-  height: 78vmin;
+  height: 92vmin;
-  opacity: 0.07;
+  opacity: 0.14;
-  mix-blend-mode: screen;
+  animation: cs-wire-spin 120s linear infinite;
-  background: center / contain no-repeat
+}
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%234FE9FF' stroke-width='0.6'><circle cx='100' cy='100' r='96'/><ellipse cx='100' cy='100' rx='96' ry='34'/><ellipse cx='100' cy='100' rx='96' ry='66'/><ellipse cx='100' cy='100' rx='34' ry='96'/><ellipse cx='100' cy='100' rx='66' ry='96'/><path d='M4 100 H196 M100 4 V196 M30 30 L170 170 M170 30 L30 170'/></svg>");
+.cybersigil .cs-fx-wire .cs-sigil {
-  animation: cs-wire-spin 96s linear infinite;
+  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 35%, transparent));
+}
+.cybersigil .cs-fx-wire .cs-sigil path {
+  animation: cs-carve 2400ms ease-out forwards;
+  animation-delay: calc(var(--i, 0) * 70ms);
 }
 
 /* Random horizontal databend tears — bright displaced bars, mostly absent. */
@@ -2224,7 +2230,18 @@ html.cybersigil body::after {
 .cybersigil .plate:hover .plate-caption-title {
   text-shadow: -1px 0 0 var(--sky), 1px 0 0 var(--mauve);
 }
-.cybersigil .plate-image { background: var(--mantle); }
+/* Lift the imagery clear of the ambient FX/grain so photos read solid —
+ * only the hover sigil (cs-plate-sig, z-index above this) sits over them. */
+.cybersigil .plate-image {
+  background: var(--mantle);
+  position: relative;
+  z-index: 12;
+}
+/* Drop the salon hang-tilt under cybersigil: the rigid terminal look wants
+ * square tiles, and removing the inline transform frees images from its
+ * stacking context so the z-index lift actually beats the fixed FX. */
+.cybersigil a.plate { transform: none !important; }
+.cybersigil .plate:hover { transform: translateY(-3px) !important; }
 .cybersigil .plate:hover .plate-image img {
   filter:
     drop-shadow(-3px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent))
@@ -2272,7 +2289,7 @@ html.cybersigil body::after {
   width: 46%;
   height: 118%;
   transform: translateX(-50%);
-  z-index: 2;
+  z-index: 14;
   pointer-events: none;
   opacity: 0;
   mix-blend-mode: screen;
@@ -2317,6 +2334,8 @@ html.cybersigil body::after {
   background:
     linear-gradient(var(--surface0), var(--surface0)) padding-box,
     linear-gradient(135deg, color-mix(in srgb, var(--sky) 40%, var(--surface2)), color-mix(in srgb, var(--mauve) 40%, var(--surface1))) border-box;
+  position: relative;
+  z-index: 12;
 }
 
 /* Section rule — terminal divider `// ……… [sigil] ……… //`. */