/**
 * Section Navigation Styles
 *
 * Fixed position navigation for features page.
 * Desktop: Right side dots with tooltips
 * Mobile: Bottom bar with compact indicators
 */

/* ==========================================================================
   Desktop Navigation (right side dots)
   ========================================================================== */

.section-nav {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	opacity: 0;
	animation: section-nav-fade-in 0.5s ease-out 1s forwards;
}

@keyframes section-nav-fade-in {
	to {
		opacity: 1;
	}
}

.section-nav-list {
	list-style: none;
	margin: 0;
	padding: 16px 8px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 24px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.section-nav-item {
	position: relative;
}

.section-nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	text-decoration: none;
	position: relative;
}

/* Navigation dot */
.section-nav-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--line);
	transition: all 0.3s ease;
	position: relative;
}

.section-nav-link:hover .section-nav-dot {
	background: var(--muted);
	transform: scale(1.2);
}

/* Active state */
.section-nav-link.active .section-nav-dot {
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(5, 14, 57, 0.15);
	transform: scale(1.1);
}

/* Tooltip */
.section-nav-tooltip {
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 12px;
	padding: 6px 12px;
	background: var(--ink);
	color: white;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	pointer-events: none;
}

/* Tooltip arrow */
.section-nav-tooltip::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: var(--ink);
}

.section-nav-link:hover .section-nav-tooltip {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   Mobile Navigation (bottom bar)
   ========================================================================== */

@media (max-width: 900px) {
	.section-nav {
		right: auto;
		left: 50%;
		top: auto;
		bottom: 20px;
		transform: translateX(-50%);
	}

	.section-nav-list {
		flex-direction: row;
		gap: 8px;
		padding: 12px 16px;
		border-radius: 32px;
	}

	.section-nav-link {
		width: 28px;
		height: 28px;
	}

	.section-nav-dot {
		width: 8px;
		height: 8px;
	}

	/* Hide tooltips on mobile - use dot indicators only */
	.section-nav-tooltip {
		display: none;
	}
}

/* ==========================================================================
   Hide on very small screens (interferes with content)
   ========================================================================== */

@media (max-width: 480px) {
	.section-nav {
		bottom: 12px;
	}

	.section-nav-list {
		gap: 6px;
		padding: 10px 12px;
	}

	.section-nav-link {
		width: 24px;
		height: 24px;
	}

	.section-nav-dot {
		width: 6px;
		height: 6px;
	}
}

/* ==========================================================================
   Reduced motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.section-nav {
		animation: none;
		opacity: 1;
	}

	.section-nav-dot,
	.section-nav-tooltip {
		transition: none;
	}
}