@keyframes fade-in {
	from {
		opacity: 0;
		translate: 0 1rem;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

[data-fade-in] {
	view-timeline-name: --fade-in;
	view-timeline-axis: block;
	animation: ease-in-out fade-in both;
	animation-timeline: --fade-in;
	animation-range: entry calc(-10% * var(--enable-animation, 1)) cover calc(20% * var(--enable-animation, 1));
}

@keyframes sparkle {
	0% {
		opacity: 0;
		translate: -0.7ch -10%;
	}
	10% {
		opacity: 1;
		translate: -0.7ch -10%;
	}
	20% {
		opacity: 0;
		translate: -0.7ch -10%;
	}

	25% {
		opacity: 0;
		translate: 60% -30%;
	}
	35% {
		opacity: 1;
		translate: 60% -30%;
	}
	45% {
		opacity: 0;
		translate: 60% -30%;
	}

	55% {
		opacity: 0;
		translate: 30% 0;
	}
	65% {
		opacity: 1;
		translate: 30% 0;
	}
	75% {
		opacity: 0;
		translate: 30% 0;
	}

	80% {
		opacity: 0;
		translate: calc(100% - 1.3ch) -20%;
	}
	90% {
		opacity: 1;
		translate: calc(100% - 1.3ch) -20%;
	}
	100% {
		opacity: 0;
		translate: calc(100% - 1.3ch) -20%;
	}
}

:root, [force-scheme="light"] {
	--sparkle-color: oklch(100% 0 259.28 / 100%);
}

@media (prefers-color-scheme: dark) {
	:root:not([force-scheme="light"]) {
		--sparkle-color: oklch(100% 0 259.28 / 50%);
	}
}

[force-scheme="dark"] {
	--sparkle-color: oklch(100% 0 259.28 / 50%);
}

[data-sparkle] {
	position: relative;
	text-shadow: 0 0 10px var(--sparkle-color);
	letter-spacing: calc(var(--letter-spacing) + 0.03em);

	&::before,
	&::after {
		content: "✨";
		position: absolute;
		inset: 0;
		text-shadow: 0 0 10px var(--sparkle-color);
		animation: sparkle calc(3s * var(--enable-animation, 1)) ease-in-out infinite;
	}

	&::after {
		animation-delay: 1s;
	}

	@media (prefers-reduced-motion) {
		&:not([force-animation="false"])::before,
		&:not([force-animation="false"])::after {
			animation: none;
			position: relative;
		}
	}

	&[force-animation="false"] {
		&::before,
		&::after {
			animation: none;
			position: relative;
		}
	}
}