/* TIMELINE PROGRESS & CONCENTRIC CIRCLE DOTS */
.page-timeline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 999;
	background: var(--bg3);
	pointer-events: none;
}

.page-timeline-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(to right,
			#ffffff,
			var(--gold),
			var(--ss),
			var(--nb),
			var(--rose),
			var(--purple),
			var(--auto),
			var(--green)
		);
	transition: width 0.1s linear;
	border-radius: 2px;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

.vline-track {
	position: fixed;
	left: 0;
	top: 3px;
	bottom: 0;
	width: 3px;
	z-index: 200;
	background: var(--bg3);
	pointer-events: none;
}

.vline-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background: linear-gradient(to bottom,
			#ffffff,
			var(--gold),
			var(--ss),
			var(--nb),
			var(--rose),
			var(--purple),
			var(--auto),
			var(--green)
		);
	transition: height 0.1s linear;
	border-radius: 0 0 2px 2px;
	filter: drop-shadow(2px 0 8px rgba(0, 0, 0, 0.1));
}

.right-timeline {
	position: fixed;
	right: 0;
	top: 70px;
	bottom: 60px;
	width: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 2rem 0;
	z-index: 10000;
	pointer-events: none;
}

.rt-dot {
	width: 14px;
	height: 14px;
	background: transparent;
	border: 2px solid var(--hint);
	border-radius: 50%;
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	pointer-events: auto;
}

.rt-dot:hover {
	transform: scale(1.6);
	box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
}

.rt-dot.active {
	box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
	animation: glow 2s ease-in-out infinite;
}

.rt-dot::before {
	content: '';
	position: absolute;
	inset: -6px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	opacity: 0.45;
	transition: all 0.3s ease;
}

.rt-dot:hover::before,
.rt-dot.active::before {
	opacity: 1;
	transform: scale(1.15);
}

.rt-connector {
	position: absolute;
	width: 2px;
	height: var(--line-height, 0px);
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	z-index: -1;
	background: var(--bg3);
	opacity: 0.2;
	transition: all 0.4s ease;
}

.rt-dot[data-sec="contact"] .rt-connector { display: none !important; }
.rt-dot.active .rt-connector, .rt-dot.passed .rt-connector { opacity: 1; }

.rt-dot[data-sec="hero"] .rt-connector, .rt-dot.passed[data-sec="hero"] .rt-connector { background: var(--gold); }
.rt-dot[data-sec="about"] .rt-connector, .rt-dot.passed[data-sec="about"] .rt-connector { background: linear-gradient(to bottom, var(--gold), var(--ss)) !important; }
.rt-dot[data-sec="shaadisaathi"] .rt-connector, .rt-dot.passed[data-sec="shaadisaathi"] .rt-connector { background: linear-gradient(to bottom, var(--ss), var(--nb)) !important; }
.rt-dot[data-sec="notion"] .rt-connector, .rt-dot.passed[data-sec="notion"] .rt-connector { background: linear-gradient(to bottom, var(--nb), var(--rose)) !important; }
.rt-dot[data-sec="webinvites"] .rt-connector, .rt-dot.passed[data-sec="webinvites"] .rt-connector { background: linear-gradient(to bottom, var(--rose), var(--purple)) !important; }
.rt-dot[data-sec="websites"] .rt-connector, .rt-dot.passed[data-sec="websites"] .rt-connector { background: linear-gradient(to bottom, var(--purple), var(--auto)) !important; }
.rt-dot[data-sec="automations"] .rt-connector, .rt-dot.passed[data-sec="automations"] .rt-connector { background: linear-gradient(to bottom, var(--auto), var(--green)) !important; }

.rt-dot.active[data-sec="hero"], .rt-dot.passed[data-sec="hero"] { border-color: var(--ink) !important; background: var(--ink); color: var(--ink); }
.rt-dot.active[data-sec="about"], .rt-dot.passed[data-sec="about"] { border-color: var(--gold) !important; background: var(--gold); color: var(--gold); }
.rt-dot.active[data-sec="shaadisaathi"], .rt-dot.passed[data-sec="shaadisaathi"] { border-color: var(--ss) !important; background: var(--ss); color: var(--ss); }
.rt-dot.active[data-sec="notion"], .rt-dot.passed[data-sec="notion"] { border-color: var(--nb) !important; background: var(--nb); color: var(--nb); }
.rt-dot.active[data-sec="webinvites"], .rt-dot.passed[data-sec="webinvites"] { border-color: var(--rose) !important; background: var(--rose); color: var(--rose); }
.rt-dot.active[data-sec="websites"], .rt-dot.passed[data-sec="websites"] { border-color: var(--purple) !important; background: var(--purple); color: var(--purple); }
.rt-dot.active[data-sec="automations"], .rt-dot.passed[data-sec="automations"] { border-color: var(--auto) !important; background: var(--auto); color: var(--auto); }
.rt-dot.active[data-sec="contact"], .rt-dot.passed[data-sec="contact"] { border-color: var(--green) !important; background: var(--green); color: var(--green); }

.rt-label {
	position: absolute;
	right: 36px;
	top: 50%;
	transform: translateY(-50%);
	background: #111;
	color: #fff;
	padding: 5px 12px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.rt-dot:hover .rt-label {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(-15px);
}

@media (max-width: 768px) {
	.right-timeline {
		display: none;
	}
}