/**
 * Lightweight animation utilities.
 *
 * Add one utility class in a block's Additional CSS class(es) field.
 * Animations start only after assets/js/animations.js marks the page ready.
 */

.nou-animate--ping,
.nou-animate--pulse,
.nou-animate--float,
.nou-animate--fade-in,
.nou-animate--fade-up,
.nou-animate--slide-left,
.nou-animate--slide-right,
.nou-animate--zoom-in {
	--nou-animation-duration: 0.72s;
	--nou-animation-delay: 0s;
	--nou-animation-distance: 20px;
}

.nou-animate--ping {
	position: relative;
}

.nou-animations-ready .nou-animate--ping::after {
	position: absolute;
	inset: 0;
	border: 1px solid currentColor;
	border-radius: inherit;
	content: "";
	pointer-events: none;
	animation: nou-animation-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.nou-animations-ready .nou-animate--pulse {
	animation: nou-animation-pulse 2.4s ease-in-out infinite;
}

.nou-animations-ready .nou-page-eyebrow::before,
.nou-animations-ready .nou-contact-label::before,
.nou-animations-ready .nou-contact-trust-list p::before,
.nou-animations-ready .nou-reviews-eyebrow::before,
.nou-animations-ready .nou-hero-banner .nou-hero-kicker::before {
	--nou-dot-ping-color: 37, 68, 255;
	--nou-dot-halo-size: 5px;
	--nou-dot-ring-size: 13px;
	animation: nou-animation-dot-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.nou-animations-ready .nou-hero-banner .nou-hero-kicker::before {
	--nou-dot-ping-color: 8, 55, 255;
}

.nou-animations-ready .nou-animate--float {
	animation: nou-animation-float 4.8s ease-in-out infinite;
}

.nou-animate--fade-in,
.nou-animate--fade-up,
.nou-animate--slide-left,
.nou-animate--slide-right,
.nou-animate--zoom-in {
	opacity: 0;
}

.nou-animate--fade-up {
	transform: translate3d(0, var(--nou-animation-distance), 0);
}

.nou-animate--slide-left {
	transform: translate3d(var(--nou-animation-distance), 0, 0);
}

.nou-animate--slide-right {
	transform: translate3d(calc(var(--nou-animation-distance) * -1), 0, 0);
}

.nou-animate--zoom-in {
	transform: scale(0.96);
}

.nou-animations-ready .nou-animate--fade-in,
.nou-animations-ready .nou-animate--fade-up,
.nou-animations-ready .nou-animate--slide-left,
.nou-animations-ready .nou-animate--slide-right,
.nou-animations-ready .nou-animate--zoom-in {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--nou-animation-duration) ease var(--nou-animation-delay),
		transform var(--nou-animation-duration) ease var(--nou-animation-delay);
}

.nou-animate-delay--1 {
	--nou-animation-delay: 0.12s;
}

.nou-animate-delay--2 {
	--nou-animation-delay: 0.24s;
}

.nou-animate-delay--3 {
	--nou-animation-delay: 0.36s;
}

@keyframes nou-animation-ping {
	75%,
	100% {
		opacity: 0;
		transform: scale(1.65);
	}
}

@keyframes nou-animation-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.72;
		transform: scale(1.16);
	}
}

@keyframes nou-animation-dot-ping {
	0% {
		box-shadow:
			0 0 0 var(--nou-dot-halo-size) rgba(var(--nou-dot-ping-color), 0.14),
			0 0 0 0 rgba(var(--nou-dot-ping-color), 0.34);
	}

	70%,
	100% {
		box-shadow:
			0 0 0 var(--nou-dot-halo-size) rgba(var(--nou-dot-ping-color), 0.1),
			0 0 0 var(--nou-dot-ring-size) rgba(var(--nou-dot-ping-color), 0);
	}
}

@keyframes nou-animation-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, -10px, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nou-animations-ready .nou-animate--ping::after,
	.nou-animations-ready .nou-animate--pulse,
	.nou-animations-ready .nou-animate--float,
	.nou-animations-ready .nou-page-eyebrow::before,
	.nou-animations-ready .nou-contact-label::before,
	.nou-animations-ready .nou-contact-trust-list p::before,
	.nou-animations-ready .nou-reviews-eyebrow::before,
	.nou-animations-ready .nou-hero-banner .nou-hero-kicker::before {
		animation: none;
	}

	.nou-animate--fade-in,
	.nou-animate--fade-up,
	.nou-animate--slide-left,
	.nou-animate--slide-right,
	.nou-animate--zoom-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}