/* Ademende hero-gradient: één gedeelde laag achter de inhoud van elke hero met gradient.
   De hero zet alleen --hero-gradient (transparant aan het eind) en --hero-gradient-origin;
   de beweging komt overal uit de variabelen hieronder. Alleen transform/opacity (compositor).
   Start pas na de LCP (hero-gradient.js). */
:root {
	--hero-gradient-scale: 1.35;
	--hero-gradient-opacity: .45;
	--hero-gradient-grow-duration: 14s;
	--hero-gradient-fade-duration: 9s;
}

.flex-layout:has(> .hero-gradient) {
	isolation: isolate;
}

/* Zonder :has() (oudere browsers) isoleren we alle heroes, anders valt de laag achter de pagina-achtergrond. */
@supports not selector(:has(a)) {

	.flex-layout[data-hero] {
		isolation: isolate;
	}
}

.flex-layout > .hero-gradient {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--primary-100);
}

.flex-layout > .hero-gradient::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--hero-gradient);
	transform-origin: var(--hero-gradient-origin, 50% 100%);
}

.flex-layout.is-breathing > .hero-gradient::before {
	will-change: transform, opacity;
	animation: hero-gradient-grow var(--hero-gradient-grow-duration) ease-in-out infinite alternate, hero-gradient-fade var(--hero-gradient-fade-duration) ease-in-out infinite alternate;
}

.flex-layout.is-breathing.is-paused > .hero-gradient::before {
	animation-play-state: paused;
}

@keyframes hero-gradient-grow {
	to {
		transform: scale(var(--hero-gradient-scale));
	}
}

@keyframes hero-gradient-fade {
	to {
		opacity: var(--hero-gradient-opacity);
	}
}

@media (prefers-reduced-motion: reduce) {

	.flex-layout.is-breathing > .hero-gradient::before {
		animation: none;
		will-change: auto;
	}
}