@import url("https://fonts.googleapis.com/css2?family=Nabla:EDPT,EHLT@30..200,24&display=swap");

body {
	margin: 0;
	height: 100vh;
	display: grid;
	place-content: center;
	background-color: #000;
}

h1 {
	font-size: 12vw;
	font-family: Nabla;
}

@font-palette-values --Nabla {
	font-family: Nabla;
	base-palette: 2;
}

span {
	animation: depth 1s ease-in-out alternate infinite;
	position: relative;
	display: inline-block;
	font-variation-settings: "EDPT" 30;
	font-palette: --Nabla;
	@for $i from 1 through 12 {
		&:nth-child(#{$i}) {
			animation-delay: $i * 0.1s;
		}
	}
}

@keyframes depth {
	0% {
		transform: translatex(0) translatey(0);
	}
	100% {
		font-variation-settings: "EDPT" 200;
		transform: translatex(0.15em) translatey(0.1em);
	}
}