/**
 * Pagina Poveste (journey): axă + „traseu parcurs” subtil (progres la scroll).
 */
#mn-journey-track {
	--mn-journey-progress: 0;
	position: relative;
}

/**
 * Axa: tot layout-ul aici (nu depinde de Tailwind / app.css recompilat).
 * Lățime fixă 2px — altfel clase gen w-[2px] pot lipsi din build și axa dispare.
 */
#mn-journey-track .mn-journey-spine {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translate3d(-50%, 0, 0);
	display: none;
	pointer-events: none;
	overflow: hidden;
}

@media (min-width: 768px) {
	#mn-journey-track .mn-journey-spine {
		display: block;
	}
}

/** Axa implicită — foarte discretă până vine traseul auriu */
#mn-journey-track .mn-journey-spine-track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		rgba(120, 112, 100, 0.16) 0%,
		rgba(100, 94, 86, 0.1) 50%,
		rgba(120, 112, 100, 0.14) 100%
	);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/** Traseu parcurs (scaleY) */
#mn-journey-track .mn-journey-spine-fill {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100%;
	transform-origin: top center;
	transform: scaleY(var(--mn-journey-progress, 0));
	border-radius: 999px 999px 0 0;
	opacity: 1;
	/**
	 * scaleY de sus: marginea vizibilă de jos = „vârful” progresului.
	 * Aur intens la bază (jos), ușor mai stins sus — altfel vârful părea decolorat când bara creștea.
	 */
	background: linear-gradient(
		180deg,
		rgba(233, 193, 118, 0.38) 0%,
		rgba(233, 193, 118, 0.55) 32%,
		rgba(233, 193, 118, 0.82) 72%,
		rgba(245, 212, 145, 0.98) 100%
	);
	box-shadow:
		0 0 10px rgba(233, 193, 118, 0.22),
		0 0 22px rgba(233, 193, 118, 0.08),
		inset 0 -1px 0 rgba(233, 193, 118, 0.35);
	will-change: transform;
}

/** Înainte de scroll: sugerează derularea — puls discret pe vârful auriu */
#mn-journey-track.mn-journey-idle .mn-journey-spine-fill {
	animation: mn-journey-invite-pulse 2.6s ease-in-out infinite;
}

@keyframes mn-journey-invite-pulse {
	0%,
	100% {
		opacity: 0.42;
		filter: brightness(0.88);
		box-shadow:
			0 0 5px rgba(233, 193, 118, 0.12),
			0 0 12px rgba(233, 193, 118, 0.06),
			inset 0 -1px 0 rgba(233, 193, 118, 0.12);
	}
	50% {
		opacity: 1;
		filter: brightness(1.08);
		box-shadow:
			0 0 14px rgba(233, 193, 118, 0.32),
			0 0 26px rgba(233, 193, 118, 0.12),
			inset 0 -1px 0 rgba(233, 193, 118, 0.28);
	}
}

@media (prefers-reduced-motion: reduce) {
	#mn-journey-track.mn-journey-idle .mn-journey-spine-fill {
		animation: none;
		opacity: 0.72;
		filter: none;
	}
}

.mn-journey-node-ring {
	transition:
		transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}

.mn-journey-node-dot {
	transition:
		transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1),
		box-shadow 0.35s ease;
}

.mn-journey-node--hot .mn-journey-node-ring {
	transform: scale(1.18);
	border-color: rgba(233, 193, 118, 0.75);
	box-shadow:
		0 0 0 1px rgba(233, 193, 118, 0.25),
		0 8px 28px rgba(0, 0, 0, 0.35);
	background-color: rgba(42, 42, 42, 1);
}

.mn-journey-node--hot .mn-journey-node-dot {
	transform: scale(1.35);
	box-shadow: 0 0 16px rgba(233, 193, 118, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.mn-journey-node-ring,
	.mn-journey-node-dot {
		transition-duration: 0.01ms;
	}

	.mn-journey-node--hot .mn-journey-node-ring {
		transform: scale(1.06);
	}

	.mn-journey-node--hot .mn-journey-node-dot {
		transform: scale(1.1);
	}
}