/**
 * Bottom Fade — a frosted band across the foot of the viewport.
 *
 * Four stacked layers rather than one: each layer's backdrop includes the
 * layers painted before it, so the blur compounds towards the bottom edge and
 * ramps in smoothly instead of starting at full strength along a hard line.
 * Each mask picks up roughly where the previous one reached full opacity.
 *
 * Height and blur scale come from inline custom properties set by
 * SKBF_Plugin::render(). Mask stops are percentages of the height, so the ramp
 * rescales with it.
 */

.skbf {
	position: fixed;
	inset: auto 0 0 0;
	height: var(--skbf-height, clamp(80px, 15vh, 240px));
	/* Above page content, below every fixed widget on the site — see loader.php. */
	z-index: 5;
	pointer-events: none;
}

.skbf span {
	position: absolute;
	inset: 0;
	display: block;
}

.skbf span:nth-child(1) {
	-webkit-backdrop-filter: blur(calc(var(--skbf-scale, 1) * 2px));
	backdrop-filter: blur(calc(var(--skbf-scale, 1) * 2px));
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
}

.skbf span:nth-child(2) {
	-webkit-backdrop-filter: blur(calc(var(--skbf-scale, 1) * 5px));
	backdrop-filter: blur(calc(var(--skbf-scale, 1) * 5px));
	-webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 55%);
	mask-image: linear-gradient(to bottom, transparent 25%, #000 55%);
}

.skbf span:nth-child(3) {
	-webkit-backdrop-filter: blur(calc(var(--skbf-scale, 1) * 11px));
	backdrop-filter: blur(calc(var(--skbf-scale, 1) * 11px));
	-webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 80%);
	mask-image: linear-gradient(to bottom, transparent 50%, #000 80%);
}

.skbf span:nth-child(4) {
	-webkit-backdrop-filter: blur(calc(var(--skbf-scale, 1) * 22px));
	backdrop-filter: blur(calc(var(--skbf-scale, 1) * 22px));
	-webkit-mask-image: linear-gradient(to bottom, transparent 72%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 72%, #000 100%);
}

/* Nothing to fall back to — without backdrop-filter the layers are invisible
   rather than a grey slab across the page. */
@supports not (backdrop-filter: blur(1px)) {
	.skbf { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
	.skbf { display: none; }
}