/* Cora Ambient Backgrounds — v1.0.1
 * Any element with .has-ambient-bg gets a layer of slow, blurred colour fields behind its content.
 * Configure with CSS custom properties (set by the block panel, or by hand):
 *   --amb-c1 / --amb-c2 / --amb-c3   colours
 *   --amb-blur                       blur radius (px)
 *   --amb-opacity                    0–1
 *   --amb-speed                      duration multiplier (1 = default, 2 = half speed)
 *   --amb-scale                      blob size multiplier
 * and data attributes:
 *   data-ambient="corners|diagonal|center|top|bottom"   layout
 *   data-ambient-motion="on|off"  data-ambient-grain="on|off"  data-ambient-grid="on|off"
 */

.has-ambient-bg {
	--amb-c1: #faf8d8;
	--amb-c2: #ff714f;
	--amb-c3: #fee9d8;
	--amb-blur: 120px;
	--amb-opacity: 0.75;
	--amb-speed: 1;
	--amb-scale: 1;
	--amb-grid-color: rgba(55, 53, 57, 0.055);
	--amb-grid-size: 64px;
	position: relative;
	isolation: isolate;
}

.has-ambient-bg > .amb-layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	border-radius: inherit;
	contain: strict;
}

/* Cover blocks paint their own background layer; sit above it, below the content. */
.wp-block-cover.has-ambient-bg > .amb-layer { z-index: 1; }
.wp-block-cover.has-ambient-bg > .wp-block-cover__inner-container { z-index: 2; }

.amb-blob {
	position: absolute;
	display: block;
	width: calc(max(380px, 62%) * var(--amb-scale));
	aspect-ratio: 1.3 / 1;
	opacity: var(--amb-opacity);
	filter: blur(var(--amb-blur));
	will-change: transform;
	transform: translate3d(0, 0, 0);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.amb-b1 {
	background: var(--amb-c1);
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	animation-name: amb-drift-a;
	animation-duration: calc(14s * var(--amb-speed));
}

.amb-b2 {
	background: var(--amb-c2);
	border-radius: 61% 39% 45% 55% / 52% 63% 37% 48%;
	animation-name: amb-drift-b;
	animation-duration: calc(17s * var(--amb-speed));
	animation-delay: calc(-5s * var(--amb-speed));
}

.amb-b3 {
	background: var(--amb-c3);
	border-radius: 37% 63% 51% 49% / 58% 39% 61% 42%;
	animation-name: amb-drift-c;
	animation-duration: calc(21s * var(--amb-speed));
	animation-delay: calc(-9s * var(--amb-speed));
}

/* ---- Layouts ---------------------------------------------------------- */
/* corners (default): cream top-left, accent bottom-right, soft bottom-left */
.amb-b1 { left: -12%; top: -62%; }
.amb-b2 { right: -34%; bottom: -58%; }
.amb-b3 { left: -32%; bottom: -74%; }

[data-ambient="diagonal"] > .amb-layer .amb-b1 { left: -18%; top: -40%; }
[data-ambient="diagonal"] > .amb-layer .amb-b2 { right: -18%; bottom: -40%; left: auto; top: auto; }
[data-ambient="diagonal"] > .amb-layer .amb-b3 { left: 30%; top: 20%; bottom: auto; width: calc(max(260px, 38%) * var(--amb-scale)); }

[data-ambient="center"] > .amb-layer .amb-b1 { left: 8%; top: 5%; }
[data-ambient="center"] > .amb-layer .amb-b2 { left: 34%; top: 22%; right: auto; bottom: auto; }
[data-ambient="center"] > .amb-layer .amb-b3 { left: 20%; top: 40%; bottom: auto; }

[data-ambient="top"] > .amb-layer .amb-b1 { left: -20%; top: -70%; }
[data-ambient="top"] > .amb-layer .amb-b2 { right: -20%; top: -75%; bottom: auto; }
[data-ambient="top"] > .amb-layer .amb-b3 { left: 25%; top: -85%; bottom: auto; }

[data-ambient="bottom"] > .amb-layer .amb-b1 { left: -20%; bottom: -70%; top: auto; }
[data-ambient="bottom"] > .amb-layer .amb-b2 { right: -20%; bottom: -60%; }
[data-ambient="bottom"] > .amb-layer .amb-b3 { left: 25%; bottom: -85%; }

/* ---- Motion: transform-only, so the blurred layers stay on the compositor ---- */
@keyframes amb-drift-a {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50%  { transform: translate3d(18%, 24%, 0) rotate(40deg) scale(1.22, 0.88); }
	100% { transform: translate3d(32%, 8%, 0) rotate(80deg) scale(0.9, 1.16); }
}
@keyframes amb-drift-b {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50%  { transform: translate3d(-22%, -20%, 0) rotate(-45deg) scale(0.86, 1.22); }
	100% { transform: translate3d(-10%, -32%, 0) rotate(-90deg) scale(1.16, 0.9); }
}
@keyframes amb-drift-c {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
	50%  { transform: translate3d(26%, -16%, 0) rotate(32deg) scale(1.22, 0.96); }
	100% { transform: translate3d(12%, -30%, 0) rotate(64deg) scale(0.88, 1.2); }
}

[data-ambient-motion="off"] > .amb-layer .amb-blob,
[data-ambient-paused] > .amb-layer .amb-blob { animation-play-state: paused; }
[data-ambient-motion="off"] > .amb-layer .amb-blob { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.amb-blob { animation: none !important; }
}

/* ---- Texture ----------------------------------------------------------- */
.amb-grain,
.amb-grid {
	position: absolute;
	inset: 0;
	display: none;
}

[data-ambient-grain="on"] > .amb-layer .amb-grain {
	display: block;
	opacity: 0.28;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .2  0 0 0 0 .2  .9 0 0 0 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

[data-ambient-grid="on"] > .amb-layer .amb-grid {
	display: block;
	background-image:
		linear-gradient(to right, var(--amb-grid-color) 1px, transparent 1px),
		linear-gradient(to bottom, var(--amb-grid-color) 1px, transparent 1px);
	background-size: var(--amb-grid-size) var(--amb-grid-size);
	background-position: center top;
}

/* Dark backgrounds: lighter grid lines. Add .is-ambient-dark or rely on the preset. */
.is-ambient-dark.has-ambient-bg { --amb-grid-color: rgba(255, 255, 255, 0.08); }

/* Small screens: smaller, faster-to-paint blur */
@media (max-width: 781px) {
	.has-ambient-bg { --amb-blur-mobile: calc(var(--amb-blur) * 0.6); }
	.amb-blob { filter: blur(var(--amb-blur-mobile, 72px)); width: calc(max(300px, 90%) * var(--amb-scale)); }
}