/**
 * Scroll Navigation Dots — Style 5: Glow Track
 *
 * A connecting track line runs behind the dots. The active dot lights up with a
 * neon accent glow and a pulsing ring, giving a futuristic progress-rail look.
 * Works in both vertical and horizontal placements.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-scrolldots.captwiki-style-5 .captwiki-scrolldots__list {
	position: relative;
}

/* Track line behind the dots. */
.captwiki-scrolldots.captwiki-style-5 .captwiki-scrolldots__list::before {
	content: "";
	position: absolute;
	z-index: 0;
	background: color-mix( in srgb, var( --captwiki-sd-color ) 60%, transparent );
	border-radius: 99px;
}

.captwiki-scrolldots.captwiki-style-5.captwiki-scrolldots--vertical .captwiki-scrolldots__list::before {
	top: 6px;
	bottom: 6px;
	left: 50%;
	width: 2px;
	transform: translateX( -50% );
}

.captwiki-scrolldots.captwiki-style-5.captwiki-scrolldots--horizontal .captwiki-scrolldots__list::before {
	left: 6px;
	right: 6px;
	top: 50%;
	height: 2px;
	transform: translateY( -50% );
}

.captwiki-scrolldots.captwiki-style-5 .captwiki-scrolldots__dot {
	position: relative;
	z-index: 1;
	padding: 4px;
}

.captwiki-scrolldots.captwiki-style-5 .captwiki-scrolldots__marker {
	background: var( --captwiki-sd-color );
}

.captwiki-scrolldots.captwiki-style-5 .captwiki-scrolldots__dot:hover .captwiki-scrolldots__marker {
	background: var( --captwiki-sd-accent );
}

.captwiki-scrolldots.captwiki-style-5 .captwiki-scrolldots__dot.is-active .captwiki-scrolldots__marker {
	background: var( --captwiki-sd-accent );
	transform: scale( 1.3 );
	box-shadow: 0 0 8px 1px var( --captwiki-sd-accent ), 0 0 18px 3px color-mix( in srgb, var( --captwiki-sd-accent ) 55%, transparent );
	animation: captwiki-sd5-pulse 1.8s ease-in-out infinite;
}

@keyframes captwiki-sd5-pulse {
	0%,
	100% {
		box-shadow: 0 0 6px 1px var( --captwiki-sd-accent ), 0 0 14px 2px color-mix( in srgb, var( --captwiki-sd-accent ) 45%, transparent );
	}
	50% {
		box-shadow: 0 0 10px 2px var( --captwiki-sd-accent ), 0 0 24px 5px color-mix( in srgb, var( --captwiki-sd-accent ) 60%, transparent );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.captwiki-scrolldots.captwiki-style-5 .captwiki-scrolldots__dot.is-active .captwiki-scrolldots__marker {
		animation: none;
	}
}
