/* ==========================================================================
   Systems Place — Governed-field streams background (reusable hero backdrop)
   --------------------------------------------------------------------------
   A self-contained, decorative animated backdrop: a faint drifting grid, a set
   of scrolling "stream" ribbons, a slow governance sweep, and a soft vignette
   that keeps the edges calm. Rendered by
   systems_place_wordpress_theme_render_streams_background() as a `.sp-streams-bg`
   carrier placed behind the home hero (`.sp-odh`) and the shared marketing hero
   (`.sp-hero`). Pure CSS keyframes — no JavaScript. The carrier is contained to
   its hero (position:absolute), never fixed to the viewport, so it does not
   bleed into sections below the hero.

   Migrated from the centered-hero source `assets/bg.css`: selectors scoped to
   `.sp-streams-bg`, the fixed full-viewport layer made absolute/contained.
   ========================================================================== */

.sp-streams-bg {
	--loop: 16s;
	--ink: 40, 39, 51;
	--cell: 48px;
	position: absolute;
	inset: 0;
	z-index: 0;
	/* The carrier is a full-bleed decorative layer. When it sits inside a
	   constrained-layout hero (e.g. `.sp-hero`), WordPress would otherwise cap it
	   at the content width and centre it; force it to fill its positioned host. */
	max-width: none !important;
	margin: 0 !important;
	overflow: hidden;
	background: #fff;
	pointer-events: none;
	contain: strict;
}

/* faint responsive grid — matches the hero's 48px stage grid */
.sp-streams-bg .grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(rgba(var(--ink), .030) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--ink), .030) 1px, transparent 1px);
	background-size: var(--cell) var(--cell);
	animation: gridDrift var(--loop) linear infinite;
	will-change: background-position;
}

/* A quiet S-link lattice gives large white fields a recognisable brand
   texture without competing with copy or the evidence ledger. */
.sp-streams-bg .lattice {
	position: absolute;
	inset: -5%;
	background-image: url("../images/systems-place-S-mark.svg");
	background-position: 18px 18px;
	background-repeat: repeat;
	background-size: clamp(72px, 7vw, 112px) auto;
	filter: grayscale(1);
	opacity: .012;
	transform: rotate(-3deg) scale(1.08);
}
@keyframes gridDrift {
	from { background-position: 0 0; }
	to   { background-position: var(--cell) var(--cell); }
}

/* soft horizontal governed channel behind the centre streams */
.sp-streams-bg .channel {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 23%;
	transform: translateY(-50%);
	background: radial-gradient(120% 100% at 50% 50%,
		rgba(var(--ink), .022), rgba(var(--ink), .010) 45%, transparent 72%);
}

/* the streams */
.sp-streams-bg .streams {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.sp-streams-bg .streams path {
	fill: none;
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
}
.sp-streams-bg .bob,
.sp-streams-bg .scroll {
	transform-box: view-box;
	transform-origin: 0 0;
	animation-duration: var(--loop);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}
.sp-streams-bg .scroll { animation-timing-function: linear; }
.sp-streams-bg .bob { animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
.sp-streams-bg .node {
	fill: rgba(var(--ink), .4);
	transform-box: fill-box;
	transform-origin: center;
	animation-duration: var(--loop);
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}

/* slow luminance pass — a quiet governance sweep */
.sp-streams-bg .sweep {
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 0;
	width: 48vw;
	background: linear-gradient(100deg, transparent,
		rgba(var(--ink), .018) 42%, rgba(var(--ink), .030) 50%,
		rgba(var(--ink), .018) 58%, transparent);
	transform: translateX(-60vw);
	animation: sweep var(--loop) linear infinite;
	will-change: transform;
	mix-blend-mode: multiply;
}
@keyframes sweep {
	from { transform: translateX(-60vw); }
	to   { transform: translateX(170vw); }
}

/* keep edges calm so header / footer / adjacent sections stay clean */
.sp-streams-bg .vignette {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .85), transparent 14%, transparent 86%, rgba(255, 255, 255, .9)),
		radial-gradient(130% 120% at 50% 46%, transparent 58%, rgba(255, 255, 255, .55));
}

/* per-stream scroll / bob / node timing (names referenced by inline
   animation-name in the streams markup) */
@keyframes sc0 { from { transform: translateX(0); } to { transform: translateX(1100.00px); } }
@keyframes bb0 { 0% { transform: translateY(0); } 50% { transform: translateY(9.0px); } 100% { transform: translateY(0); } }
@keyframes sc1 { from { transform: translateX(0); } to { transform: translateX(900.00px); } }
@keyframes bb1 { 0% { transform: translateY(0); } 50% { transform: translateY(11.0px); } 100% { transform: translateY(0); } }
@keyframes sc2 { from { transform: translateX(0); } to { transform: translateX(-640.00px); } }
@keyframes bb2 { 0% { transform: translateY(0); } 50% { transform: translateY(15.0px); } 100% { transform: translateY(0); } }
@keyframes sc3 { from { transform: translateX(0); } to { transform: translateX(-760.00px); } }
@keyframes bb3 { 0% { transform: translateY(0); } 25% { transform: translateY(7.0px); } 50% { transform: translateY(0); } 75% { transform: translateY(-7.0px); } 100% { transform: translateY(0); } }
@keyframes sc4 { from { transform: translateX(0); } to { transform: translateX(-760.00px); } }
@keyframes bb4 { 0% { transform: translateY(0); } 25% { transform: translateY(7.0px); } 50% { transform: translateY(0); } 75% { transform: translateY(-7.0px); } 100% { transform: translateY(0); } }
@keyframes sc5 { from { transform: translateX(0); } to { transform: translateX(-560.00px); } }
@keyframes bb5 { 0% { transform: translateY(0); } 50% { transform: translateY(17.0px); } 100% { transform: translateY(0); } }
@keyframes sc6 { from { transform: translateX(0); } to { transform: translateX(-1400.00px); } }
@keyframes bb6 { 0% { transform: translateY(0); } 50% { transform: translateY(20.0px); } 100% { transform: translateY(0); } }
@keyframes sc7 { from { transform: translateX(0); } to { transform: translateX(-840.00px); } }
@keyframes bb7 { 0% { transform: translateY(0); } 50% { transform: translateY(12.0px); } 100% { transform: translateY(0); } }
@keyframes nd0 { 0%, 100% { opacity: .10; transform: scale(.55); } 12% { opacity: .42; transform: scale(1); } }
@keyframes nd1 { 0%, 100% { opacity: .10; transform: scale(.55); } 34% { opacity: .42; transform: scale(1); } }
@keyframes nd2 { 0%, 100% { opacity: .10; transform: scale(.55); } 54% { opacity: .42; transform: scale(1); } }
@keyframes nd3 { 0%, 100% { opacity: .10; transform: scale(.55); } 72% { opacity: .42; transform: scale(1); } }
@keyframes nd4 { 0%, 100% { opacity: .10; transform: scale(.55); } 90% { opacity: .42; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.sp-streams-bg .grid,
	.sp-streams-bg .sweep,
	.sp-streams-bg .bob,
	.sp-streams-bg .scroll,
	.sp-streams-bg .node { animation: none !important; }
	.sp-streams-bg .sweep { display: none; }
	.sp-streams-bg .lattice { transform: none; }
}