From 04733eb00a49085acba6c76e3278785f7d9374f5 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sun, 17 May 2026 15:38:04 +0200
Subject: [PATCH] edge sigil

---
 frontend/src/components/CyberFx.astro         | 13 ++++++++
 .../src/styles/partials/70-cybersigil.css     | 32 ++++++++++++++++++-
 .../src/styles/partials/99-reduced-motion.css |  3 +-
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/CyberFx.astro b/frontend/src/components/CyberFx.astro
index 4a62525..7f087c7 100644
--- a/frontend/src/components/CyberFx.astro
+++ b/frontend/src/components/CyberFx.astro
@@ -18,6 +18,8 @@
 	<i class="cs-fx-corner cs-fx-corner--tr"></i>
 	<i class="cs-fx-corner cs-fx-corner--bl"></i>
 	<i class="cs-fx-corner cs-fx-corner--br"></i>
+	<i class="cs-fx-edge cs-fx-edge--l"></i>
+	<i class="cs-fx-edge cs-fx-edge--r"></i>
 </div>
 
 <script>
@@ -42,6 +44,17 @@
 			});
 		}
 
+		/* ─── Tall sigil vines pinned to the left/right screen edges ─── */
+		/* Each edge gets its own growth (more organic than a shared one);
+		 * CSS pins the spine to the edge and clips the outer half so it
+		 * reads as an inward-creeping border vine. */
+		const edges = document.querySelectorAll<HTMLElement>('.cs-fx-edge');
+		edges.forEach((e) => {
+			if (e.classList.contains('cs-fx-edge--sig')) return;
+			e.innerHTML = buildCybersigil({ count: 8 });
+			e.classList.add('cs-fx-edge--sig');
+		});
+
 		/* ─── One slow-spinning sigil filling the background ─── */
 		const wire = document.querySelector<HTMLElement>('.cs-fx-wire');
 		if (wire && !wire.classList.contains('cs-fx-wire--sig')) {
diff --git a/frontend/src/styles/partials/70-cybersigil.css b/frontend/src/styles/partials/70-cybersigil.css
index 6e93af4..a733ddd 100644
--- a/frontend/src/styles/partials/70-cybersigil.css
+++ b/frontend/src/styles/partials/70-cybersigil.css
@@ -76,7 +76,8 @@ html.cybersigil body::after {
 .cybersigil .cs-fx-halftone,
 .cybersigil .cs-fx-wire,
 .cybersigil .cs-fx-tear,
-.cybersigil .cs-fx-corner {
+.cybersigil .cs-fx-corner,
+.cybersigil .cs-fx-edge {
   position: fixed;
   pointer-events: none;
 }
@@ -162,6 +163,35 @@ html.cybersigil body::after {
 .cybersigil .cs-fx-corner--bl { bottom: 0; left: 0;  transform: scaleY(-1); animation-delay: -3.4s; }
 .cybersigil .cs-fx-corner--br { bottom: 0; right: 0; transform: scale(-1);  animation-delay: -5.1s; }
 
+/* Edge vines — a tall sigil growth pinned to each screen edge, spine on
+ * the edge with its outer half clipped so it creeps inward only. Subtle
+ * ambient opacity; same perpetual carve/wipe as the wire + corners. */
+.cybersigil .cs-fx-edge {
+  top: 0;
+  bottom: 0;
+  width: clamp(64px, 9vw, 132px);
+  overflow: hidden;
+  opacity: 0.1;
+}
+.cybersigil .cs-fx-edge--l { left: 0; }
+.cybersigil .cs-fx-edge--r { right: 0; transform: scaleX(-1); }
+.cybersigil .cs-fx-edge .cs-sigil {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: auto;
+  height: 100%;
+  /* spine sits at the SVG's horizontal centre — shift it onto the edge so
+   * only the inward-growing half stays within the clipped box */
+  transform: translateX(-50%);
+  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sky) 35%, transparent));
+}
+.cybersigil .cs-fx-edge .cs-sigil path,
+.cybersigil .cs-fx-edge .cs-sigil line {
+  animation: cs-redraw 5.5s ease-in-out infinite;
+  animation-delay: calc(var(--i, 0) * -0.34s);
+}
+
 /* ─── Generated sigils (cs-sigil markup from lib/cybersigil.ts) ──────────
  * Inert/hidden everywhere; only cybersigil draws them. Strokes start fully
  * dashed-out and "carve" in via cs-carve. `forwards` fill means the reduced-
diff --git a/frontend/src/styles/partials/99-reduced-motion.css b/frontend/src/styles/partials/99-reduced-motion.css
index 671904d..652fef4 100644
--- a/frontend/src/styles/partials/99-reduced-motion.css
+++ b/frontend/src/styles/partials/99-reduced-motion.css
@@ -13,7 +13,8 @@
   /* The looping sigils would otherwise collapse to their hidden end-state —
    * pin them fully drawn instead so they stay visible, just still. */
   .cybersigil .cs-fx-wire .cs-sigil path,
-  .cybersigil .cs-fx-corner--sig .cs-sigil path {
+  .cybersigil .cs-fx-corner--sig .cs-sigil path,
+  .cybersigil .cs-fx-edge .cs-sigil path {
     animation: none !important;
     stroke-dashoffset: 0 !important;
   }