.page-transition {
	display: none;
}

html.js .page-transition {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	background: var(--wp--preset--color--secondary);
	transform: translateY(100%);
	will-change: transform;
}

/* New page starts fully covered */
html.js.page-is-entering .page-transition {
	transform: translateY(0);
}

/* New page reveal: cover swipes up and off the top */
html.js.page-has-entered .page-transition {
	transform: translateY(-100%);
	transition: transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}

/* Current page exit starts below viewport */
html.js.page-is-leaving .page-transition {
	transform: translateY(100%);
}

/* Current page exit: cover swipes up from bottom */
html.js.page-has-left .page-transition {
	transform: translateY(0);
	transition: transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {
	html.js .page-transition,
	html.js.page-has-entered .page-transition,
	html.js.page-has-left .page-transition {
		transition: none;
	}
}

@keyframes belongFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
		filter: blur(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

@keyframes belongFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes belongLineIn {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes belongCardIn {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.985);
		filter: blur(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes belongImageIn {
	from {
		opacity: 0;
		transform: scale(1.04);
		filter: blur(8px);
	}

	to {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

/**
 * Only hide animated content once JS has confirmed motion is active.
 * This avoids invisible content if JS fails, loads late, or is disabled.
 */

html.has-belong-motion .belong-animate {
	opacity: 0;
	transform: translateY(24px);
	filter: blur(6px);
	will-change: transform, opacity, filter;
}

html.has-belong-motion .belong-animate.is-visible {
	animation: belongFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.has-belong-motion .belong-animate--fade.is-visible {
	animation-name: belongFadeIn;
}

html.has-belong-motion .belong-animate--scale.is-visible {
	animation-name: belongCardIn;
}

html.has-belong-motion .belong-stagger>* {
	opacity: 0;
	transform: translateY(20px);
	filter: blur(5px);
	will-change: transform, opacity, filter;
}

html.has-belong-motion .belong-stagger.is-visible>* {
	animation: belongFadeUp 850ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.has-belong-motion .belong-stagger.is-visible>*:nth-child(1) {
	animation-delay: 0ms;
}

html.has-belong-motion .belong-stagger.is-visible>*:nth-child(2) {
	animation-delay: 90ms;
}

html.has-belong-motion .belong-stagger.is-visible>*:nth-child(3) {
	animation-delay: 180ms;
}

html.has-belong-motion .belong-stagger.is-visible>*:nth-child(4) {
	animation-delay: 270ms;
}

html.has-belong-motion .belong-stagger.is-visible>*:nth-child(5) {
	animation-delay: 360ms;
}

html.has-belong-motion .belong-stagger.is-visible>*:nth-child(6) {
	animation-delay: 450ms;
}

/**
 * Block header animation.
 */

html.has-belong-motion .block-header {
	opacity: 0;
	transform: translateY(24px);
	filter: blur(6px);
	will-change: transform, opacity, filter;
}

html.has-belong-motion .block-header.is-visible {
	animation: belongFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/**
 * Single column animation.
 */

html.has-belong-motion .wp-block-blueprint-single-column .single-column__inner {
	opacity: 0;
	transform: translateY(24px);
	filter: blur(6px);
	will-change: transform, opacity, filter;
}

html.has-belong-motion .wp-block-blueprint-single-column.is-visible .single-column__inner {
	animation: belongFadeUp 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {

	html.has-belong-motion .belong-animate,
	html.has-belong-motion .belong-stagger>*,
	html.has-belong-motion .block-header,
	html.has-belong-motion .wp-block-blueprint-single-column .single-column__inner,
	html.has-belong-motion .wp-block-blueprint-step::before,
	html.has-belong-motion .wp-block-blueprint-step .step__content>*,
	html.has-belong-motion .wp-block-blueprint-cta,
	html.has-belong-motion .wp-block-blueprint-usp .usp__title,
	html.has-belong-motion .wp-block-blueprint-usp .usp__copy,
	html.has-belong-motion .wp-block-blueprint-testimonial .testimonial__quote,
	html.has-belong-motion .wp-block-blueprint-testimonial .testimonial__cite,
	html.has-belong-motion .wp-block-blueprint-testimonial .testimonial__image-wrap,
	html.has-belong-motion .wp-block-blueprint-benefit,
	html.has-belong-motion .wp-block-blueprint-benefit .benefit__image,
	html.has-belong-motion .wp-block-blueprint-two-col-section .two-col-section__grid>*,
	html.has-belong-motion .post-card {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	html.has-belong-motion .wp-block-blueprint-step::after,
	html.has-belong-motion .wp-block-blueprint-usp::before {
		animation: none !important;
		transform: scaleX(1) !important;
	}

	html.has-belong-motion .wp-block-blueprint-cta,
	html.has-belong-motion .wp-block-blueprint-cta *,
	html.has-belong-motion .wp-block-blueprint-benefit,
	html.has-belong-motion .wp-block-blueprint-benefit *,
	html.has-belong-motion .post-card,
	html.has-belong-motion .post-card * {
		transition: none !important;
	}
}