From 8c4e6d8d085aa2d8a5441fd38aa0b06a55174538 Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolomon@gmail.com>
Date: Sun, 16 Aug 2026 12:21:29 -0500
Subject: [PATCH] feat(aura): add Carbon Blue atmospheric background partial

---
 styles/base/global.css     | 41 ++++++++++++++++++++++++++++++++++++++
 views/partials/aura-bg.php | 36 +++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 views/partials/aura-bg.php

diff --git a/styles/base/global.css b/styles/base/global.css
index 979d115..ea96e0d 100644
--- a/styles/base/global.css
+++ b/styles/base/global.css
@@ -83,3 +83,44 @@ main#maincontent {
 /* Responsive embeds */
 .embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
 .embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+/* Carbon Blue atmospheric field (decorative — content must sit in z-index: 1) */
+.aura-bg {
+	position: relative;
+	overflow: hidden;
+	min-height: 100vh;
+	isolation: isolate;
+}
+
+.aura-layer-1 {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(138deg, #05070c 0%, #0f172a 40%, #172554 70%, #1e3a8a 100%);
+	mix-blend-mode: normal;
+	pointer-events: none;
+	transform: translateZ(0);
+	will-change: transform;
+}
+
+.aura-layer-2 {
+	position: absolute;
+	inset: 0;
+	background: radial-gradient(ellipse 45% 50% at 72% 40%, rgba(96, 165, 250, 0.20) 0%, transparent 68%);
+	mix-blend-mode: screen;
+	pointer-events: none;
+	transform: translateZ(0);
+	will-change: transform;
+}
+
+.aura-layer-2--mobile { filter: blur(105px); }
+.aura-layer-2--desktop { filter: blur(151px); }
+
+.aura-grain {
+	position: absolute;
+	inset: 0;
+	mix-blend-mode: overlay;
+	opacity: 0.85;
+	pointer-events: none;
+}
+
+.aura-grain svg { display: block; width: 100%; height: 100%; }
diff --git a/views/partials/aura-bg.php b/views/partials/aura-bg.php
new file mode 100644
index 0000000..2d6edc6
--- /dev/null
+++ b/views/partials/aura-bg.php
@@ -0,0 +1,36 @@
+<?php
+/**
+ * Aura Background Partial — Carbon Blue
+ *
+ * Renders three decorative layers (linear gradient, radial backlight, SVG
+ * grain) over a transparent container. The body carries `background-color:
+ * #100e0b`; do NOT set a background on this container or the blend modes
+ * will composite against the container instead of the page.
+ *
+ * All layers are aria-hidden and ignore pointer events. Content must sit
+ * inside a wrapper with `position: relative; z-index: 1`.
+ *
+ * @package KsPortfolio
+ */
+
+namespace KsPortfolio;
+
+$blur = isset( $blur ) && 'desktop' === $blur ? 'aura-layer-2--desktop' : 'aura-layer-2--mobile';
+?>
+<div class="aura-bg" aria-hidden="true">
+	<div class="aura-layer-1"></div>
+	<div class="aura-layer-2 <?php echo esc_attr( $blur ); ?>"></div>
+	<div class="aura-grain">
+		<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+			<filter id="aura-grain-filter">
+				<feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="4" stitchTiles="stitch" />
+				<feColorMatrix type="matrix"
+					values="0.181 0.608 0.061 0 0.075
+					        0.181 0.608 0.061 0 0.075
+					        0.181 0.608 0.061 0 0.075
+					        0     0     0     1 0" />
+			</filter>
+			<rect width="100%" height="100%" filter="url(#aura-grain-filter)" />
+		</svg>
+	</div>
+</div>