/*
 * PureCSS.com
 * https://purecss.com/examples/starburst/
 * A rotating starburst drawn with repeating-conic-gradient and a radial mask.
 */

.demo-starburst {
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.demo-starburst .sb-burst {
		position: relative;
		width: 230px;
		height: 230px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

/*
 * The rays are one gradient, not forty elements. Each repetition paints a
 * wedge and then a gap, so the ray count is set by the size of one repetition
 * rather than by any markup.
 *
 * The whole box turns rather than the gradient inside it. A gradient's own
 * angle cannot be animated without registering it through @property first,
 * and rotating the element gets the same result everywhere.
 */
.demo-starburst .sb-rays {
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: repeating-conic-gradient(from 0deg,
			var(--accent) 0deg 5deg,
			transparent 5deg 15deg);
		-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 27%, #000 36%, #000 60%, transparent 80%);
		mask-image: radial-gradient(circle at 50% 50%, transparent 27%, #000 36%, #000 60%, transparent 80%);
		animation: sb-turn 48s linear infinite;
	}

/* a second, finer set turning the other way, which is what stops the rays
   reading as one solid wheel */
.demo-starburst .sb-rays-fine {
		background: repeating-conic-gradient(from 0deg,
			var(--sky) 0deg 1.6deg,
			transparent 1.6deg 9deg);
		opacity: .5;
		animation: sb-turn-back 72s linear infinite;
	}

@keyframes sb-turn {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes sb-turn-back {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

.demo-starburst .sb-core {
		position: relative;
		z-index: 1;
		width: 108px;
		height: 108px;
		border-radius: 50%;
		background: var(--surface);
		border: 1px solid var(--border);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .1rem;
	}

.demo-starburst .sb-core b {
		font-size: 1.5rem;
		font-weight: 800;
		letter-spacing: -.03em;
		color: var(--accent);
		line-height: 1;
	}

.demo-starburst .sb-core span {
		font-family: var(--font-mono);
		font-size: .55rem;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--text-muted);
	}

.demo-starburst .sb-hint {
		font-family: var(--font-mono);
		font-size: .7rem;
		color: var(--text-muted);
	}

/* ── Variant: a pointed badge cut with clip-path ── */

/*
 * Twenty shallow points, cut from a plain square. The polygon is forty
 * vertices alternating between an outer radius of 50% and an inner one of
 * 42%, which is the whole shape: a deeper inner radius gives a spikier star,
 * a shallower one gives a bottle cap.
 */
.demo-starburst .sb-badge {
		position: relative;
		width: 190px;
		height: 190px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--accent);
		color: var(--bg);
		clip-path: polygon(
			50.0% 0.0%, 56.6% 8.5%, 65.5% 2.4%, 69.1% 12.6%,
			79.4% 9.5%, 79.7% 20.3%, 90.5% 20.6%, 87.4% 30.9%,
			97.6% 34.5%, 91.5% 43.4%, 100.0% 50.0%, 91.5% 56.6%,
			97.6% 65.5%, 87.4% 69.1%, 90.5% 79.4%, 79.7% 79.7%,
			79.4% 90.5%, 69.1% 87.4%, 65.5% 97.6%, 56.6% 91.5%,
			50.0% 100.0%, 43.4% 91.5%, 34.5% 97.6%, 30.9% 87.4%,
			20.6% 90.5%, 20.3% 79.7%, 9.5% 79.4%, 12.6% 69.1%,
			2.4% 65.5%, 8.5% 56.6%, 0.0% 50.0%, 8.5% 43.4%,
			2.4% 34.5%, 12.6% 30.9%, 9.5% 20.6%, 20.3% 20.3%,
			20.6% 9.5%, 30.9% 12.6%, 34.5% 2.4%, 43.4% 8.5%
		);
		animation: sb-turn 90s linear infinite;
	}

/* the badge turns, the words do not, so the text stays level while the
   points travel around it */
.demo-starburst .sb-badge-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .1rem;
		animation: sb-turn-back 90s linear infinite;
	}

.demo-starburst .sb-badge-text b {
		font-size: 1.7rem;
		font-weight: 800;
		letter-spacing: -.03em;
		line-height: 1;
	}

.demo-starburst .sb-badge-text span {
		font-family: var(--font-mono);
		font-size: .55rem;
		letter-spacing: .12em;
		text-transform: uppercase;
		opacity: .75;
	}

/* ── Variant: a burst behind a heading ── */

.demo-starburst .sb-banner {
		position: relative;
		width: 100%;
		max-width: 460px;
		height: 190px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: var(--surface);
		border: 1px solid var(--border);
	}

/*
 * Anchored below the frame and twice its width, so only the top of the fan is
 * visible and the rays read as coming from off screen. overflow: hidden on the
 * frame is what crops it.
 */
.demo-starburst .sb-banner-rays {
		position: absolute;
		bottom: -190px;
		left: 50%;
		width: 620px;
		height: 620px;
		margin-left: -310px;
		background: repeating-conic-gradient(from 0deg,
			var(--accent-dim) 0deg 4deg,
			transparent 4deg 12deg);
		border-radius: 50%;
		animation: sb-turn 120s linear infinite;
	}

.demo-starburst .sb-banner-text {
		position: relative;
		z-index: 1;
		text-align: center;
		padding: 0 1.5rem;
	}

.demo-starburst .sb-banner-text b {
		display: block;
		font-size: 1.6rem;
		font-weight: 800;
		letter-spacing: -.03em;
		color: var(--text);
		line-height: 1.15;
	}

.demo-starburst .sb-banner-text span {
		display: block;
		margin-top: .4rem;
		font-size: .85rem;
		color: var(--text-muted);
	}

/*
 * A slow turn in the background is still motion, and this one never stops on
 * its own. Reduced motion parks every layer at its drawn angle, which keeps
 * the shape and removes the movement.
 */
@media (prefers-reduced-motion: reduce) {
	.demo-starburst .sb-rays,
	.demo-starburst .sb-badge,
	.demo-starburst .sb-badge-text,
	.demo-starburst .sb-banner-rays {
		animation: none;
	}
}