/**
 * Motion: scroll reveal, hero fade, hide-on-scroll header.
 *
 * Loaded on the front end only (never in the editor) and only acted on when
 * the visitor has not asked for reduced motion.
 *
 * Nothing here hides content unless JavaScript is running: the "sst-js"
 * class is added to <html> by a one-line script in the page head, and
 * assets/js/theme.js reveals the elements. Without JavaScript, or when
 * printing, every section is simply visible.
 */

@media (prefers-reduced-motion: no-preference) {

	/* Sections fade up as they scroll into view. */
	.sst-js .reveal-on-scroll {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.sst-js .reveal-on-scroll.is-visible,
	.sst-js.sst-reveal-all .reveal-on-scroll {
		opacity: 1;
		transform: none;
	}

	/* Header slides away while scrolling down and returns on scroll up. */
	.wp-site-blocks > header.wp-block-template-part {
		transition: transform 0.3s ease;
	}

	body.header-hidden .wp-site-blocks > header.wp-block-template-part:not(:focus-within) {
		transform: translateY(-100%);
	}

	/* Text beside a pinned column ("narrative-pin" on a Columns block). */
	.narrative-pin > .wp-block-column:first-child {
		position: sticky;
		top: var(--wp--custom--scroll-padding-top, 88px);
		align-self: flex-start;
	}
}

/* Hero content fades out as the page scrolls away from the top. Wide screens
   only: on phones the hero is taller than the screen, and fading it by scroll
   distance would hide its lower half before anyone reached it. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
	@supports (animation-timeline: scroll()) {
		.hero-content {
			animation: sst-hero-fade linear both;
			animation-timeline: scroll(root);
			animation-range: 20vh 80vh;
		}

		@keyframes sst-hero-fade {
			from { opacity: 1; transform: translateY(0); }
			to   { opacity: 0; transform: translateY(-40px); }
		}
	}
}

@media print {
	.reveal-on-scroll {
		opacity: 1 !important;
		transform: none !important;
	}
}