@salmexio/ui 1.0.0 → 1.1.0

package/dist/forms/Slider/Slider.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Slider
 
-  Neo-Brutalist Dark — Range slider with keyboard support, optional value display,
+  INFRARED — Range slider with keyboard support, optional value display,
   step marks, min/max labels, and full ARIA compliance.
 
   @example
@@ -199,12 +199,12 @@ function handleChange(e: Event) {
 
 	/* Focused track glow — WebKit */
 	.sx-slider-input:focus-visible::-webkit-slider-runnable-track {
-		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-cyan));
+		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-primary));
 	}
 
 	/* Focused track glow — Firefox */
 	.sx-slider-input:focus-visible::-moz-range-track {
-		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-cyan));
+		box-shadow: 0 0 0 1px var(--sx-slider-accent, var(--sx-color-primary));
 	}
 
 	/* Track — WebKit */
@@ -213,8 +213,8 @@ function handleChange(e: Event) {
 		border-radius: var(--sx-radius-full);
 		background: linear-gradient(
 			to right,
-			var(--sx-slider-accent, var(--sx-color-cyan)) 0%,
-			var(--sx-slider-accent, var(--sx-color-cyan)) var(--sx-slider-fill),
+			var(--sx-slider-accent, var(--sx-color-primary)) 0%,
+			var(--sx-slider-accent, var(--sx-color-primary)) var(--sx-slider-fill),
 			var(--sx-color-surface-2) var(--sx-slider-fill),
 			var(--sx-color-surface-2) 100%
 		);
@@ -231,7 +231,7 @@ function handleChange(e: Event) {
 	.sx-slider-input::-moz-range-progress {
 		height: var(--sx-slider-track-h, 6px);
 		border-radius: var(--sx-radius-full);
-		background: var(--sx-slider-accent, var(--sx-color-cyan));
+		background: var(--sx-slider-accent, var(--sx-color-primary));
 	}
 
 	/* Thumb — WebKit */
@@ -241,7 +241,7 @@ function handleChange(e: Event) {
 		height: var(--sx-slider-thumb, 18px);
 		border-radius: var(--sx-radius-full);
 		background: var(--sx-color-text);
-		border: 2px solid var(--sx-slider-accent, var(--sx-color-cyan));
+		border: 2px solid var(--sx-slider-accent, var(--sx-color-primary));
 		margin-top: calc((var(--sx-slider-track-h, 6px) - var(--sx-slider-thumb, 18px)) / 2);
 		transition:
 			box-shadow var(--sx-transition-fast),
@@ -256,10 +256,10 @@ function handleChange(e: Event) {
 
 	.sx-slider-input:focus-visible::-webkit-slider-thumb {
 		box-shadow:
-			0 0 0 3px var(--sx-slider-ring, rgba(0, 212, 255, 0.35)),
-			0 0 12px var(--sx-slider-glow, rgba(0, 212, 255, 0.25));
+			0 0 0 3px var(--sx-slider-ring, rgba(255, 107, 53, 0.35)),
+			0 0 12px var(--sx-slider-glow, rgba(255, 107, 53, 0.25));
 		transform: scale(1.2);
-		background: var(--sx-slider-accent, var(--sx-color-cyan));
+		background: var(--sx-slider-accent, var(--sx-color-primary));
 		border-color: var(--sx-color-text);
 	}
 
@@ -269,7 +269,7 @@ function handleChange(e: Event) {
 		height: var(--sx-slider-thumb, 18px);
 		border-radius: var(--sx-radius-full);
 		background: var(--sx-color-text);
-		border: 2px solid var(--sx-slider-accent, var(--sx-color-cyan));
+		border: 2px solid var(--sx-slider-accent, var(--sx-color-primary));
 		transition:
 			box-shadow var(--sx-transition-fast),
 			transform var(--sx-transition-fast),
@@ -283,38 +283,38 @@ function handleChange(e: Event) {
 
 	.sx-slider-input:focus-visible::-moz-range-thumb {
 		box-shadow:
-			0 0 0 3px var(--sx-slider-ring, rgba(0, 212, 255, 0.35)),
-			0 0 12px var(--sx-slider-glow, rgba(0, 212, 255, 0.25));
+			0 0 0 3px var(--sx-slider-ring, rgba(255, 107, 53, 0.35)),
+			0 0 12px var(--sx-slider-glow, rgba(255, 107, 53, 0.25));
 		transform: scale(1.2);
-		background: var(--sx-slider-accent, var(--sx-color-cyan));
+		background: var(--sx-slider-accent, var(--sx-color-primary));
 		border-color: var(--sx-color-text);
 	}
 
 	/* Color variants — accent + focus ring colors */
 	.sx-slider-color-cyan {
-		--sx-slider-accent: var(--sx-color-cyan);
-		--sx-slider-ring: rgba(0, 212, 255, 0.35);
-		--sx-slider-glow: rgba(0, 212, 255, 0.25);
+		--sx-slider-accent: var(--sx-color-primary);
+		--sx-slider-ring: rgba(255, 107, 53, 0.35);
+		--sx-slider-glow: rgba(255, 107, 53, 0.25);
 	}
 	.sx-slider-color-green {
 		--sx-slider-accent: var(--sx-color-green);
-		--sx-slider-ring: rgba(0, 255, 136, 0.35);
-		--sx-slider-glow: rgba(0, 255, 136, 0.25);
+		--sx-slider-ring: rgba(74, 222, 128, 0.35);
+		--sx-slider-glow: rgba(74, 222, 128, 0.25);
 	}
 	.sx-slider-color-gold {
-		--sx-slider-accent: var(--sx-color-gold);
-		--sx-slider-ring: rgba(255, 184, 0, 0.35);
-		--sx-slider-glow: rgba(255, 184, 0, 0.25);
+		--sx-slider-accent: var(--sx-color-secondary);
+		--sx-slider-ring: rgba(200, 168, 78, 0.35);
+		--sx-slider-glow: rgba(200, 168, 78, 0.25);
 	}
 	.sx-slider-color-red {
 		--sx-slider-accent: var(--sx-color-red);
-		--sx-slider-ring: rgba(255, 82, 82, 0.35);
-		--sx-slider-glow: rgba(255, 82, 82, 0.25);
+		--sx-slider-ring: rgba(220, 38, 38, 0.35);
+		--sx-slider-glow: rgba(220, 38, 38, 0.25);
 	}
 	.sx-slider-color-purple {
-		--sx-slider-accent: var(--sx-color-purple);
-		--sx-slider-ring: rgba(168, 85, 247, 0.35);
-		--sx-slider-glow: rgba(168, 85, 247, 0.25);
+		--sx-slider-accent: var(--sx-color-teal);
+		--sx-slider-ring: rgba(61, 139, 139, 0.35);
+		--sx-slider-glow: rgba(61, 139, 139, 0.25);
 	}
 
 	/* Size variants */

package/dist/forms/Slider/Slider.svelte.d.ts

@@ -36,7 +36,7 @@ interface Props {
 /**
  * Slider
  *
- * Neo-Brutalist Dark — Range slider with keyboard support, optional value display,
+ * INFRARED — Range slider with keyboard support, optional value display,
  * step marks, min/max labels, and full ARIA compliance.
  *
  * @example

package/dist/forms/TextInput/TextInput.svelte

@@ -1,7 +1,7 @@
 <!--
   @component TextInput
 
-  Neo-Brutalist Dark — Clean text field with subtle borders and cyan accents.
+  INFRARED — Clean text field with subtle borders and vermilion accents.
   Label, error, hint, prefix/suffix, clearable, password toggle. Full a11y.
 -->
 <script lang="ts">
@@ -341,13 +341,14 @@ function handleKeyDown(e: KeyboardEvent) {
 	}
 
 	.sx-input-focused {
-		border-color: var(--sx-color-cyan);
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		border-color: var(--sx-color-primary);
+		animation: sx-focus-breathe 2s ease-in-out infinite;
 	}
 
 	.sx-input-error {
 		border-color: var(--sx-color-red);
 		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
+		animation: sx-error-shake 300ms ease-out;
 	}
 
 	.sx-input-valid {
@@ -476,7 +477,7 @@ function handleKeyDown(e: KeyboardEvent) {
 	.sx-input-loading {
 		display: flex;
 		align-items: center;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-input-spinner {
@@ -513,7 +514,7 @@ function handleKeyDown(e: KeyboardEvent) {
 
 	.sx-input-clear:focus-visible,
 	.sx-input-password-toggle:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
@@ -549,12 +550,21 @@ function handleKeyDown(e: KeyboardEvent) {
 	}
 
 	.sx-input-charcount-warn {
-		color: var(--sx-color-gold);
+		color: var(--sx-color-secondary);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
 		.sx-input-spinner {
 			animation: none;
 		}
+
+		.sx-input-focused {
+			animation: none;
+			box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
+		}
+
+		.sx-input-error {
+			animation: none;
+		}
 	}
 </style>

package/dist/forms/TextInput/TextInput.svelte.d.ts

@@ -41,7 +41,7 @@ interface Props extends Omit<HTMLInputAttributes, 'class' | 'size' | 'inputmode'
 /**
  * TextInput
  *
- * Neo-Brutalist Dark — Clean text field with subtle borders and cyan accents.
+ * INFRARED — Clean text field with subtle borders and vermilion accents.
  * Label, error, hint, prefix/suffix, clearable, password toggle. Full a11y.
  */
 declare const TextInput: import("svelte").Component<Props, {}, "value">;

package/dist/forms/Textarea/Textarea.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Textarea
 
-  Neo-Brutalist Dark — Multi-line text input with custom resize handle,
+  INFRARED — Multi-line text input with custom resize handle,
   auto-resize, character count, validation states, and full accessibility.
   Follows TextInput visual patterns.
 
@@ -391,8 +391,8 @@ onMount(() => {
 	}
 
 	.sx-textarea-focused {
-		border-color: var(--sx-color-cyan);
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		border-color: var(--sx-color-primary);
+		box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
 	}
 
 	.sx-textarea-error-state {
@@ -480,7 +480,7 @@ onMount(() => {
 	}
 
 	.sx-textarea-handle-active {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	/* Vertical: bar along the bottom edge */
@@ -580,7 +580,7 @@ onMount(() => {
 	}
 
 	.sx-textarea-charcount-warning {
-		color: var(--sx-color-gold);
+		color: var(--sx-color-secondary);
 	}
 
 	.sx-textarea-charcount-exceeded {

package/dist/forms/Textarea/Textarea.svelte.d.ts

@@ -32,7 +32,7 @@ interface Props {
 /**
  * Textarea
  *
- * Neo-Brutalist Dark — Multi-line text input with custom resize handle,
+ * INFRARED — Multi-line text input with custom resize handle,
  * auto-resize, character count, validation states, and full accessibility.
  * Follows TextInput visual patterns.
  *

package/dist/forms/Toggle/Toggle.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Toggle
 
-  Neo-Brutalist Dark — Accessible toggle switch with on/off states,
+  INFRARED — Accessible toggle switch with on/off states,
   label positioning, size variants, and keyboard support.
   Uses role="switch" with aria-checked for screen readers.
 
@@ -139,27 +139,27 @@ function toggle() {
 
 	.sx-toggle-track:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
 	}
 
 	.sx-toggle-checked {
-		background: var(--sx-color-cyan);
-		border-color: var(--sx-color-cyan);
+		background: var(--sx-color-primary);
+		border-color: var(--sx-color-primary);
 	}
 
 	.sx-toggle-checked:hover:not(:disabled) {
-		border-color: var(--sx-color-cyan);
-		background: var(--sx-color-cyan-bright, var(--sx-color-cyan));
+		border-color: var(--sx-color-primary);
+		background: var(--sx-color-primary);
 	}
 
-	/* Thumb */
+	/* Thumb — spring easing for a snappy, physical feel */
 	.sx-toggle-thumb {
 		display: block;
 		width: var(--sx-toggle-thumb, 18px);
 		height: var(--sx-toggle-thumb, 18px);
 		border-radius: var(--sx-radius-full);
 		background: var(--sx-color-text);
-		transition: transform var(--sx-transition-fast);
+		transition: transform 200ms var(--sx-ease-spring);
 		box-shadow: var(--sx-shadow-sm);
 	}
 

package/dist/forms/Toggle/Toggle.svelte.d.ts

@@ -24,7 +24,7 @@ interface Props {
 /**
  * Toggle
  *
- * Neo-Brutalist Dark — Accessible toggle switch with on/off states,
+ * INFRARED — Accessible toggle switch with on/off states,
  * label positioning, size variants, and keyboard support.
  * Uses role="switch" with aria-checked for screen readers.
  *

package/dist/layout/Card/Card.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Card
 
-  Neo-Brutalist Dark — Glassmorphic panel with frosted background, subtle borders.
+  INFRARED — Glassmorphic panel with frosted background, subtle borders.
   Optional header/footer, semantic element support.
 
   @example
@@ -120,12 +120,14 @@ const currentPadding = $derived(paddingValues[padding]);
 
 	.sx-card-clickable:hover {
 		transform: translateY(-2px);
-		border-color: var(--sx-color-cyan-active);
-		box-shadow: var(--sx-shadow-md);
+		border-color: rgba(255, 107, 53, 0.15);
+		box-shadow:
+			var(--sx-shadow-md),
+			0 0 24px -6px rgba(255, 107, 53, 0.08);
 	}
 
 	.sx-card-clickable:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 

package/dist/layout/Card/Card.svelte.d.ts

@@ -16,7 +16,7 @@ interface Props {
 /**
  * Card
  *
- * Neo-Brutalist Dark — Glassmorphic panel with frosted background, subtle borders.
+ * INFRARED — Glassmorphic panel with frosted background, subtle borders.
  * Optional header/footer, semantic element support.
  *
  * @example

package/dist/layout/Container/Container.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Container
 
-  Neo-Brutalist Dark — Responsive layout wrapper. Max-width, padding, optional centering.
+  INFRARED — Responsive layout wrapper. Max-width, padding, optional centering.
   Pure layout utility; supports semantic elements.
 -->
 <script lang="ts">

package/dist/layout/Container/Container.svelte.d.ts

@@ -16,7 +16,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
 /**
  * Container
  *
- * Neo-Brutalist Dark — Responsive layout wrapper. Max-width, padding, optional centering.
+ * INFRARED — Responsive layout wrapper. Max-width, padding, optional centering.
  * Pure layout utility; supports semantic elements.
  */
 declare const Container: import("svelte").Component<Props, {}, "">;

package/dist/layout/ThermalBackground/ThermalBackground.svelte

@@ -0,0 +1,313 @@
+<!--
+  ThermalBackground — Dynamic INFRARED background
+
+  Layered ambient background with thermal blob drift, radar sweep,
+  and film grain. Pure CSS — zero JS runtime cost.
+
+  Usage:
+    <ThermalBackground />              — default (all layers)
+    <ThermalBackground grain={false} /> — no grain overlay
+    <ThermalBackground sweep={false} /> — no radar sweep
+    <ThermalBackground intensity="low" /> — subtler blobs
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Show film grain overlay */
+		grain?: boolean;
+		/** Show radar sweep line */
+		sweep?: boolean;
+		/** Blob intensity: low = barely visible, default = subtle, high = pronounced */
+		intensity?: 'low' | 'default' | 'high';
+		/** Additional CSS class */
+		class?: string;
+		/** Test ID */
+		testId?: string;
+	}
+
+	let {
+		grain = true,
+		sweep = true,
+		intensity = 'default',
+		class: className = '',
+		testId = undefined,
+	}: Props = $props();
+</script>
+
+<div
+	class="sx-thermal-bg sx-thermal-{intensity} {className}"
+	aria-hidden="true"
+	data-testid={testId}
+>
+	<!-- Layer 1: Thermal blobs — large diffuse orbs drifting independently -->
+	<div class="sx-thermal-blobs">
+		<div class="sx-thermal-blob sx-thermal-blob-1"></div>
+		<div class="sx-thermal-blob sx-thermal-blob-2"></div>
+		<div class="sx-thermal-blob sx-thermal-blob-3"></div>
+		<div class="sx-thermal-blob sx-thermal-blob-4"></div>
+	</div>
+
+	<!-- Layer 2: Radar/thermal sweep — horizontal scan line -->
+	{#if sweep}
+		<div class="sx-thermal-sweep"></div>
+	{/if}
+
+	<!-- Layer 3: Animated film grain -->
+	{#if grain}
+		<div class="sx-thermal-grain"></div>
+	{/if}
+</div>
+
+<style>
+	/* ========================================
+	   ROOT CONTAINER — fixed fullscreen backdrop
+	   ======================================== */
+
+	.sx-thermal-bg {
+		position: fixed;
+		inset: 0;
+		z-index: 0;
+		overflow: hidden;
+		pointer-events: none;
+		background: var(--sx-color-base);
+	}
+
+	/* ========================================
+	   THERMAL BLOBS — Drifting infrared orbs
+	   Large, soft radial gradients that move on
+	   independent orbits. Each has a unique size,
+	   color, speed, and path.
+	   ======================================== */
+
+	.sx-thermal-blobs {
+		position: absolute;
+		inset: -50%;
+		width: 200%;
+		height: 200%;
+	}
+
+	.sx-thermal-blob {
+		position: absolute;
+		border-radius: 50%;
+		filter: blur(80px);
+		will-change: transform;
+	}
+
+	/* Blob 1 — Vermilion/primary — largest, slowest */
+	.sx-thermal-blob-1 {
+		width: 45vmax;
+		height: 45vmax;
+		top: 10%;
+		left: 15%;
+		background: radial-gradient(
+			circle,
+			rgba(255, 107, 53, 0.08) 0%,
+			rgba(255, 107, 53, 0.02) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-1 35s ease-in-out infinite;
+	}
+
+	/* Blob 2 — Brass/secondary — medium, offset orbit */
+	.sx-thermal-blob-2 {
+		width: 35vmax;
+		height: 35vmax;
+		top: 55%;
+		right: 10%;
+		background: radial-gradient(
+			circle,
+			rgba(200, 168, 78, 0.06) 0%,
+			rgba(200, 168, 78, 0.015) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-2 42s ease-in-out infinite;
+	}
+
+	/* Blob 3 — Teal — smallest, fastest, cool counterpoint */
+	.sx-thermal-blob-3 {
+		width: 30vmax;
+		height: 30vmax;
+		bottom: 15%;
+		left: 40%;
+		background: radial-gradient(
+			circle,
+			rgba(61, 139, 139, 0.06) 0%,
+			rgba(61, 139, 139, 0.015) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-3 28s ease-in-out infinite;
+	}
+
+	/* Blob 4 — Deep vermilion — secondary heat signature */
+	.sx-thermal-blob-4 {
+		width: 38vmax;
+		height: 38vmax;
+		top: 40%;
+		left: 60%;
+		background: radial-gradient(
+			circle,
+			rgba(224, 85, 32, 0.05) 0%,
+			rgba(224, 85, 32, 0.01) 50%,
+			transparent 70%
+		);
+		animation: sx-thermal-drift-4 50s ease-in-out infinite;
+	}
+
+	/* ========================================
+	   BLOB DRIFT ORBITS
+	   Each blob traces a unique Lissajous-like path
+	   using translate transforms. Different durations
+	   ensure they never sync up, creating organic motion.
+	   ======================================== */
+
+	@keyframes sx-thermal-drift-1 {
+		0%     { transform: translate(0%, 0%) scale(1); }
+		25%    { transform: translate(12%, -8%) scale(1.05); }
+		50%    { transform: translate(-5%, 15%) scale(0.95); }
+		75%    { transform: translate(-15%, -5%) scale(1.08); }
+		100%   { transform: translate(0%, 0%) scale(1); }
+	}
+
+	@keyframes sx-thermal-drift-2 {
+		0%     { transform: translate(0%, 0%) scale(1); }
+		20%    { transform: translate(-18%, 8%) scale(1.1); }
+		40%    { transform: translate(8%, -12%) scale(0.9); }
+		60%    { transform: translate(-8%, -18%) scale(1.05); }
+		80%    { transform: translate(15%, 5%) scale(0.95); }
+		100%   { transform: translate(0%, 0%) scale(1); }
+	}
+
+	@keyframes sx-thermal-drift-3 {
+		0%     { transform: translate(0%, 0%) rotate(0deg) scale(1); }
+		33%    { transform: translate(20%, -15%) rotate(5deg) scale(1.1); }
+		66%    { transform: translate(-15%, 10%) rotate(-3deg) scale(0.92); }
+		100%   { transform: translate(0%, 0%) rotate(0deg) scale(1); }
+	}
+
+	@keyframes sx-thermal-drift-4 {
+		0%     { transform: translate(0%, 0%) scale(1); }
+		30%    { transform: translate(-10%, 12%) scale(1.06); }
+		60%    { transform: translate(15%, -8%) scale(0.94); }
+		100%   { transform: translate(0%, 0%) scale(1); }
+	}
+
+	/* ========================================
+	   INTENSITY VARIANTS
+	   Control blob visibility without changing motion
+	   ======================================== */
+
+	.sx-thermal-low .sx-thermal-blobs {
+		opacity: 0.5;
+	}
+
+	.sx-thermal-default .sx-thermal-blobs {
+		opacity: 1;
+	}
+
+	.sx-thermal-high .sx-thermal-blobs {
+		opacity: 1.5;
+	}
+
+	.sx-thermal-high .sx-thermal-blob-1 {
+		background: radial-gradient(
+			circle,
+			rgba(255, 107, 53, 0.14) 0%,
+			rgba(255, 107, 53, 0.04) 50%,
+			transparent 70%
+		);
+	}
+
+	.sx-thermal-high .sx-thermal-blob-2 {
+		background: radial-gradient(
+			circle,
+			rgba(200, 168, 78, 0.10) 0%,
+			rgba(200, 168, 78, 0.03) 50%,
+			transparent 70%
+		);
+	}
+
+	.sx-thermal-high .sx-thermal-blob-3 {
+		background: radial-gradient(
+			circle,
+			rgba(61, 139, 139, 0.10) 0%,
+			rgba(61, 139, 139, 0.03) 50%,
+			transparent 70%
+		);
+	}
+
+	.sx-thermal-high .sx-thermal-blob-4 {
+		background: radial-gradient(
+			circle,
+			rgba(224, 85, 32, 0.09) 0%,
+			rgba(224, 85, 32, 0.02) 50%,
+			transparent 70%
+		);
+	}
+
+	/* ========================================
+	   RADAR SWEEP — Horizontal scan line
+	   A faint horizontal gradient that sweeps
+	   top to bottom like a thermal scanner or
+	   radar display. Very subtle.
+	   ======================================== */
+
+	.sx-thermal-sweep {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(
+			180deg,
+			transparent 0%,
+			rgba(255, 107, 53, 0.015) 48%,
+			rgba(255, 107, 53, 0.04) 50%,
+			rgba(255, 107, 53, 0.015) 52%,
+			transparent 100%
+		);
+		background-size: 100% 300%;
+		animation: sx-thermal-scan 8s linear infinite;
+		opacity: 0.7;
+	}
+
+	@keyframes sx-thermal-scan {
+		0%   { background-position: 0% 0%; }
+		100% { background-position: 0% 100%; }
+	}
+
+	/* ========================================
+	   FILM GRAIN — Animated noise texture
+	   SVG feTurbulence noise with subtle position
+	   stepping for a living grain effect.
+	   ======================================== */
+
+	.sx-thermal-grain {
+		position: absolute;
+		inset: -50%;
+		width: 300%;
+		height: 300%;
+		opacity: 0.03;
+		mix-blend-mode: overlay;
+		pointer-events: none;
+		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+		background-size: 256px 256px;
+		animation: sx-thermal-grain-drift 0.4s steps(4) infinite;
+	}
+
+	@keyframes sx-thermal-grain-drift {
+		0%   { transform: translate(0, 0); }
+		25%  { transform: translate(-5%, -5%); }
+		50%  { transform: translate(3%, -8%); }
+		75%  { transform: translate(-8%, 2%); }
+		100% { transform: translate(0, 0); }
+	}
+
+	/* ========================================
+	   REDUCED MOTION — Static fallback
+	   ======================================== */
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-thermal-blob,
+		.sx-thermal-sweep,
+		.sx-thermal-grain {
+			animation: none !important;
+		}
+	}
+</style>