/* PEP Background Motion v1.0.0 — isolated additive styles. */
.pep-bg-motion-host {
	--pep-bg-strength: 0.76;
	--pep-bg-amber: 244, 119, 0;
	--pep-bg-sage: 125, 150, 103;
	--pep-bg-cycle-a: 32s;
	--pep-bg-cycle-b: 44s;
	--pep-bg-cycle-c: 58s;
	isolation: isolate;
}

/* Only used when the existing section has position:static. */
.pep-bg-motion-host--relative {
	position: relative;
}

/* The clipping belongs to the decoration, never to the content/section. */
.pep-bg-motion-host > .pep-bg-motion-layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	user-select: none;
	contain: paint;
	opacity: var(--pep-bg-strength);
}

.pep-bg-motion-layer > .pep-bg-motion-shape {
	position: absolute;
	display: block;
	width: clamp(380px, 62vw, 820px);
	aspect-ratio: 1;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transform-origin: 50% 50%;
	animation-play-state: paused;
}

/* Soft edges are drawn into the gradient: no animated blur or clip-path. */
.pep-bg-motion-layer > .pep-bg-motion-shape--amber {
	top: -33%;
	right: -16%;
	background-image:
		radial-gradient(ellipse at 58% 42%, rgba(var(--pep-bg-amber), .23) 0%, rgba(var(--pep-bg-amber), .16) 24%, rgba(var(--pep-bg-amber), .055) 46%, rgba(var(--pep-bg-amber), 0) 68%),
		radial-gradient(ellipse at 36% 62%, rgba(var(--pep-bg-amber), .18) 0%, rgba(var(--pep-bg-amber), .055) 28%, rgba(var(--pep-bg-amber), 0) 55%);
	transform: translate3d(-9%, 7%, 0) rotate(-24deg) scale(1.02, .84);
}

.pep-bg-motion-layer > .pep-bg-motion-shape--sage {
	bottom: -35%;
	left: -18%;
	background-image:
		radial-gradient(ellipse at 50% 50%, rgba(var(--pep-bg-sage), .30) 0%, rgba(var(--pep-bg-sage), .12) 34%, rgba(var(--pep-bg-sage), 0) 67%);
	transform: translate3d(8%, -5%, 0) rotate(16deg) scale(1.14, .78);
}

.pep-bg-motion-layer > .pep-bg-motion-shape--light {
	width: clamp(320px, 48vw, 680px);
	top: 10%;
	left: 34%;
	background-image:
		radial-gradient(ellipse at 52% 50%, rgba(255, 240, 207, .56) 0%, rgba(255, 244, 219, .17) 35%, rgba(255, 244, 219, 0) 68%);
	transform: translate3d(5%, 8%, 0) rotate(-12deg) scale(.93, 1.05);
}

.pep-bg-motion-host[data-pep-bg-tone="dark"] {
	--pep-bg-sage: 164, 187, 132;
}

.pep-bg-motion-host[data-pep-bg-tone="dark"] .pep-bg-motion-shape--light {
	opacity: .18;
}

@media (prefers-reduced-motion: no-preference) {
	.pep-bg-motion-layer > .pep-bg-motion-shape--amber {
		animation: pep-bg-drift-amber var(--pep-bg-cycle-a) cubic-bezier(.45, 0, .55, 1) infinite;
		animation-delay: -8s;
		animation-play-state: paused;
	}
	.pep-bg-motion-layer > .pep-bg-motion-shape--sage {
		animation: pep-bg-drift-sage var(--pep-bg-cycle-b) cubic-bezier(.45, 0, .55, 1) infinite;
		animation-delay: -18s;
		animation-play-state: paused;
	}
	.pep-bg-motion-layer > .pep-bg-motion-shape--light {
		animation: pep-bg-drift-light var(--pep-bg-cycle-c) cubic-bezier(.45, 0, .55, 1) infinite;
		animation-delay: -11s;
		animation-play-state: paused;
	}
	.pep-bg-motion-layer.is-active > .pep-bg-motion-shape {
		animation-play-state: running;
	}
	@keyframes pep-bg-drift-amber {
		0%, 100% { transform: translate3d(-9%, 7%, 0) rotate(-24deg) scale(1.02, .84); }
		34% { transform: translate3d(-25%, 22%, 0) rotate(9deg) scale(.94, 1.10); }
		68% { transform: translate3d(-3%, 34%, 0) rotate(32deg) scale(1.12, .92); }
	}
	@keyframes pep-bg-drift-sage {
		0%, 100% { transform: translate3d(8%, -5%, 0) rotate(16deg) scale(1.14, .78); }
		38% { transform: translate3d(29%, -27%, 0) rotate(-16deg) scale(.91, 1.06); }
		72% { transform: translate3d(-1%, -15%, 0) rotate(31deg) scale(1.04, .90); }
	}
	@keyframes pep-bg-drift-light {
		0%, 100% { transform: translate3d(5%, 8%, 0) rotate(-12deg) scale(.93, 1.05); }
		50% { transform: translate3d(-17%, 18%, 0) rotate(17deg) scale(1.10, .82); }
	}
}

/* Uses the existing footer typography, without changing its other links. */
button.pep-bg-motion-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.6;
	cursor: pointer;
	white-space: nowrap;
}

.pep-bg-motion-toggle::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f47700;
}

.pep-bg-motion-toggle[data-paused="true"]::before {
	background: currentColor;
	opacity: .45;
}

.pep-bg-motion-toggle:focus-visible {
	outline: 2px solid #f47700;
	outline-offset: 5px;
}

.pep-bg-motion-toggle:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pep-bg-motion-toggle[hidden] {
	display: none;
}

.pep-bg-motion-controls {
	padding-block: 16px;
	font-size: 12px;
}

@media (max-width: 820px) {
	.pep-bg-motion-layer > .pep-bg-motion-shape {
		width: 420px;
	}
	.pep-bg-motion-layer > .pep-bg-motion-shape--amber {
		top: -5%;
		right: -240px;
	}
	.pep-bg-motion-layer > .pep-bg-motion-shape--sage {
		bottom: -100px;
		left: -240px;
	}
	.pep-bg-motion-layer > .pep-bg-motion-shape--light {
		display: none;
	}
	.footer-bottom > .pep-bg-motion-toggle {
		white-space: normal;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pep-bg-motion-layer > .pep-bg-motion-shape {
		animation: none;
	}
}

@media print {
	.pep-bg-motion-host > .pep-bg-motion-layer,
	.pep-bg-motion-toggle {
		display: none;
	}
}