/*
 * PureCSS.com
 * https://purecss.com/examples/text-shimmer/
 * A moving gradient shimmer across text using background-clip: text and CSS keyframes.
 */

.demo-text-shimmer .shimmer-stage {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		align-items: center;
	}

.demo-text-shimmer .shimmer {
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 200% auto;
		animation: shimmer-sweep 2s linear infinite;
		display: inline-block;
	}

.demo-text-shimmer .shimmer-green {
		font-size: 2rem;
		font-weight: 800;
		background-image: linear-gradient(90deg,
			var(--text) 0%,
			var(--accent) 30%,
			var(--teal) 50%,
			var(--accent) 70%,
			var(--text) 100%
		);
	}

.demo-text-shimmer .shimmer-gold {
		font-size: 1.4rem;
		font-weight: 700;
		background-image: linear-gradient(90deg,
			var(--text-muted) 0%,
			var(--yellow) 30%,
			var(--orange) 50%,
			var(--yellow) 70%,
			var(--text-muted) 100%
		);
		animation-duration: 2.5s;
	}

.demo-text-shimmer .shimmer-rainbow {
		font-size: 1.1rem;
		font-weight: 600;
		background-image: linear-gradient(90deg,
			var(--coral) 0%,
			var(--yellow) 20%,
			var(--accent) 40%,
			var(--sky) 60%,
			var(--violet) 80%,
			var(--coral) 100%
		);
		background-size: 300% auto;
		animation-duration: 3s;
	}

.demo-text-shimmer .shimmer-mono {
		font-family: var(--font-mono);
		font-size: .95rem;
		font-weight: 500;
		background-image: linear-gradient(90deg,
			var(--text-muted) 0%,
			var(--text) 50%,
			var(--text-muted) 100%
		);
		animation-duration: 1.5s;
	}

@keyframes shimmer-sweep {
	from { background-position: 200% center; }
	to   { background-position: -200% center; }
}