.reveal {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(26px);
	transition:
		opacity 820ms var(--ease),
		filter 820ms var(--ease),
		transform 820ms var(--ease);
}

.reveal.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

@keyframes pixelPulse {
	0% {
		color: var(--pink);
		transform: scale(1);
		filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pink), transparent 45%));
	}
	33% {
		color: var(--blue);
		transform: scale(1.18) rotate(6deg);
		filter: drop-shadow(0 0 12px color-mix(in srgb, var(--blue), transparent 25%));
	}
	66% {
		color: var(--butter);
		transform: scale(0.94) rotate(-6deg);
		filter: drop-shadow(0 0 12px color-mix(in srgb, var(--butter), transparent 20%));
	}
	100% {
		color: var(--pink);
		transform: scale(1);
		filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pink), transparent 45%));
	}
}

@keyframes loaderPop {
	0% {
		opacity: 0;
		transform: translateY(18px) rotate(-2deg) scale(0.96);
	}
	45% {
		opacity: 1;
		transform: translateY(0) rotate(1deg) scale(1.03);
	}
	100% {
		transform: translateY(0) rotate(-1deg) scale(1);
	}
}

@keyframes floaty {
	0%,
	100% {
		transform: translateY(0) rotate(-2deg);
	}
	50% {
		transform: translateY(-12px) rotate(2deg);
	}
}

.floaty {
	animation: floaty 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}