/* Webbler — Header on scroll (container extension) */

.wel-scroll-header-yes {
	--wel-scroll-ms: 320ms;
	transition:
		background-color var(--wel-scroll-ms) ease,
		box-shadow var(--wel-scroll-ms) ease,
		padding var(--wel-scroll-ms) ease,
		-webkit-backdrop-filter var(--wel-scroll-ms) ease,
		backdrop-filter var(--wel-scroll-ms) ease;
}

/* The moment the header switches to its scrolled look */
.wel-scroll-header-yes.wel-scroll-entering {
	transition: none;
}

.wel-scroll-reveal-fade.wel-scroll-entering {
	animation: wel-scroll-fade var(--wel-scroll-ms) ease-out both;
}

.wel-scroll-reveal-slide.wel-scroll-entering {
	animation: wel-scroll-slide var(--wel-scroll-ms) ease-out both;
}

@keyframes wel-scroll-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes wel-scroll-slide {
	from { opacity: 0; translate: 0 -24px; }
	to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wel-scroll-header-yes,
	.wel-scroll-header-yes * {
		transition-duration: 0ms !important;
	}

	.wel-scroll-header-yes.wel-scroll-entering {
		animation: none !important;
	}
}