/*
 * Reusable decorative background layers.
 * Place these inside a relatively positioned parent.
 */

.bg-decor-surface {
	position: relative;
	isolation: isolate;
}

.bg-decor-surface--clip {
	overflow: hidden;
}

.site-bg-decorations {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.bg-decoration {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	opacity: 0.18;
}

.bg-decoration--blob {
	width: var(--blob-size, 280px);
	height: var(--blob-size, 280px);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: blur(0.35px);
	transform: translate3d(0, 0, 0);
	animation: bg-float var(--blob-duration, 26s) ease-in-out infinite;
	animation-delay: var(--blob-delay, 0s);
}

.bg-decoration--blob-1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpath fill='%23111827' d='M290 62c40 36 73 95 70 155-4 60-43 119-99 153-55 33-128 41-184 11-56-31-94-98-84-165 10-67 68-134 136-159 68-26 122-31 161 5z'/%3E%3C/svg%3E");
}

.bg-decoration--blob-2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cpath fill='%23c8a24a' d='M306 76c31 26 53 63 58 103 4 41-10 85-38 121-28 36-70 63-117 74-47 11-98 5-137-23-39-28-66-78-57-124 9-46 55-87 100-117 45-30 89-50 132-54 43-4 81 4 109 20z'/%3E%3C/svg%3E");
}

.bg-decoration--blob-3 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 380'%3E%3Cpath fill='%231d4ed8' d='M273 52c34 22 55 63 56 107 1 44-17 90-49 121-31 31-76 47-123 53-46 6-93 1-126-25-33-26-52-73-43-113 9-40 46-73 84-97 38-24 77-39 114-43 38-4 72 3 87 10z'/%3E%3C/svg%3E");
}

.bg-decoration--lines {
	width: var(--lines-width, 320px);
	height: var(--lines-height, 220px);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(17, 24, 39, 0.12) 0 1px,
		transparent 1px 16px
	);
	background-size: cover;
	opacity: 0.18;
}

.bg-decoration--circle {
	width: var(--circle-size, 14px);
	height: var(--circle-size, 14px);
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(17, 24, 39, 0.65));
	box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08);
	animation: bg-circle-float var(--circle-duration, 18s) ease-in-out infinite;
	animation-delay: var(--circle-delay, 0s);
}

.bg-decoration--circle-soft {
	background: radial-gradient(circle at 30% 30%, rgba(200, 162, 74, 0.85), rgba(200, 162, 74, 0.1));
}

.bg-decoration--circle-dark {
	background: radial-gradient(circle at 30% 30%, rgba(17, 24, 39, 0.75), rgba(17, 24, 39, 0.12));
}

@keyframes bg-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(0, -14px, 0) scale(1.02);
	}
}

@keyframes bg-circle-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, -8px, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg-decoration--blob,
	.bg-decoration--circle {
		animation: none;
	}
}