/*
 * UNOF Panorama: subtle motion. Front end only (not loaded in the editor).
 * Everything sits inside prefers-reduced-motion: no-preference, so anyone who has
 * asked their device for less motion gets none. Scroll reveals use CSS scroll-driven
 * animations; browsers without support simply show everything straight away.
 */
@media (prefers-reduced-motion: no-preference) {

	/* Hero: the photo settles and the text rises in, one line after another */
	.unof-hero { overflow: hidden; }
	.unof-hero > .wp-block-cover__image-background { animation: unof-settle 1.8s cubic-bezier(.2,.7,.2,1) both; }
	.unof-hero .wp-block-cover__inner-container > * > * { animation: unof-rise .8s cubic-bezier(.2,.7,.2,1) both; }
	.unof-hero .wp-block-cover__inner-container > * > :nth-child(1) { animation-delay: .1s; }
	.unof-hero .wp-block-cover__inner-container > * > :nth-child(2) { animation-delay: .2s; }
	.unof-hero .wp-block-cover__inner-container > * > :nth-child(3) { animation-delay: .32s; }
	.unof-hero .wp-block-cover__inner-container > * > :nth-child(4) { animation-delay: .44s; }
	.unof-hero .wp-block-cover__inner-container > * > :nth-child(5) { animation-delay: .56s; }

	/* The white sheet glides up over the photo */
	.unof-hero + .is-style-sheet { animation: unof-rise 1s .25s cubic-bezier(.2,.7,.2,1) both; }

	/* Scroll reveals: sections fade up gently as they come into view */
	@supports (animation-timeline: view()) {
		main :where(
			h2.wp-block-heading,
			.is-style-card, .is-style-card-highlight, .is-style-card-dark,
			.unof-step,
			.unof-split > .wp-block-column,
			.wp-block-columns.alignwide > .wp-block-column,
			.wp-block-post-template > li,
			.unof-trust,
			.wp-block-quote
		):not(.unof-hero *) {
			animation: unof-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		/* Photos ease out of a slight zoom as you scroll past */
		:where(.is-style-d-left, .is-style-d-right, .is-style-rounded, .unof-strip .wp-block-cover) > .wp-block-cover__image-background {
			animation: unof-zoom linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 60%;
		}
	}

	/* Hover details */
	.wp-block-button__link { transition: transform .2s ease, background-color .2s ease, filter .2s ease; }
	.wp-block-button__link:hover { transform: translateY(-2px); }
	.wp-block-button.is-style-service .wp-block-button__link:hover { transform: none; }
	.wp-block-button.is-style-service .wp-block-button__link::before,
	.wp-block-button.is-style-service .wp-block-button__link::after { transition: transform .25s ease; }
	.wp-block-button.is-style-service .wp-block-button__link:hover::before,
	.wp-block-button.is-style-service .wp-block-button__link:hover::after { transform: translateX(4px); }
	.unof-strip .wp-block-cover, .unof-project-card .wp-block-cover { overflow: hidden; }
	.unof-strip li:hover .wp-block-cover__image-background,
	.unof-project-card:hover .wp-block-cover__image-background { scale: 1.04; }
	.unof-strip .wp-block-cover__image-background,
	.unof-project-card .wp-block-cover__image-background { transition: scale .7s cubic-bezier(.2,.7,.2,1); }
}

@keyframes unof-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes unof-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes unof-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes unof-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }