/* ------------------------------------------------------------------ *
 * Reusable atmospheric decoration: SVG grain + three soft warm circles.
 * Lifted from the ispy.test/auth/login DOM (same geometry / opacities),
 * retoned to the warm palette so circles read as gentle highlights, not
 * a foreign accent.
 *
 * Two placement modes:
 *   .mcs-decor-bg            position:absolute — sits inside a parent
 *                            (e.g. .mcs-cat-hero) that is position:relative
 *                            and overflow:hidden.
 *   .mcs-decor-bg--fixed     position:fixed; inset:0; z-index:-1; — used as
 *                            a body-level background on hub pages
 *                            (/learn/, /crochet-patterns/, /discover/,
 *                            /shop/, /social/) emitted via mcs-decor-bg.php.
 *
 * Seasonal layers (snow, hearts, petals, etc.) are injected as child
 * elements by mcs-seasons.php via the `mcs_decor_bg_extra_layers` filter;
 * their per-season animation lives in seasons.css.
 * ------------------------------------------------------------------ */

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

/* Body-level variant: a 520px-tall band that sits at the top of the body
 * and contains the decoration. Using position:absolute (not fixed) means
 * the decoration scrolls away with the hero band, mirroring the in-hero
 * use on archive pages. z-index:0 with the page's transparent cream block
 * above (and the body's cream bg below) is what makes the circles visible. */
.mcs-decor-bg--fixed {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 520px;
	z-index: 0;
}

.mcs-decor-bg__grain {
	position: absolute;
	inset: 0;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mcs-decor-bg__circle {
	position: absolute;
	border-radius: 50%;
}

.mcs-decor-bg__circle--lg {
	width: 420px;
	height: 420px;
	top: -140px;
	right: -100px;
	background: color-mix(in srgb, var(--global-palette1) 6%, transparent);
}

.mcs-decor-bg__circle--md {
	width: 240px;
	height: 240px;
	bottom: -80px;
	left: 6%;
	background: color-mix(in srgb, var(--global-palette1) 4%, transparent);
}

.mcs-decor-bg__circle--sm {
	width: 100px;
	height: 100px;
	top: 58%;
	right: 32%;
	background: color-mix(in srgb, var(--global-palette1) 5%, transparent);
}

/* Body-level (fixed) variant: anchor the small circle to viewport so it
 * doesn't disappear off the bottom on tall pages, and bump the circle
 * opacities a touch since they're sitting on flat cream (not over a hero
 * photo) — the in-hero settings would read too faint here. */
.mcs-decor-bg--fixed .mcs-decor-bg__circle--sm {
	top: 60vh;
}

.mcs-decor-bg--fixed .mcs-decor-bg__circle--lg {
	background: color-mix(in srgb, var(--global-palette1) 14%, transparent);
}
.mcs-decor-bg--fixed .mcs-decor-bg__circle--md {
	background: color-mix(in srgb, var(--global-palette1) 10%, transparent);
}
.mcs-decor-bg--fixed .mcs-decor-bg__circle--sm {
	background: color-mix(in srgb, var(--global-palette1) 12%, transparent);
}

/* Hub pages: make the cream hero Group block at the top of the page
 * transparent so the fixed decor (which sits between body bg and page
 * content) reveals its circles through it. The body bg is already
 * --global-palette8 cream from Kadence's customizer, so the visual cream
 * fill stays exactly the same — circles + grain just become visible on top.
 *
 * Two selectors because hub pages aren't authored consistently: /learn/,
 * /discover/, /crochet-patterns/ use Kadence's palette swatch ("Palette 8")
 * which emits .has-palette-8-background-color. /shop/ and /social/ use a
 * direct hex color in the block colour picker, which emits no palette
 * class and an inline style. Targeting the inline style by attribute-
 * substring catches the cream hex/rgb in either form. */
body.has-decor-bg .wp-block-group.has-palette-8-background-color,
body.has-decor-bg .wp-block-group.alignfull.has-background[style*="fbf5ef"],
body.has-decor-bg .wp-block-group.alignfull.has-background[style*="FBF5EF"],
body.has-decor-bg .wp-block-group.alignfull.has-background[style*="251, 245, 239"] {
	background-color: transparent !important;
}

@media (max-width: 600px) {
	.mcs-decor-bg__circle--lg {
		width: 260px;
		height: 260px;
		top: -90px;
		right: -80px;
	}
	.mcs-decor-bg__circle--md {
		width: 160px;
		height: 160px;
		bottom: -60px;
	}
	.mcs-decor-bg__circle--sm {
		width: 70px;
		height: 70px;
	}
}