/* --------------------------------------------------------------------------
 * GRZ Gaming — source homepage merchandising + spatial banner atmosphere
 *
 * The visible banner stays sharp and colour-accurate. A separate, softly
 * masked copy of the active artwork supplies texture near the top while a
 * three-zone palette extends the artwork's real left, centre and right colours
 * through the rest of the storefront. This avoids stretching one image across
 * the full document and avoids the grey/muddy wash that produced.
 * ----------------------------------------------------------------------- */

@property --grz-home-palette-left {
	syntax: "<color>";
	inherits: true;
	initial-value: #f19a2d;
}

@property --grz-home-palette-center {
	syntax: "<color>";
	inherits: true;
	initial-value: #6f8fb6;
}

@property --grz-home-palette-right {
	syntax: "<color>";
	inherits: true;
	initial-value: #173654;
}

@property --grz-home-palette-deep {
	syntax: "<color>";
	inherits: true;
	initial-value: #0b1c35;
}

:root {
	transition:
		--grz-home-palette-left 620ms ease,
		--grz-home-palette-center 620ms ease,
		--grz-home-palette-right 620ms ease,
		--grz-home-palette-deep 620ms ease;
}

body.home {
	background: color-mix(in srgb, var(--grz-home-palette-center, #6f8fb6) 12%, var(--grz-home-atmo-canvas, #eef3f9));
}

body.home::before {
	top: 0;
	height: clamp(860px, 92vw, 1320px);
	min-height: 0;
	background-image: var(--grz-home-atmosphere-img, var(--grz-home-header-img, none));
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(42px) saturate(1.38) brightness(1.03) contrast(1.02);
	opacity: .46;
	transform: translateX(-50%) scale(1.055);
	transform-origin: 50% 0;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, .86) 63%, rgba(0, 0, 0, .48) 81%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, .86) 63%, rgba(0, 0, 0, .48) 81%, transparent 100%);
}

