/**
 * Drifting gold starfield.
 *
 * Replica of the Base44 "floating particles" layer used on Behind the Curtain,
 * Testimonials, and Meet the Musicians. Base44 renders 20 absolutely-positioned
 * dots with randomised size/position/duration; this is the CSS-only equivalent,
 * driven by custom properties emitted from fso_starfield() in functions.php.
 *
 * The parent must be position:relative and the page content must sit above it.
 */

.fso-stars {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.fso-stars span {
	position: absolute;
	display: block;
	border-radius: 9999px;
	background: var(--wp--preset--color--gold);
	width: var(--fso-star-size);
	height: var(--fso-star-size);
	left: var(--fso-star-x);
	top: var(--fso-star-y);
	opacity: var(--fso-star-opacity);
	animation: fso-star-float var(--fso-star-duration) ease-in-out var(--fso-star-delay) infinite;
	will-change: transform, opacity;
}

@keyframes fso-star-float {
	0%, 100% { transform: translate3d(0, 0, 0);       opacity: 0.2; }
	50%      { transform: translate3d(10px, -20px, 0); opacity: 0.4; }
}

/* Hold the dots still for reduced-motion visitors; the field still reads as texture. */
@media (prefers-reduced-motion: reduce) {
	.fso-stars span { animation: none; }
}