/* Subtle Therapy Flow — decorative homepage enhancement. */

.bb-site .bb-therapy-flow {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	contain: layout paint;
}

/* WordPress constrains direct block children to the global content width.
 * The decorative overlay must instead cover the complete hero photograph so
 * the thread remains positioned between both people at every desktop width. */
.bb-site .bb-hero > .bb-therapy-flow {
	width: 100%;
	max-width: none;
	margin: 0;
}

.bb-site .bb-therapy-flow__art {
	display: block;
	width: 100%;
	height: 100%;
}

.bb-site .bb-therapy-flow__glow {
	fill: none;
	stroke: url("#bb-therapy-flow-a");
	stroke-linecap: round;
	stroke-width: 8;
	opacity: 0.12;
	animation: bb-therapy-breathe 7.8s ease-in-out infinite alternate;
}

.bb-site .bb-therapy-flow__glow path + path {
	stroke: url("#bb-therapy-flow-b");
	stroke-width: 6;
}

.bb-site .bb-therapy-flow__thread,
.bb-site .bb-therapy-flow__stream {
	fill: none;
	vector-effect: non-scaling-stroke;
}

.bb-site .bb-therapy-flow__thread {
	stroke: url("#bb-therapy-flow-a");
	stroke-linecap: round;
	stroke-width: 1.15;
	opacity: 0.28;
}

.bb-site .bb-therapy-flow__thread--b {
	stroke: url("#bb-therapy-flow-b");
	opacity: 0.23;
}

.bb-site .bb-therapy-flow__thread--c {
	stroke-width: 0.75;
	opacity: 0.18;
}

.bb-site .bb-therapy-flow__stream {
	stroke: #fff6dc;
	stroke-dasharray: 1 44;
	stroke-linecap: round;
	stroke-width: 3.2;
	opacity: 0.72;
	animation: bb-therapy-travel 18s linear infinite;
}

.bb-site .bb-therapy-flow__stream--b {
	stroke: #bce9de;
	stroke-dasharray: 1 58;
	stroke-width: 2.4;
	opacity: 0.58;
	animation-duration: 23s;
	animation-direction: reverse;
}

.bb-site .bb-therapy-flow__stream--c {
	stroke: #f1c98b;
	stroke-dasharray: 1 71;
	stroke-width: 2;
	opacity: 0.48;
	animation-duration: 29s;
}

.bb-site .bb-therapy-flow.is-paused :is(.bb-therapy-flow__glow, .bb-therapy-flow__stream) {
	animation-play-state: paused;
}

@keyframes bb-therapy-travel {
	to {
		stroke-dashoffset: -540;
	}
}

@keyframes bb-therapy-breathe {
	from {
		opacity: 0.08;
	}

	to {
		opacity: 0.16;
	}
}

/* The current mobile art direction uses the quiet office/tree crop rather
 * than the two-person photograph. Hiding the flow avoids a contextless effect. */
@media (max-width: 781px) {
	.bb-site .bb-therapy-flow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-site .bb-therapy-flow__glow,
	.bb-site .bb-therapy-flow__stream {
		animation: none;
	}

	.bb-site .bb-therapy-flow__stream {
		display: none;
	}

	.bb-site .bb-therapy-flow__glow {
		opacity: 0.1;
	}
}