/* --------------------------------------------------------------------------
 * GRZ Gaming — seamless product atmosphere (v1.8.3)
 *
 * Every atmosphere layer now shares one top edge, one height and one soft
 * alpha curve. The final color field is not masked: it reaches the exact page
 * canvas color before its box ends, which prevents a visible lower boundary.
 * ----------------------------------------------------------------------- */

body.single-product.grz-product-immersive {
	--grz-atmo-layer-top: calc(-1 * (var(--grz-atmo-header-height) + min(9vw, 112px)));
	--grz-atmo-layer-height: calc(var(--grz-atmo-height, 860px) + var(--grz-atmo-header-height) + var(--grz-atmo-fade, 360px));
	--grz-atmo-soft-mask: linear-gradient(
		180deg,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, .99) 22%,
		rgba(0, 0, 0, .94) 38%,
		rgba(0, 0, 0, .82) 52%,
		rgba(0, 0, 0, .64) 65%,
		rgba(0, 0, 0, .43) 76%,
		rgba(0, 0, 0, .23) 86%,
		rgba(0, 0, 0, .08) 94%,
		transparent 100%
	);
}

body.single-product.grz-product-immersive .grz-woo-main::before,
body.single-product.grz-product-immersive .grz-woo-main::after,
body.single-product.grz-product-immersive .grz-tp-shell::before,
body.single-product.grz-product-immersive .grz-tp-shell::after {
	top: var(--grz-atmo-layer-top);
	height: var(--grz-atmo-layer-height);
}

body.single-product.grz-product-immersive .grz-woo-main::before,
body.single-product.grz-product-immersive .grz-woo-main::after,
body.single-product.grz-product-immersive .grz-tp-shell::before,
body.single-product.grz-product-immersive .grz-tp-shell::after {
	-webkit-mask-image: var(--grz-atmo-soft-mask);
	mask-image: var(--grz-atmo-soft-mask);
}

/* The color field uses the same alpha curve as the image and texture. Its own
 * vertical gradient also approaches the exact canvas color, so the shared
 * mask reveals an indistinguishable canvas instead of ending as a hard band. */
body.single-product.grz-product-immersive .grz-woo-main::after {
	background:
		radial-gradient(ellipse 54% 58% at 3% 5%, rgba(var(--grz-atmo-accent-rgb, 244, 154, 44), 1), transparent 69%),
		radial-gradient(ellipse 36% 33% at 5% -2%, rgba(255, 246, 220, .18), transparent 72%),
		radial-gradient(ellipse 76% 63% at 96% 4%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .94), transparent 75%),
		linear-gradient(90deg, rgba(var(--grz-atmo-accent-rgb, 244, 154, 44), .48) 0%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .52) 52%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .86) 100%),
		linear-gradient(
			180deg,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .04) 0%,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .11) 28%,
			rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .18) 42%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .22) 54%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .46) 66%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .7) 77%,
			rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .9) 88%,
			var(--grz-atmo-canvas, #f4f7fb) 100%
		);
}

@media (max-width: 720px) {
	body.single-product.grz-product-immersive {
		--grz-atmo-layer-top: calc(-1 * (var(--grz-atmo-header-height) + 54px));
		--grz-atmo-layer-height: calc(var(--grz-atmo-mobile-height, 560px) + var(--grz-atmo-header-height) + clamp(280px, var(--grz-atmo-fade, 360px), 480px));
		--grz-atmo-soft-mask: linear-gradient(
			180deg,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, .98) 24%,
			rgba(0, 0, 0, .9) 42%,
			rgba(0, 0, 0, .7) 59%,
			rgba(0, 0, 0, .43) 75%,
			rgba(0, 0, 0, .18) 88%,
			transparent 100%
		);
	}

	body.single-product.grz-product-immersive .grz-woo-main::after {
		background:
			radial-gradient(ellipse 78% 46% at 1% 3%, rgba(var(--grz-atmo-accent-rgb, 244, 154, 44), .82), transparent 70%),
			radial-gradient(ellipse 88% 58% at 98% 4%, rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .9), transparent 78%),
			linear-gradient(
				180deg,
				rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .12) 0%,
				rgba(var(--grz-atmo-deep-rgb, 11, 28, 53), .24) 34%,
				rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .32) 53%,
				rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .66) 72%,
				rgba(var(--grz-atmo-canvas-rgb, 244, 247, 251), .9) 88%,
				var(--grz-atmo-canvas, #f4f7fb) 100%
			);
	}
}