/*
 * Premium homepage hero treatment for Generators Israel.
 * The photo stays below the headline zone and is separated from the content
 * so its opacity and crop can be controlled independently.
 */

html body.home.gi-open-hero-enabled section.gi-hero,
html body.gi-open-hero-enabled section.gi-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #080706 !important;
}

/* The theme video sits above a normal section background, so disable it. */
html body.gi-open-hero-enabled section.gi-hero .gi-hero-video-wrap {
	display: none !important;
}

/* Dedicated photographic layer: small, low and centered. */
html body.gi-open-hero-enabled section.gi-hero::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none;
	background-image: url('../images/open-generator-hero-3d-v5.webp') !important;
	background-repeat: no-repeat !important;
	background-position: 50% 100% !important;
	background-size: cover !important;
	opacity: .95 !important;
	filter: saturate(.94) contrast(1.04);
	transform: translate3d(var(--gi-hero-depth-x, 0), var(--gi-hero-depth-y, 0), 0) scale(1.045);
	transform-origin: 50% 55%;
	transition: transform 160ms ease-out;
	will-change: transform;
}

/* Protect the lead form and headline without burying the product. */
html body.home.gi-open-hero-enabled section.gi-hero > .gi-hero-overlay,
html body.gi-open-hero-enabled section.gi-hero > .gi-hero-overlay {
	display: block !important;
	z-index: 1 !important;
	opacity: 1 !important;
	background:
		linear-gradient(90deg, rgba(2, 2, 2, .30) 0%, rgba(2, 2, 2, .04) 48%, rgba(2, 2, 2, .32) 100%),
		linear-gradient(180deg, rgba(2, 2, 2, .08) 0%, rgba(2, 2, 2, .02) 56%, rgba(2, 2, 2, .34) 100%) !important;
}

html body.gi-open-hero-enabled section.gi-hero > .container {
	position: relative;
	z-index: 2;
}

html body.gi-open-hero-enabled section.gi-hero .gi-hero-content,
html body.gi-open-hero-enabled section.gi-hero .gi-hero-copy {
	text-shadow: 0 3px 24px rgba(0, 0, 0, .68);
}

html body.gi-open-hero-enabled section.gi-hero .gi-lead-form,
html body.gi-open-hero-enabled section.gi-hero .gi-hero-form,
html body.gi-open-hero-enabled section.gi-hero form {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (max-width: 820px) {
	html body.home.gi-open-hero-enabled section.gi-hero,
	html body.gi-open-hero-enabled section.gi-hero {
		background:
			radial-gradient(ellipse at 28% 72%, rgba(207, 157, 48, .14), transparent 38%),
			radial-gradient(ellipse at 72% 88%, rgba(125, 82, 30, .13), transparent 42%),
			linear-gradient(180deg, #0c0906 0%, #17110b 58%, #0d0b08 100%) !important;
	}

	html body.gi-open-hero-enabled section.gi-hero::before {
		background-image: url('../images/open-generator-hero-3d-mobile-v6.webp') !important;
		background-position: 50% 50% !important;
		background-size: auto 100% !important;
		opacity: .92 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	html body.home.gi-open-hero-enabled section.gi-hero > .gi-hero-overlay,
	html body.gi-open-hero-enabled section.gi-hero > .gi-hero-overlay {
		background:
			linear-gradient(180deg, rgba(2, 2, 2, .20) 0%, rgba(2, 2, 2, .10) 36%, rgba(2, 2, 2, .24) 68%, rgba(2, 2, 2, .38) 100%),
			linear-gradient(90deg, rgba(2, 2, 2, .24), rgba(2, 2, 2, .04) 50%, rgba(2, 2, 2, .24)) !important;
	}
}

@media (max-width: 520px) {
	html body.gi-open-hero-enabled section.gi-hero::before {
		background-position: 50% 50% !important;
		background-size: auto 100% !important;
		opacity: .90 !important;
	}

	html body.home.gi-open-hero-enabled section.gi-hero > .gi-hero-overlay,
	html body.gi-open-hero-enabled section.gi-hero > .gi-hero-overlay {
		background:
			linear-gradient(180deg, rgba(2, 2, 2, .22) 0%, rgba(2, 2, 2, .10) 34%, rgba(2, 2, 2, .26) 70%, rgba(2, 2, 2, .40) 100%),
			linear-gradient(90deg, rgba(2, 2, 2, .22), rgba(2, 2, 2, .03) 50%, rgba(2, 2, 2, .22)) !important;
	}

	html body.gi-open-hero-enabled section.gi-hero .gi-lead-form,
	html body.gi-open-hero-enabled section.gi-hero .gi-hero-form,
	html body.gi-open-hero-enabled section.gi-hero form {
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
}

@media (prefers-reduced-transparency: reduce) {
	html body.gi-open-hero-enabled section.gi-hero .gi-lead-form,
	html body.gi-open-hero-enabled section.gi-hero .gi-hero-form,
	html body.gi-open-hero-enabled section.gi-hero form {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.gi-open-hero-enabled section.gi-hero::before {
		transform: none !important;
		transition: none !important;
	}
}