/* Auto-cycle navigation — animated dot progress (iConneXions-style) */

.cycle-nav {
	--cycle-interval: 15s;
	--cycle-accent: #06b6d4;
	--cycle-dot-bg: #e2e8f0;
	--cycle-dot-size: 8px;
	--cycle-dot-active-w: 2.75rem;
}

.cycle-nav__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
	padding-bottom: 0.15rem;
}

.cycle-nav__arrow {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
	background: var(--surface-card);
	color: var(--text);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	font-family: inherit;
}

.cycle-nav__arrow:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--cycle-accent) 45%, var(--border));
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.cycle-nav__arrow:active {
	transform: translateY(0);
}

.cycle-nav__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: var(--cycle-dot-size);
}

.cycle-nav__dot {
	position: relative;
	width: var(--cycle-dot-size);
	height: var(--cycle-dot-size);
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--cycle-dot-bg);
	cursor: pointer;
	overflow: hidden;
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
	flex-shrink: 0;
}

.cycle-nav__dot.is-active {
	width: var(--cycle-dot-active-w);
	background: var(--cycle-dot-bg);
}

.cycle-nav__dot-progress {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: var(--cycle-accent);
	pointer-events: none;
}

.cycle-nav.is-paused .cycle-nav__dot.is-active .cycle-nav__dot-progress,
.is-paused .cycle-nav__dot.is-active .cycle-nav__dot-progress {
	animation-play-state: paused;
}

.cycle-nav__dot.is-active .cycle-nav__dot-progress {
	animation: cycle-nav-progress var(--cycle-interval) linear forwards;
}

@keyframes cycle-nav-progress {
	from { width: 0; }
	to { width: 100%; }
}

.cycle-nav--tabs .tabs__nav {
	margin-bottom: 0;
}

.cycle-nav--tabs {
	margin-bottom: 2rem;
}

[data-theme="dark"] .cycle-nav {
	--cycle-dot-bg: #334155;
	--cycle-accent: #22d3ee;
}

[data-theme="dark"] .cycle-nav__arrow {
	background: var(--surface);
	border-color: var(--border);
}

@media (prefers-reduced-motion: reduce) {
	.cycle-nav__dot.is-active .cycle-nav__dot-progress {
		animation: none;
		width: 100%;
	}
}

@media (max-width: 639px) {
	.cycle-nav__footer {
		gap: 0.65rem;
	}

	.cycle-nav__arrow {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1rem;
	}

	.cycle-nav {
		--cycle-dot-active-w: 2.25rem;
	}
}