.sensors-ping {
	--scale: 1;
	transform: translate(-50%, -50%) scale(var(--scale));
	transform-origin: center;
	opacity: 0;
	@starting-style {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0);
	}
}

.sonar-background {
	background: radial-gradient(
		ellipse at center,
		rgba(30, 87, 153, 0) 0%,
		rgba(31, 91, 158, 0) 21%,
		rgba(41, 137, 216, 0.24) 50%,
		rgba(34, 107, 178, 0.8) 61%,
		rgba(30, 88, 154, 0) 70%
	);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0% 0%;
	transition: all 0s linear;
}

.sonar-background.ping {
	transition: all 10s ease;
	background-size: 600% 600%;
}

.sonar-background:not(.is-core) .sensor-contacts {
	animation-iteration-count: 1;
	animation-play-state: paused;
	animation-duration: 6.5s;
	animation-timing-function: cubic-bezier(1, 0, 0, 1);
	mask-image: radial-gradient(transparent 0%, black 0.1%, black 10%, rgba(0, 0, 0, 0) 20%);
	mask-size: 1% 1%;
	mask-repeat: no-repeat;
	mask-position: center;
}
.sonar-background:not(.is-core).ping .sensor-contacts {
	animation-name: sensors-ping-mask;
	animation-play-state: running;
}
.sonar-background:not(.is-core) .sensor-contacts div {
	pointer-events: none;
}
.sonar-background:not(.is-core) .sensor-contacts.can-hover div {
	pointer-events: auto;
}
@keyframes sensors-ping-mask {
	0% {
		mask-size: 1% 1%;
	}
	40% {
		mask-size: 2000% 2000%;
	}
	60% {
		mask-size: 2000% 2000%;
	}
	100% {
		mask-size: 2000000% 2000000%;
	}
}