update sigil

frontend/src/components/CyberFx.astro

@@ -18,6 +18,23 @@
 	<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>
+
+	<div class="cs-hud">
+		<div class="cs-hud-item cs-hud--tl">0x00 // ADDR</div>
+		<div class="cs-hud-item cs-hud--tr">SYS.PTR // 0.0, 0.0</div>
+		<div class="cs-hud-item cs-hud--bl">MEM.DUMP // OK</div>
+		<div class="cs-hud-item cs-hud--br">ATELIER.V6 // #0F2A</div>
+	</div>
+
+	<div class="cs-boot">
+		<div class="cs-boot-log">
+			<p>> INITIALIZING ARCHIVE...</p>
+			<p>> LOADING CYBERSIGIL.SYS... [ OK ]</p>
+			<p>> ALLOCATING BUFFER 0x8F2A... [ OK ]</p>
+			<p>> DECRYPTING BIOMETRICS... [ OK ]</p>
+			<p>> ACCESS GRANTED.</p>
+		</div>
+	</div>
 </div>
 
 <script>
@@ -84,6 +101,10 @@
 		let depth = 0, raf = 0;
 		let mx = 0, my = 0; // mouse relative (-1..1)
 
+		const hudTL = fx.querySelector('.cs-hud--tl');
+		const hudTR = fx.querySelector('.cs-hud--tr');
+		const hudBL = fx.querySelector('.cs-hud--bl');
+
 		const apply = () => {
 			raf = 0;
 			fx.style.opacity = String(1 - 0.5 * depth);
@@ -93,7 +114,51 @@
 			root.style.setProperty('--cs-py', `${(my * 15).toFixed(1)}px`);
 			root.style.setProperty('--cs-cx', `${(mx * -8).toFixed(1)}px`);
 			root.style.setProperty('--cs-cy', `${(my * -8).toFixed(1)}px`);
+
+			// update HUD
+			if (hudTL) hudTL.textContent = `0x${Math.floor(depth * 255).toString(16).toUpperCase().padStart(2, '0')} // ADDR`;
+			if (hudTR) hudTR.textContent = `SYS.PTR // ${mx.toFixed(2)}, ${my.toFixed(2)}`;
 		};
+
+		/* ─── Terminal Command Echo ─── */
+		const onBtnClick = (e: MouseEvent) => {
+			const btn = (e.target as HTMLElement).closest('button, a.btn');
+			if (!btn || !hudBL) return;
+			const label = btn.textContent?.trim().slice(0, 12).toUpperCase() || 'NULL';
+			hudBL.textContent = `> CMD: [${label}] ... [OK]`;
+			hudBL.classList.remove('cs-hud-flicker');
+			void hudBL.offsetWidth;
+			hudBL.classList.add('cs-hud-flicker');
+		};
+		window.addEventListener('click', onBtnClick);
+		off.push(() => window.removeEventListener('click', onBtnClick));
+
+		/* ─── Character Scramble ─── */
+		const scrambleChars = '!@#$%^&*()_+{}:"<>?-=[];\',./';
+		const onHover = (e: MouseEvent) => {
+			const el = (e.target as HTMLElement).closest('.font-display, .btn, .prose h1, .prose h2');
+			if (!el || el.classList.contains('cs-is-scrambling')) return;
+			
+			const original = el.textContent || '';
+			if (!original.trim()) return;
+			
+			el.classList.add('cs-is-scrambling');
+			let iterations = 0;
+			const interval = setInterval(() => {
+				el.textContent = original.split('').map((char, index) => {
+					if (index < iterations) return original[index];
+					return scrambleChars[Math.floor(Math.random() * scrambleChars.length)];
+				}).join('');
+				
+				if (iterations >= original.length) {
+					clearInterval(interval);
+					el.classList.remove('cs-is-scrambling');
+				}
+				iterations += 1 / 3;
+			}, 30);
+		};
+		window.addEventListener('mouseover', onHover);
+		off.push(() => window.removeEventListener('mouseover', onHover));
 		const schedule = () => { if (!raf) raf = requestAnimationFrame(apply); };
 
 		const onScroll = () => {

frontend/src/lib/cybersigil.ts

@@ -65,10 +65,25 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		const ax = Math.abs(x);
 		if (ax > maxX) maxX = ax;
 	};
