/* Applying the Inter font as the default */
body {
	font-family: 'Inter', sans-serif;
	background-color: #0a092d;
	color: #e0e7ff;
}

/* Custom gradient text */
.gradient-text {
	background: linear-gradient(90deg, #818cf8, #c084fc, #f59e0b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Scroll-triggered animation classes */
.reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Continuous spin animation */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Applying the continuous spin to the rotator group */
#flywheel-rotator {
	animation: spin 25s linear infinite;
}

.flywheel-segment {
   cursor: default; /* Segments are no longer clickable */
}

/* Styling for content fading */
.flywheel-content {
	transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
	opacity: 0;
	transform: translateY(20px);
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.flywheel-content.active {
	opacity: 1;
	transform: translateY(0px);
	pointer-events: auto;
}

/* Graphics animation */
.draw-path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: draw 3s ease-in-out forwards;
}
.reveal.visible .draw-path {
	animation-play-state: running;
}
@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Interactive Flywheel Effect styles */
.push-card {
	transition: all 0.3s ease;
	cursor: pointer;
}
.push-card:not(.active) {
	opacity: 0.5;
	transform: scale(0.95);
}
.interactive-content {
	display: none;
}
.interactive-content.active {
	display: block;
}

/* NEW Impressive Timeline Design */
.impressive-timeline::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background-image: linear-gradient(to bottom, #4f46e5, #c084fc, #f59e0b);
	transform: translateX(-50%);
	border-radius: 2px;
}
.timeline-entry {
	position: relative;
}
.timeline-icon-wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #0a092d;
	padding: 0.5rem;
	border-radius: 50%;
}
.timeline-icon-bg {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid;
}