@layer components {
	[data-hero-allstars] {
		animation:
			hero-allstars-shake 1s 1.5s var(--ease-in-out),
			hero-allstars-fade-in 0.05s 1.5s var(--ease-in-out) backwards,
			hero-allstars-pop-in 0.7s 1.5s cubic-bezier(0.2, 2, 1, 1.5)
				backwards;
	}
}

@keyframes hero-allstars-shake {
	10% {
		rotate: 10deg;
	}

	20% {
		rotate: -10deg;
	}

	30% {
		rotate: 5deg;
	}

	40% {
		rotate: -5deg;
	}

	50% {
		rotate: 2deg;
	}

	60% {
		rotate: -2deg;
	}

	70% {
		rotate: 1deg;
	}

	80% {
		rotate: 0deg;
	}
}

@keyframes hero-allstars-pop-in {
	from {
		scale: 0.5;
	}
}

@keyframes hero-allstars-fade-in {
	from {
		opacity: 0;
	}
}