-	const emit = (d: string, cls: string) => {
+	const emit = (d: string, cls: string, style?: string) => {
 		if (strokeCount >= MAX_PATHS) return;
+		const s = style ? ` style="${style};--i:${strokeCount % 16}"` : ` style="--i:${strokeCount % 16}"`;
 		parts.push(
-			`<path class="${cls}" d="${d}" pathLength="1" style="--i:${strokeCount % 16}" filter="url(#cs-erosion)"/>`,
+			`<path class="${cls}" d="${d}" pathLength="1"${s} filter="url(#cs-erosion)"/>`,
+		);
+		strokeCount++;
+	};
+
+	const emitRect = (x: number, y: number, sz: number, cls: string) => {
+		parts.push(
+			`<rect x="${n(x)}" y="${n(y)}" width="${n(sz)}" height="${n(sz)}" class="${cls}" style="--i:${strokeCount % 16}"/>`,
+		);
+		strokeCount++;
+	};
+
+	const emitHUD = (d: string, cls: string) => {
+		parts.push(
+			`<path class="${cls}" d="${d}" pathLength="1" style="--i:${strokeCount % 16}"/>`,
 		);
 		strokeCount++;
 	};
@@ -161,7 +176,11 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		];
 		const tail: Pt = [Math.max(-2, hook[0] - L * rnd(0.25, 0.45)), hook[1] + rnd(-4, 12)];
 		const pts: Pt[] = [[ox, oy], mid, peak, hook, tail];
-		emit(spline(pts, 5.5), 'cs-sig-main');
+		
+		// Depth shading: background limbs are thinner and fainter
+		const sw = depth === 0 ? 1.6 : 2.6;
+		const op = depth === 0 ? 0.45 : 0.9;
+		emit(spline(pts, 5.5), 'cs-sig-main', `stroke-width:${sw};opacity:${op}`);
 
 		// Bifurcation: split at the mid point with a secondary branch
 		if (depth > 0 && rng() < 0.45) {
@@ -169,7 +188,7 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 			const bL = L * rnd(0.4, 0.7);
 			const bPeak: Pt = [mid[0] + Math.cos(bAng) * bL, mid[1] + Math.sin(bAng) * bL];
 			const bPts: Pt[] = [mid, bPeak, [bPeak[0] + rnd(-10, 10), bPeak[1] + rnd(10, 20)]];
-			emit(spline(bPts, 4), 'cs-sig-main');
+			emit(spline(bPts, 4), 'cs-sig-main', `stroke-width:${sw * 0.8};opacity:${op}`);
 			if (rng() < 0.3) ornament(bPeak, bAng, 0.6);
 		}
 
@@ -289,6 +308,13 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		if (isTangle && rng() < 0.5) {
 			ornament(node, bias, 0.8);
 		}
+
+		if (isTangle) {
+			// Digital Sediment: tiny bit-dust squares at tangle nodes
+			for (let j = 0; j < 6; j++) {
+				emitRect(node[0] + rnd(-12, 12), node[1] + rnd(-12, 12), rnd(1, 3), 'cs-sig-dust');
+			}
+		}
 	}
 
 	// ── Technical Connectors: sparse, straight circuit lines
@@ -308,6 +334,12 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		emitText(pt[0] + rnd(4, 12), pt[1] + rnd(-4, 4), pick(symbols), 'cs-sig-text');
 	}
 
+	// ── Calibration HUD: geometric framing arcs and crosshairs
+	const hudR = maxX + PAD * 1.5;
+	emitHUD(`M${n(-hudR)} 0 A${n(hudR)} ${n(hudR)} 0 0 1 ${n(hudR)} 0`, 'cs-sig-hud');
+	emitHUD(`M${n(-hudR)} ${H} A${n(hudR)} ${n(hudR)} 0 0 0 ${n(hudR)} ${H}`, 'cs-sig-hud');
+	emitHUD(`M0 ${n(-PAD)} L0 ${n(H + PAD)}`, 'cs-sig-hud cs-sig-hud--v');
+
 	const half = parts.join('');
 	const minX = -(maxX + PAD);
 	const vbW = 2 * (maxX + PAD);

frontend/src/styles/partials/70-cybersigil.css

