ui/trickscore.razor.scss
TrickScore {
	position: absolute;
	height: 100%;
	width: 100%;

	.multiplier {
		background: linear-gradient( 0deg, #00000000 0%, #000000b3 20%, #000000b3 80%, #00000000 100% );
		position: absolute;
		bottom: 6.5%;
		left: 50%;
		width: auto;
		height: auto;
		padding-top: 10px;
		padding-bottom: 10px;
		color: #e7af25;
		transform: translateX( -50% );
		transition: opacity 0.25s ease-out, color 0.15s ease-out, transform 0.2s ease-out;
		animation: trick_pop 0.25s ease-out;
	}

	.skate-trick-text.done {
		color: #3273eb;
		text-shadow: 0 0 18px #3273eb66, 0 6px 14px #00000080;
	}

	.skate-trick-text.failed {
		color: red;
		text-shadow: 0 0 18px #ff303066, 0 6px 14px #00000080;
	}

	.tricks {
		position: absolute;
		bottom: 3%;
		left: 50%;
		width: auto;
		height: auto;
		transform: translateX( -50% );
		text-transform: none;
		font-size: 32px;
		transition: opacity 0.25s ease-out, color 0.15s ease-out, transform 0.2s ease-out;
		animation: trick_slide 0.25s ease-out;
	}

	.fadeout {
		opacity: 0;
		transform: translateX( -50% ) translateY( 6px );
	}

	.hidden {
		display: none;
	}

	.skate-trick-text {
		font-family: Bahnschrift;
		color: white;
		font-size: 40px;
		text-stroke: 5px black;
		padding-left: 10px;
		padding-top: 10px;
		padding-right: 5px;
		padding-bottom: 10px;
		text-transform: lowercase;
		text-shadow: 0 6px 14px #00000080;
		transition: color 0.2s ease, text-shadow 0.2s ease;
	}

	.pulse.pulse-a {
		animation: trick_pulse 0.28s cubic-bezier( 0.2, 1.4, 0.3, 1 );
	}

	.pulse.pulse-b {
		animation: trick_pulse 0.28s cubic-bezier( 0.2, 1.4, 0.3, 1 );
	}
}

@keyframes trick_pop {
	0% {
		transform: translateX( -50% ) scale( 0.95 );
		opacity: 0;
	}
	100% {
		transform: translateX( -50% ) scale( 1 );
		opacity: 1;
	}
}

@keyframes trick_slide {
	0% {
		transform: translateX( -50% ) translateY( 6px );
		opacity: 0;
	}
	100% {
		transform: translateX( -50% ) translateY( 0 );
		opacity: 1;
	}
}

@keyframes trick_pulse {
	0% {
		transform: translateX( -50% ) scale( 0.96 );
	}
	60% {
		transform: translateX( -50% ) scale( 1.04 );
	}
	100% {
		transform: translateX( -50% ) scale( 1 );
	}
}