/**
 * Scroll effects: reveal-on-scroll, parallax and a header that reacts to
 * scrolling. Pairs with assets/scroll.js.
 */

/* Reveal on scroll ------------------------------------------------------- */
/* Without JavaScript the JS never adds .is-visible, so keep the elements
   visible by default and only hide them when JS is available. */
.js .waf-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.js .waf-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Parallax --------------------------------------------------------------- */
.waf-section--parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Header that reacts to scrolling ---------------------------------------- */
.site-header {
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.waf-scrolled {
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
}

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.waf-reveal,
	.js .waf-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.waf-section--parallax {
		background-attachment: scroll;
	}
}