/*
 * Elementor's flexbox Containers only auto-stretch a handful of whitelisted
 * widget types (video, Google Maps, Swiper) to width:100% — every other
 * widget, including this one, shrink-to-fits by default. Since this widget's
 * own markup has no text content, that leaves it collapsed to ~0 width
 * (just its border), rendering as a thin vertical sliver instead of a bar.
 * Force the flex-item wrapper itself to fill the row/column.
 */
.elementor-widget-nanocelle-onset-timer {
	width: 100%;
}

.nsc-onset-timer {
	--nsc-timer-duration: 180s;
	--nsc-timer-fill-start: #1A63D1;
	--nsc-timer-fill-mid: #3CCBE9;
	--nsc-timer-fill-end: #B9F3F7;
	--nsc-timer-particle-color: #FFFFFF;
	width: 100%;
}

.nsc-onset-timer__track {
	position: relative;
	width: 100%;
	height: 64px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.nsc-onset-timer__fill {
	position: absolute;
	inset: 0;
	width: 0%;
	overflow: hidden;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		var(--nsc-timer-fill-start) 0%,
		var(--nsc-timer-fill-mid) 55%,
		var(--nsc-timer-fill-end) 100%
	);
	/* infinite (no "forwards"): loops — jumps back to 0% and refills every
	   cycle, rather than filling once and holding at 100%. */
	animation: nsc-onset-timer-fill var(--nsc-timer-duration) linear infinite;
}

@keyframes nsc-onset-timer-fill {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

/*
 * Small drifting dots inside the fill, echoing the product's nanoparticle
 * visual. A CSS radial-gradient background can only ever repeat in a
 * perfect grid — there's no randomness primitive in CSS — so the dot
 * positions come from an inline SVG tile with hand-scattered (non-grid)
 * coordinates instead. The tile still repeats seamlessly for the drift
 * animation, but within each repeat the dots read as organic/random
 * rather than rows and columns. Drifts by exactly one tile's width/height
 * so the loop wraps with no visible jump.
 *
 * Color is controllable: the SVG itself is used as a mask (shape + each
 * dot's own alpha) rather than painted directly, so the actual color comes
 * from `background-color` — a normal CSS property that can reference a
 * custom property, unlike anything baked into a data-URI string.
 */
.nsc-onset-timer__particles {
	position: absolute;
	inset: 0;
	background-color: var(--nsc-timer-particle-color);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='36'%3E%3Ccircle cx='5' cy='5' r='0.9' fill='white' fill-opacity='0.9'/%3E%3Ccircle cx='18' cy='3' r='0.7' fill='white' fill-opacity='0.7'/%3E%3Ccircle cx='31' cy='8' r='1' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='44' cy='4' r='0.8' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='56' cy='9' r='0.6' fill='white' fill-opacity='0.75'/%3E%3Ccircle cx='3' cy='17' r='0.8' fill='white' fill-opacity='0.8'/%3E%3Ccircle cx='14' cy='20' r='1.1' fill='white' fill-opacity='0.9'/%3E%3Ccircle cx='27' cy='15' r='0.7' fill='white' fill-opacity='0.65'/%3E%3Ccircle cx='39' cy='19' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='52' cy='16' r='1' fill='white' fill-opacity='0.7'/%3E%3Ccircle cx='8' cy='29' r='0.7' fill='white' fill-opacity='0.75'/%3E%3Ccircle cx='20' cy='32' r='0.9' fill='white' fill-opacity='0.8'/%3E%3Ccircle cx='33' cy='28' r='0.6' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='46' cy='33' r='1.1' fill='white' fill-opacity='0.9'/%3E%3Ccircle cx='58' cy='29' r='0.8' fill='white' fill-opacity='0.7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='36'%3E%3Ccircle cx='5' cy='5' r='0.9' fill='white' fill-opacity='0.9'/%3E%3Ccircle cx='18' cy='3' r='0.7' fill='white' fill-opacity='0.7'/%3E%3Ccircle cx='31' cy='8' r='1' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='44' cy='4' r='0.8' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='56' cy='9' r='0.6' fill='white' fill-opacity='0.75'/%3E%3Ccircle cx='3' cy='17' r='0.8' fill='white' fill-opacity='0.8'/%3E%3Ccircle cx='14' cy='20' r='1.1' fill='white' fill-opacity='0.9'/%3E%3Ccircle cx='27' cy='15' r='0.7' fill='white' fill-opacity='0.65'/%3E%3Ccircle cx='39' cy='19' r='0.9' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='52' cy='16' r='1' fill='white' fill-opacity='0.7'/%3E%3Ccircle cx='8' cy='29' r='0.7' fill='white' fill-opacity='0.75'/%3E%3Ccircle cx='20' cy='32' r='0.9' fill='white' fill-opacity='0.8'/%3E%3Ccircle cx='33' cy='28' r='0.6' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='46' cy='33' r='1.1' fill='white' fill-opacity='0.9'/%3E%3Ccircle cx='58' cy='29' r='0.8' fill='white' fill-opacity='0.7'/%3E%3C/svg%3E");
	-webkit-mask-size: 60px 36px;
	mask-size: 60px 36px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	mix-blend-mode: screen;
	opacity: 0.5;
	animation: nsc-onset-timer-particles 5s linear infinite;
}

@keyframes nsc-onset-timer-particles {
	from {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
	to {
		-webkit-mask-position: 60px 36px;
		mask-position: 60px 36px;
	}
}

/*
 * Sits as a sibling of .nsc-onset-timer__fill (inside .nsc-onset-timer__track,
 * not inside the fill itself) so it stays centered on the track and doesn't
 * slide/reveal along with the fill's own width animation. Centered via
 * absolute positioning + transform rather than flex, since the track also
 * hosts the independently-positioned .nsc-onset-timer__fill.
 */
.nsc-onset-timer__label {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	pointer-events: none;
	color: #FFFFFF;
	background-color: rgba(0, 0, 0, 0.35);
	padding: 8px 20px;
	border-radius: 999px;
	font-family: 'Acid Grotesk', sans-serif;
	font-weight: 700;
	font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
	/* Was a short, fast-repeating duration before this became a loop —
	   fine for a one-shot fill, but a rapid infinite loop is worse for
	   motion sensitivity, not better. Freeze both animations instead. */
	.nsc-onset-timer__fill {
		animation: none;
		width: 100%;
	}

	.nsc-onset-timer__particles {
		animation: none;
	}
}