@@ -61,6 +61,85 @@ html.cybersigil body::after {
 .cybersigil .salon-atmosphere::before { background: var(--sky);   opacity: 0.06; }
 .cybersigil .salon-atmosphere::after  { background: var(--mauve); opacity: 0.05; }
 
+/* HUD Overlay */
+.cybersigil .cs-hud {
+  position: fixed;
+  inset: 0;
+  padding: 1.5rem;
+  pointer-events: none;
+  z-index: 10;
+  font-family: var(--font-sans);
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--sky);
+  opacity: 0.5;
+}
+.cybersigil .cs-hud-item { position: absolute; }
+.cybersigil .cs-hud--tl { top: 1.5rem;    left: 1.5rem; }
+.cybersigil .cs-hud--tr { top: 1.5rem;    right: 1.5rem; }
+.cybersigil .cs-hud--bl { bottom: 1.5rem; left: 1.5rem; }
+.cybersigil .cs-hud--br { bottom: 1.5rem; right: 1.5rem; }
+
+.cs-hud-flicker {
+  animation: cs-flicker 0.4s steps(4) 1;
+}
+
+/* Barbed Borders (Stitched Wire) */
+.cybersigil .plate,
+.cybersigil .btn,
+.cybersigil .glass {
+  border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M0 0 H100 V100 H0 Z' fill='none' stroke='%234fe9ff' stroke-width='1.5' stroke-dasharray='4 12'/><path d='M10 0 L15 -5 M30 0 L25 -5 M50 0 L50 -8 M70 0 L75 -5 M90 0 L85 -5' fill='none' stroke='%234fe9ff' stroke-width='1'/><path d='M10 100 L15 105 M30 100 L25 105 M50 100 L50 108 M70 100 L75 105 M90 100 L85 105' fill='none' stroke='%234fe9ff' stroke-width='1'/></svg>");
+  border-image-slice: 10;
+  border-image-repeat: stretch;
+}
+.cybersigil .plate:hover,
+.cybersigil .btn:hover {
+  border-image-source: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M0 0 H100 V100 H0 Z' fill='none' stroke='%23c8327a' stroke-width='2' stroke-dasharray='1 4'/><path d='M5 0 L15 -10 M25 0 L35 -10 M45 0 L55 -10 M65 0 L75 -10 M85 0 L95 -10' fill='none' stroke='%23c8327a' stroke-width='1.5'/></svg>");
+  animation: cs-flicker 0.2s infinite;
+}
+
+/* Boot Overlay */
+.cybersigil .cs-boot {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: var(--crust);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  animation: cs-boot-fade 0.8s steps(1) 0.6s forwards;
+}
+.cybersigil .cs-boot-log {
+  font-family: var(--font-display);
+  font-size: clamp(0.9rem, 4vw, 1.2rem);
+  color: var(--sky);
+  line-height: 1.4;
+  text-shadow: 0 0 8px var(--sky);
+  max-width: 90vw;
+  padding: 1rem;
+}
+.cybersigil .cs-boot-log p {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 0;
+  animation: cs-boot-type 0.1s steps(20) forwards;
+}
+.cybersigil .cs-boot-log p:nth-child(2) { animation-delay: 0.1s; }
+.cybersigil .cs-boot-log p:nth-child(3) { animation-delay: 0.2s; }
+.cybersigil .cs-boot-log p:nth-child(4) { animation-delay: 0.3s; }
+.cybersigil .cs-boot-log p:nth-child(5) { animation-delay: 0.4s; }
+
+@keyframes cs-boot-fade {
+  0%   { opacity: 1; visibility: visible; }
+  99%  { opacity: 0; visibility: visible; }
+  100% { opacity: 0; visibility: hidden; display: none; }
+}
+@keyframes cs-boot-type {
+  to { width: 100%; }
+}
+
 /* ─── cs-fx overlay system (DOM in CyberFx.astro) ─────────────────────────
  * Inert everywhere; only the cybersigil theme switches it on. Decorative
  * layers ride above content at low opacity (pointer-events:none); the sigil
@@ -131,8 +210,7 @@ html.cybersigil body::after {
 }
 .cybersigil .cs-fx-wire .cs-sigil path {
   animation: 
-    cs-redraw 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite,
-    cs-shimmer 4s ease-in-out infinite alternate;
+    cs-redraw 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
   /* negative, per-stroke offset: the field is always mid-carve, never blank */
   animation-delay: calc(var(--i, 0) * -0.4s);
 }
@@ -205,7 +283,6 @@ html.cybersigil body::after {
   width: 100%;
   height: 100%;
   overflow: visible;
-  animation: cs-jitter 12s step-end infinite;
 }
 @keyframes cs-jitter {
   0%, 95% { transform: translate(0,0) scale(1); }
@@ -267,10 +344,30 @@ html.cybersigil body::after {
   animation: cs-flicker 4s linear infinite;
 }
 
+/* Digital Sediment */
+.cybersigil .cs-sig-dust {
+  fill: var(--sky);
+  opacity: 0.4;
+  filter: drop-shadow(0 0 1px var(--sky));
+}
+
+/* Calibration HUD */
+.cybersigil .cs-sig-hud {
+  fill: none;
+  stroke: var(--sky);
+  stroke-width: 0.3;
+  opacity: 0.12;
+  stroke-dasharray: 2 6;
+}
+.cybersigil .cs-sig-hud--v {
+  stroke-dasharray: 1 15;
+  opacity: 0.08;
+}
+
 /* Stroke-weight tiers — heavy growth, hair filaments, prickly barbs, motifs. */
 .cybersigil .cs-sigil .cs-sig-main { stroke-width: 2.8; }
 .cybersigil .cs-sigil .cs-sig-spine {
-  animation: cs-haptic 3s ease-in-out infinite;
+  /* Haptic pulse removed for a more static look */
 }
 @keyframes cs-haptic {
   0%, 100% { stroke-width: 2.8; filter: drop-shadow(0 0 2px var(--sky)); }