body.home::after {
	height: 100%;
	min-height: 100%;
	background-image:
		linear-gradient(180deg, rgba(238, 243, 249, .02) 0%, rgba(238, 243, 249, .1) 18%, rgba(238, 243, 249, .32) 37%, rgba(238, 243, 249, .62) 62%, rgba(238, 243, 249, .82) 82%, var(--grz-home-atmo-canvas, #eef3f9) 100%),
		radial-gradient(ellipse 72% 31% at 0% 7%, color-mix(in srgb, var(--grz-home-palette-left, #f19a2d) 76%, transparent), transparent 74%),
		radial-gradient(ellipse 66% 31% at 100% 8%, color-mix(in srgb, var(--grz-home-palette-right, #173654) 72%, transparent), transparent 75%),
		radial-gradient(ellipse 62% 25% at 50% 27%, color-mix(in srgb, var(--grz-home-palette-center, #6f8fb6) 48%, transparent), transparent 78%),
		radial-gradient(ellipse 76% 28% at 4% 55%, color-mix(in srgb, var(--grz-home-palette-left, #f19a2d) 31%, transparent), transparent 80%),
		radial-gradient(ellipse 78% 30% at 96% 66%, color-mix(in srgb, var(--grz-home-palette-right, #173654) 28%, transparent), transparent 81%),
		radial-gradient(ellipse 82% 25% at 46% 82%, color-mix(in srgb, var(--grz-home-palette-center, #6f8fb6) 23%, transparent), transparent 82%);
	background-position: center, center, center, center, center, center, center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-blend-mode: normal, screen, soft-light, soft-light, soft-light, soft-light, soft-light;
}

/* Use the same real smoke texture as the product atmosphere. It lives in its
 * own layer beneath all homepage modules, so the uploaded banner stays sharp
 * and colour-accurate instead of being dimmed by a texture overlay. */
body.home .grz-home.has-ambient::before {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 0;
	display: block !important;
	width: 100%;
	height: clamp(860px, 92vw, 1320px);
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: url("../images/product-atmosphere-smoke-v1.png") center top / cover no-repeat;
	content: "" !important;
	filter: contrast(1.04);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .66) 74%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, .66) 74%, transparent 100%);
	mix-blend-mode: soft-light;
	opacity: .46;
	pointer-events: none;
	transform: none;
}

/* Keep the uploaded banner itself pristine. Contrast is localized behind the
 * bottom-left caption instead of dimming every pixel in the image. */
body.home .grz-hero-slide.is-active .grz-hero-slide__image {
	filter: none !important;
	image-rendering: auto;
	opacity: 1 !important;
}

body.home .grz-hero-slide.is-active .grz-hero-slide__scrim {
	background:
		radial-gradient(ellipse 76% 56% at 0% 100%, rgba(3, 12, 26, .44), transparent 72%),
		linear-gradient(180deg, transparent 48%, rgba(3, 12, 26, .07) 68%, rgba(3, 12, 26, .42) 100%);
}

body.home .grz-primary-menu > li > a {
	border-radius: 8px;
	transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.home .grz-primary-menu > li > a:hover,
body.home .grz-primary-menu > li > a:focus-visible,
body.home .grz-primary-menu > li.current-menu-item > a,
body.home .grz-primary-menu > li.current-menu-ancestor > a {
	color: #fff;
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 7px 18px rgba(2, 10, 22, .1);
	text-decoration: none;
	transform: translateY(-1px);
}

body.home .grz-primary-menu > li > a::after {
	display: none;
	content: none;
}

/* The approved Featured Offers module is intentionally not a large card. */
body.home .grz-home-section--featured-offers {
	margin: 0;
	padding: 16px 22px;
}

body.home .grz-home-section--featured-offers > .grz-container {
	width: min(calc(100% - (2 * var(--grz-home-gutter, 22px))), var(--grz-container, var(--grz-shell-max, 1440px)));
	margin-inline: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.home .grz-home-section--featured-offers .grz-home-section__head {
	margin-bottom: 14px;
}

body.home .grz-home-section--featured-offers .grz-home-section__title {
	position: relative;
	padding-left: 14px;
	color: #101d33;
}

body.home .grz-home-section--featured-offers .grz-home-section__title::before {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 4px;
	border-radius: 999px;
	background: var(--grz-blue, #0762e6);
	content: "";
}

body.home .grz-home-section--featured-offers .grz-home-section__desc {
	color: #536783;
}

body.home .grz-home-section--featured-offers .grz-home-section__more--button {
	min-height: 38px;
	padding-inline: 18px;
	border-color: rgba(8, 20, 38, .9);
	background: #0b1627;
	color: #fff;
	box-shadow: 0 7px 18px rgba(5, 14, 28, .15);
}

body.home .grz-home-section--featured-offers .grz-home-section__more--button:hover,
body.home .grz-home-section--featured-offers .grz-home-section__more--button:focus-visible {
	border-color: #0762e6;
	background: #0762e6;
	color: #fff;
	transform: translateY(-1px);
}

body.home .grz-home-section--featured-offers .grz-fx-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

body.home .grz-home-section--featured-offers .grz-fx-card {
	min-width: 0;
	border: 1px solid rgba(203, 215, 231, .9);
	border-bottom: 3px solid var(--grz-blue, #0762e6);
	border-radius: 9px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 8px 18px rgba(16, 34, 58, .07);
}

@media (max-width: 760px) {
	body.home::before {
		height: clamp(720px, 168vw, 980px);
		filter: blur(32px) saturate(1.32) brightness(1.02) contrast(1.02);
		opacity: .44;
		transform: translateX(-50%) scale(1.07);
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .8) 62%, rgba(0, 0, 0, .38) 82%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .8) 62%, rgba(0, 0, 0, .38) 82%, transparent 100%);
	}

	body.home::after {
		background-image:
			linear-gradient(180deg, rgba(238, 243, 249, .03) 0%, rgba(238, 243, 249, .14) 19%, rgba(238, 243, 249, .38) 39%, rgba(238, 243, 249, .67) 65%, rgba(238, 243, 249, .84) 84%, var(--grz-home-atmo-canvas, #eef3f9) 100%),
			radial-gradient(ellipse 104% 29% at 0% 7%, color-mix(in srgb, var(--grz-home-palette-left, #f19a2d) 70%, transparent), transparent 76%),
			radial-gradient(ellipse 104% 30% at 100% 12%, color-mix(in srgb, var(--grz-home-palette-right, #173654) 64%, transparent), transparent 78%),
			radial-gradient(ellipse 100% 24% at 50% 29%, color-mix(in srgb, var(--grz-home-palette-center, #6f8fb6) 40%, transparent), transparent 80%),
			radial-gradient(ellipse 110% 28% at 4% 56%, color-mix(in srgb, var(--grz-home-palette-left, #f19a2d) 27%, transparent), transparent 82%),
			radial-gradient(ellipse 110% 28% at 98% 70%, color-mix(in srgb, var(--grz-home-palette-right, #173654) 24%, transparent), transparent 82%),
			radial-gradient(ellipse 110% 22% at 46% 84%, color-mix(in srgb, var(--grz-home-palette-center, #6f8fb6) 20%, transparent), transparent 84%);
	}

	body.home .grz-home.has-ambient::before {
		height: clamp(720px, 168vw, 980px);
		background-position: 43% top;
		opacity: .34;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .58) 70%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .58) 70%, transparent 100%);
	}

	body.home .grz-home-section--featured-offers {
		padding-inline: 16px;
	}

	body.home .grz-home-section--featured-offers > .grz-container {
		width: 100%;
	}
}

@media (max-width: 640px) {
	body.home .grz-home-section--featured-offers .grz-fx-grid {
		grid-template-columns: none;
	}
}

@media (forced-colors: active) {
	body.home .grz-home.has-ambient::before {
		display: none !important;
		content: none !important;
	}

	body.home .grz-home-section--featured-offers .grz-home-section__title::before {
		background: Highlight;
	}
}