.artbuild-timeline {
	--ab-line-x: 12px;
	--ab-dot-y: 7px;
	--ab-content-gap: 46px;
	--ab-line-width: 2px;
	--ab-line-base: rgba(255, 255, 255, 0.25);
	--ab-line-active: #fff;
	--ab-line-glow: rgba(255, 255, 255, 0.18);
	--ab-dot-size: 14px;
	--ab-dot-border-width: 2px;
	--ab-dot-base-fill: transparent;
	--ab-dot-base-border: rgba(255, 255, 255, 0.55);
	--ab-dot-active-fill: #111;
	--ab-dot-active-border: #111;
	--ab-dot-inner: #fff;
	--ab-dot-halo: rgba(255, 255, 255, 0.12);
	--ab-dot-halo-size: 5px;
	--ab-progress-duration: 80ms;
	--ab-inactive-opacity: .42;
	--ab-item-fade-duration: 450ms;

	position: relative;
	width: 100%;
	max-width: 650px;
	box-sizing: border-box;
	font-family: inherit;
}

.artbuild-timeline *,
.artbuild-timeline *::before,
.artbuild-timeline *::after {
	box-sizing: border-box;
}

.artbuild-timeline__items {
	position: relative;
	z-index: 2;
}

.artbuild-timeline__track {
	position: absolute;
	left: var(--ab-line-x);
	top: var(--ab-dot-y);
	bottom: var(--ab-dot-y);
	width: var(--ab-line-width);
	transform: translateX(-50%);
	background: var(--ab-line-base);
	border-radius: 999px;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

.artbuild-timeline__progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: var(--ab-line-active);
	border-radius: inherit;
	box-shadow: 0 0 10px var(--ab-line-glow), 0 0 24px var(--ab-line-glow);
	transition: height var(--ab-progress-duration) linear;
	will-change: height;
}

.artbuild-timeline__item {
	position: relative;
	padding-left: calc(var(--ab-line-x) + var(--ab-content-gap));
	margin: 0;
}

.artbuild-timeline__content {
	position: relative;
	min-width: 0;
}

.artbuild-timeline__dot {
	position: absolute;
	left: var(--ab-line-x);
	top: var(--ab-dot-y);
	width: var(--ab-dot-size);
	height: var(--ab-dot-size);
	transform: translate(-50%, -50%);
	border: var(--ab-dot-border-width) solid var(--ab-dot-base-border);
	border-radius: 50%;
	background: var(--ab-dot-base-fill);
	z-index: 4;
	transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.artbuild-timeline__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ab-dot-inner);
	transform: translate(-50%, -50%) scale(0);
	transition: transform .3s ease;
}

.artbuild-timeline__item.is-active .artbuild-timeline__dot {
	background: var(--ab-dot-active-fill);
	border-color: var(--ab-dot-active-border);
	box-shadow: 0 0 0 var(--ab-dot-halo-size) var(--ab-dot-halo);
}

.artbuild-timeline__item.is-active .artbuild-timeline__dot::after {
	transform: translate(-50%, -50%) scale(1);
}

.artbuild-timeline__year {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(12px, 1.1vw, 16px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.artbuild-timeline__year--large {
	font-size: clamp(30px, 3.5vw, 48px);
	line-height: .95;
	letter-spacing: -.04em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.22);
}

.artbuild-timeline__title {
	margin: 0 0 10px;
	padding: 0;
	color: #111;
	font-size: clamp(21px, 2vw, 30px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
}

.artbuild-timeline__text {
	max-width: 540px;
	margin: 0;
	padding: 0;
	color: rgba(17, 17, 17, 0.68);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 400;
	line-height: 1.65;
}

.artbuild-timeline__text > :first-child {
	margin-top: 0;
}

.artbuild-timeline__text > :last-child {
	margin-bottom: 0;
}

.artbuild-timeline__final {
	position: relative;
	margin-top: 24px;
	padding-left: 16px;
	color: #111;
	font-size: clamp(20px, 2vw, 30px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
}

.artbuild-timeline__final::before {
	content: "";
	position: absolute;
	left: 0;
	top: .08em;
	bottom: .08em;
	width: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
}

/* Voliteľné jemné stlmenie položiek pred aktiváciou.
 * Režim „Záverečný text nestlmiť“ aplikuje opacity iba na rok, nadpis a popis,
 * takže záverečný text aj jeho background ostanú vždy plne viditeľné.
 */
.artbuild-timeline[data-fade-inactive="yes"][data-final-always-visible="no"] .artbuild-timeline__content {
	opacity: var(--ab-inactive-opacity);
	transition: opacity var(--ab-item-fade-duration) ease;
	will-change: opacity;
}

.artbuild-timeline[data-fade-inactive="yes"][data-final-always-visible="no"] .artbuild-timeline__item.is-active .artbuild-timeline__content {
	opacity: 1;
}

.artbuild-timeline[data-fade-inactive="yes"][data-final-always-visible="yes"] .artbuild-timeline__content > :not(.artbuild-timeline__final) {
	opacity: var(--ab-inactive-opacity);
	transition: opacity var(--ab-item-fade-duration) ease;
	will-change: opacity;
}

.artbuild-timeline[data-fade-inactive="yes"][data-final-always-visible="yes"] .artbuild-timeline__item.is-active .artbuild-timeline__content > :not(.artbuild-timeline__final) {
	opacity: 1;
}

.artbuild-timeline[data-fade-inactive="yes"][data-final-always-visible="yes"] .artbuild-timeline__final {
	opacity: 1 !important;
}

/* Obsah sa pri hoveri ani pri scrollovaní neposúva. */
.artbuild-timeline__content,
.artbuild-timeline__year,
.artbuild-timeline__title,
.artbuild-timeline__text,
.artbuild-timeline__final {
	transform: none !important;
}

/* Elementor editor: obsah je vždy čitateľný aj keby JS handler nebežal. */
.elementor-editor-active .artbuild-timeline__item,
.elementor-editor-preview .artbuild-timeline__item {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 767px) {
	.artbuild-timeline {
		--ab-line-x: 6px;
		--ab-content-gap: 32px;
		--ab-dot-size: 12px;
	}

	.artbuild-timeline__title {
		font-size: clamp(20px, 6vw, 25px);
	}

	.artbuild-timeline__text {
		font-size: 14px;
		line-height: 1.55;
	}

	.artbuild-timeline__year--large {
		font-size: 31px;
	}

	.artbuild-timeline__final {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.artbuild-timeline__progress,
	.artbuild-timeline__dot,
	.artbuild-timeline__dot::after,
	.artbuild-timeline__content,
	.artbuild-timeline__content > * {
		transition: none !important;
	}
}
