From 9d326c7f298930c7560e24064dc0283da7d49ec1 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 21 May 2026 04:50:06 +0200
Subject: [PATCH] added boot

---
 frontend/src/components/CyberFx.astro         | 24 ++++++++
 .../src/styles/partials/70-cybersigil.css     | 58 +++++++++++++++++++
 2 files changed, 82 insertions(+)

diff --git a/frontend/src/components/CyberFx.astro b/frontend/src/components/CyberFx.astro
index 3d76d5c..2afe9f1 100644
--- a/frontend/src/components/CyberFx.astro
+++ b/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,9 @@
 		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 apply = () => {
 			raf = 0;
 			fx.style.opacity = String(1 - 0.5 * depth);
@@ -93,6 +113,10 @@
 			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)}`;
 		};
 		const schedule = () => { if (!raf) raf = requestAnimationFrame(apply); };
 
diff --git a/frontend/src/styles/partials/70-cybersigil.css b/frontend/src/styles/partials/70-cybersigil.css
index 00b2e5a..815747a 100644
--- a/frontend/src/styles/partials/70-cybersigil.css
+++ b/frontend/src/styles/partials/70-cybersigil.css
@@ -61,6 +61,64 @@ 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; }
+
+/* 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: 1.2rem;
+  color: var(--sky);
+  line-height: 1.4;
+  text-shadow: 0 0 8px var(--sky);
+}
+.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; }
+  100% { opacity: 0; visibility: hidden; }
+}
+@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