/*
 * FLAT: full-screen video hero (.f-hero-video), as on porsche.com.
 * The header floats over the video and stays transparent while the hero
 * sits at the top (body.f-over-hero, set by hero-video.js). Without the
 * script, the header keeps its solid ground.
 * Values come from the kit variables only (DESIGN.md).
 */
body:has(.f-hero-video) .elementor-location-header {
	position: fixed;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	inset-inline: 0;
	z-index: 50;
}

/* The ground becomes a layer, so it fades with opacity only. */
body:has(.f-hero-video) .elementor-location-header > .e-con {
	background-color: transparent;
	isolation: isolate;
}

body:has(.f-hero-video) .elementor-location-header > .e-con::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--f-bg);
	transition: opacity var(--dur-fast, 250ms) cubic-bezier(0.25, 0.1, 0.25, 1);
}

body.f-over-hero .elementor-location-header > .e-con::before {
	opacity: 0;
}

/* Neutral scrim: keeps the menu (top) and the headline (bottom) legible
   over a bright sky or road. The only gradient the house rules allow. */
.f-hero-video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, var(--f-scrim) 0%, transparent 24%),
		linear-gradient(to top, color-mix(in srgb, var(--f-bg) 85%, transparent) 0%, var(--f-scrim) 32%, transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
	body:has(.f-hero-video) .elementor-location-header > .e-con::before {
		transition: none;
	}
}