/**
 * Motion.
 *
 * @package Bamboo Theme
 */

/* HEADER
   It scrolls away with the page. Scrolling back up slides it in from the top
   as a pinned bar; scrolling down slides it away again. motion.js sets the
   transform; the white panel behind it runs edge to edge past the body padding. */

body > header {
	position: sticky;
	top: 0;
	z-index: 15;
	will-change: transform;
}

body > header::before {
	content: "";
	position: absolute;
	inset: 0 calc(var(--padding) * -1);
	z-index: -1;
	background-color: var(--color-page);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 0.75rem 2rem rgba(16, 24, 40, 0);
	transition: box-shadow 0.3s ease;
}

body > header.is-pinned::before {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 0.75rem 2rem rgba(16, 24, 40, 0.08);
}

body > header.is-animating {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* REVEAL
   Content fades up as it scrolls into view. Targets are blocks that read as one
   piece: text, buttons, images, cards, carousel slides, the accordion and form.
   Anything inside a card or slide moves with it rather than on its own.
   Keep this list in step with TARGETS in motion.js. */

html.js-motion main :is(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-image, .wp-block-separator, .wp-block-column.has-background, .wp-block-media-text, .wp-block-yoast-faq-block, .wpcf7, .carousel > * > *, .slider > * > *, .blog-card):not(:is(.wp-block-column.has-background, .wp-block-media-text, .wp-block-yoast-faq-block, .wpcf7, .carousel > * > *, .slider > * > *, .how-we-work, .carousel-nav, .slider-nav, .blog-card) *):not(.how-we-work > *):not(:empty):not(.is-inview) {
	opacity: 0;
	transform: translate3d(0, 1.5rem, 0);
}

html.js-motion main .is-inview:not(.is-revealed) {
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

/* Images and cards travel a little further and settle a little slower. The
   same exclusions as above, so a photo inside a card or slide moves with it. */
html.js-motion main :is(.wp-block-image, .wp-block-column.has-background, .carousel > * > *, .slider > * > *, .blog-card):not(:is(.carousel-nav, .slider-nav) > *):not(:is(.wp-block-column.has-background, .wp-block-media-text, .wp-block-yoast-faq-block, .wpcf7, .carousel > * > *, .slider > * > *, .how-we-work, .carousel-nav, .slider-nav, .blog-card) *):not(.how-we-work > *):not(.is-inview) {
	transform: translate3d(0, 2.5rem, 0) scale(0.98);
}

html.js-motion main :is(.wp-block-image, .wp-block-column.has-background, .carousel > * > *, .slider > * > *, .blog-card):not(:is(.carousel-nav, .slider-nav) > *):not(:is(.wp-block-column.has-background, .wp-block-media-text, .wp-block-yoast-faq-block, .wpcf7, .carousel > * > *, .slider > * > *, .how-we-work, .carousel-nav, .slider-nav, .blog-card) *):not(.how-we-work > *).is-inview:not(.is-revealed) {
	transition:
		opacity 1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}

/* The arrow buttons sit inside the carousel like the slides do; keep their bar
   from clipping them. */
.carousel > .carousel-nav,
.slider > .slider-nav {
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	body > header {
		transform: none !important;
	}
}