:root {
	--sos-motion-candidate-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sos-motion-candidate-duration: 300ms;
	--sos-motion-candidate-ripple: rgba(255, 255, 255, 0.72);
}

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

	::view-transition-group(root) {
		animation-duration: var(--sos-motion-candidate-duration);
		animation-timing-function: var(--sos-motion-candidate-ease);
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: var(--sos-motion-candidate-duration);
		animation-timing-function: var(--sos-motion-candidate-ease);
		animation-fill-mode: both;
		will-change: opacity, transform, filter;
	}

	::view-transition-old(root) {
		animation-name: sos-motion-candidate-fade-out;
	}

	::view-transition-new(root) {
		animation-name: sos-motion-candidate-fade-in;
	}
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
	@view-transition {
		navigation: none;
	}
}

a.elementor-button,
button.elementor-button,
a.wp-block-button__link,
a.button,
button.button,
a.wp-element-button,
button.wp-element-button,
.sos-cta,
.cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sos-motion-candidate-ripple {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background:
		radial-gradient(
			circle at var(--sos-motion-candidate-ripple-x, 50%) var(--sos-motion-candidate-ripple-y, 50%),
			var(--sos-motion-candidate-ripple) 0,
			rgba(255, 255, 255, 0.46) 18%,
			rgba(255, 255, 255, 0.16) 36%,
			transparent 62%
		);
	opacity: 0;
	transform: scale(0.12);
	animation: sos-motion-candidate-ripple 620ms var(--sos-motion-candidate-ease) forwards;
	mix-blend-mode: screen;
	filter: saturate(1.06) brightness(1.04);
}

@keyframes sos-motion-candidate-ripple {
	0% {
		opacity: 0.94;
		transform: scale(0.12);
	}

	48% {
		opacity: 0.38;
	}

	100% {
		opacity: 0;
		transform: scale(1.36);
	}
}

@keyframes sos-motion-candidate-fade-out {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
	to {
		opacity: 0.18;
		transform: translateY(6px) scale(0.992);
		filter: blur(1.5px);
	}
}

@keyframes sos-motion-candidate-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.992);
		filter: blur(1.5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

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

	.sos-motion-candidate-ripple {
		display: none !important;
	}

	a.elementor-button,
	button.elementor-button,
	a.wp-block-button__link,
	a.button,
	button.button,
	a.wp-element-button,
	button.wp-element-button,
	.sos-cta,
	.cta {
		transform: none !important;
	}
}

@media (hover: none), (pointer: coarse) {
	a.elementor-button:hover,
	button.elementor-button:hover,
	a.wp-block-button__link:hover,
	a.button:hover,
	button.button:hover,
	a.wp-element-button:hover,
	button.wp-element-button:hover,
	.sos-cta:hover,
	.cta:hover {
		transform: none;
	}
}