@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root) {
	animation: ds-page-out var(--wp--custom--motion--page) ease-in-out both;
}

::view-transition-new(root) {
	animation: ds-page-in var(--wp--custom--motion--page) ease-in-out both;
}

.has-ds-motion [data-ds-motion="enter"] {
	opacity: 0;
	transform: translate3d(0, 0.75rem, 0);
	transition:
		opacity var(--wp--custom--motion--enter) ease-out,
		transform var(--wp--custom--motion--enter) ease-out;
	transition-delay: calc(var(--ds-stagger-index, 0) * var(--wp--custom--motion--stagger));
	will-change: opacity, transform;
}

.has-ds-motion [data-ds-motion="enter"].is-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

.has-ds-motion.is-arming-ds-motion [data-ds-motion] {
	animation: none;
	transition: none;
}

.has-ds-motion [data-ds-motion="emphasis"] {
	opacity: 0;
}

.has-ds-motion [data-ds-motion="emphasis"].is-inview {
	animation: ds-emphasis-in var(--wp--custom--motion--emphasis) linear both;
}

.has-ds-motion .ds-motion-header--motion-reveal .ds-motion-header__inner {
	opacity: 0;
	clip-path: inset(0 0 100% 0);
}

.has-ds-motion .ds-motion-header--motion-reveal.is-inview .ds-motion-header__inner {
	animation: ds-motion-header-reveal var(--wp--custom--motion--page) ease-in-out both;
}

.has-ds-motion .ds-motion-header--motion-drift::before {
	transform: translate3d(calc(-1 * var(--wp--custom--masthead--field-offset)), 0, 0) scale(var(--wp--custom--masthead--field-scale));
	transform-origin: center;
}

.has-ds-motion .ds-motion-header--motion-drift.is-inview::before {
	animation: ds-motion-header-drift var(--wp--custom--motion--page) ease-in-out both;
}

@keyframes ds-emphasis-in {
	0% {
		opacity: 0;
		transform: translate3d(0, 0.75rem, 0) scale(0.985);
	}

	55% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1.012);
	}

	78% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(0.997);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes ds-motion-header-reveal {
	0% {
		opacity: 0;
		clip-path: inset(0 0 100% 0);
		transform: translate3d(0, var(--wp--preset--spacing--20), 0);
	}

	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes ds-motion-header-drift {
	0% {
		transform: translate3d(calc(-1 * var(--wp--custom--masthead--field-offset)), 0, 0) scale(var(--wp--custom--masthead--field-scale));
	}

	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes ds-page-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes ds-page-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}

	[data-ds-motion] {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}

	.ds-motion-header::before,
	.ds-motion-header__inner {
		opacity: 1;
		clip-path: none;
		transform: none;
		animation: none;
		transition: none;
	}
}