/**
 * WM Blaadjes
 *
 * Add the class "wm-leaf-host" to a Cornerstone section to turn it into a
 * stage for floating leaves. The layer itself is created by leaves.js.
 */

/* The section becomes the stage for the leaves. */
.wm-leaf-host {
	position: relative;
}

/**
 * Leaf layer: above the section background, below all content. This box is the
 * band the leaves are scattered in, not the whole section.
 *
 * --wm-leaf-top    how far above the section the band starts. Defaults to the
 *                  overhang leaves.js measures, so a card pulled up out of the
 *                  section with a negative margin is included automatically.
 * --wm-leaf-shift  moves the whole band down from there, keeping the measured
 *                  overhang intact. Negative values move it up.
 * --wm-leaf-height how tall the band is, capped at the section height. Can
 *                  also be set per section with a data-wm-leaves-height
 *                  attribute, which leaves.js applies as an inline style.
 *
 * Clipping happens here and not on the section itself: Cornerstone gives every
 * section its own generated class whose rules outrank ours, so an overflow set
 * on the host is not reliable.
 */
.wm-leaf-host > .wm-leaf-layer {
	position: absolute;
	top: calc(
		var(--wm-leaf-top, var(--wm-leaf-overhang, 0px)) + var(--wm-leaf-shift, 0px)
	);
	right: 0;
	left: 0;
	height: min(var(--wm-leaf-height, 100%), 100%);
	z-index: 1;
	overflow: hidden; /* fallback for browsers without overflow: clip */
	pointer-events: none; /* never block links or buttons */
}

/**
 * Clip sideways only, so no horizontal page scroll, while leaves may still
 * drift past the top and bottom of the band instead of being cut off in a
 * straight line halfway the section.
 */
@supports (overflow: clip) {
	.wm-leaf-host > .wm-leaf-layer {
		overflow-x: clip;
		overflow-y: visible;
	}
}

/* Keep Cornerstone's own containers above the leaf layer. */
.wm-leaf-host > .x-container,
.wm-leaf-host > .x-row,
.wm-leaf-host > .x-grid,
.wm-leaf-host > .x-bar-container {
	position: relative;
	z-index: 2;
}

.wm-leaf {
	position: absolute;
	width: var(--wm-leaf-size, 150px);
	height: calc(var(--wm-leaf-size, 150px) * 1.87);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(var(--wm-leaf-blur, 0px));
	animation: wm-leaf-drift var(--wm-leaf-dur, 12s) ease-in-out var(--wm-leaf-delay, 0s) infinite alternate;
	will-change: transform;
}

/* Only transform is animated, so this stays on the compositor. */
@keyframes wm-leaf-drift {
	from {
		transform: translate3d(0, 0, 0)
			rotate(var(--wm-leaf-rot, 0deg))
			scaleX(var(--wm-leaf-flip, 1));
	}
	to {
		transform: translate3d(var(--wm-leaf-dx, 20px), var(--wm-leaf-dy, -30px), 0)
			rotate(calc(var(--wm-leaf-rot, 0deg) + var(--wm-leaf-spin, 8deg)))
			scaleX(var(--wm-leaf-flip, 1))
			scale(var(--wm-leaf-scale, 1.05));
	}
}

/* Paused by the IntersectionObserver while the section is off-screen. */
.wm-leaf-layer.is-paused .wm-leaf {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.wm-leaf {
		animation: none;
	}
}

@media (max-width: 767px) {
	.wm-leaf-layer {
		display: none;
	}
}