/**
 * Flavors Particle Background - base layout for the constellation canvas and the
 * optional centered overlay content. Per-instance values (height, background,
 * radius, content typography/color/align/width/padding) come from Elementor
 * control `selectors`; this file stays static and HTTP-cacheable. The particle
 * animation lives in assets/js/widgets/flavor-particles.js.
 */

.flavor-particles {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 120px;
	overflow: hidden;
	background-color: #0b0b1a;
}

.flavor-particles__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.flavor-particles__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 32px;
	color: #ffffff;
	text-align: center;
}

/* Let interactive content inside the overlay remain clickable. */
.flavor-particles__content a,
.flavor-particles__content button {
	pointer-events: auto;
}

/*
 * Reduced motion: the script already paints a single static frame (no loop);
 * nothing extra is required here, but we keep the canvas visible so the design
 * is preserved.
 */
@media ( prefers-reduced-motion: reduce ) {
	.flavor-particles__canvas {
		opacity: 1;
	}
}