/* =========================================================================
   Satsuma Timeline — DESIGN: Animated (premium)
   Centred vertical timeline: the story TITLE rides on a gradient centre line
   that fills as you scroll; description cards slide + fade in from alternating
   sides. No date, no numbers.
   ========================================================================= */

.satsuma-tl--animated {
	--satsuma-tl-grad-a: var(--satsuma-tl-accent);
	--satsuma-tl-grad-b: #e8503f;
	padding: 30px 0;
}

.satsuma-tl--animated .satsuma-tl__list {
	position: relative;
}

/* Centre line (faint) with an animated gradient progress fill on top. */
.satsuma-tl--animated .satsuma-tl__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	margin-left: -2px;
	background: var(--satsuma-tl-line);
	border-radius: 4px;
	overflow: hidden;
	z-index: 0;
}

.satsuma-tl--animated .satsuma-tl__progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0; /* JS sets this as you scroll */
	background: linear-gradient(180deg, var(--satsuma-tl-grad-a), var(--satsuma-tl-grad-b));
	border-radius: 4px;
	transition: height 0.15s linear;
}

/* Each row: centred title marker on the line, card off to one side. */
.satsuma-tl--animated .satsuma-tl__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0 44px 0;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.satsuma-tl--animated .satsuma-tl__item.is-visible {
	opacity: 1;
	transform: none;
}

/* Title marker on the centre line. */
.satsuma-tl--animated .satsuma-tl__marker {
	margin: 0 0 18px 0;
	max-width: 72%;
	text-align: center;
	background: linear-gradient(135deg, var(--satsuma-tl-grad-a), var(--satsuma-tl-grad-b));
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	padding: 11px 22px;
	border-radius: 12px;
	border: 4px solid var(--satsuma-tl-card-bg);
	box-shadow: 0 0 0 2px var(--satsuma-tl-grad-a), 0 0 16px 2px rgba(199, 57, 45, 0.45);
	z-index: 3;
}
.satsuma-tl--animated .satsuma-tl__item.is-visible .satsuma-tl__marker {
	animation: satsuma-tl-pulse 2.4s ease-out infinite;
}

@keyframes satsuma-tl-pulse {
	0%   { box-shadow: 0 0 0 2px var(--satsuma-tl-grad-a), 0 0 0 0 rgba(199, 57, 45, 0.5); }
	70%  { box-shadow: 0 0 0 2px var(--satsuma-tl-grad-a), 0 0 0 16px rgba(199, 57, 45, 0); }
	100% { box-shadow: 0 0 0 2px var(--satsuma-tl-grad-a), 0 0 0 0 rgba(199, 57, 45, 0); }
}

/* Card sits on one side, sliding in from that side. */
.satsuma-tl--animated .satsuma-tl__card {
	width: 100%;
	max-width: 460px;
	position: relative;
	background: var(--satsuma-tl-card-bg);
	border: 1px solid var(--satsuma-tl-card-border);
	border-radius: var(--satsuma-tl-radius);
	box-shadow: var(--satsuma-tl-card-shadow);
	padding: var(--satsuma-tl-card-pad);
	transition: transform 0.6s ease, box-shadow 0.25s ease;
}
.satsuma-tl--animated .satsuma-tl__item--left .satsuma-tl__card {
	align-self: flex-start;
	transform: translateX(-30px);
}
.satsuma-tl--animated .satsuma-tl__item--right .satsuma-tl__card {
	align-self: flex-end;
	transform: translateX(30px);
}
.satsuma-tl--animated .satsuma-tl__item.is-visible .satsuma-tl__card {
	transform: none;
}
.satsuma-tl--animated .satsuma-tl__card:hover {
	box-shadow: 0 16px 34px rgba(199, 57, 45, 0.18);
}

/* Gradient accent strip down the card edge nearest the line. */
.satsuma-tl--animated .satsuma-tl__card::before {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--satsuma-tl-grad-a), var(--satsuma-tl-grad-b));
}
.satsuma-tl--animated .satsuma-tl__item--left .satsuma-tl__card::before {
	right: 0;
}
.satsuma-tl--animated .satsuma-tl__item--right .satsuma-tl__card::before {
	left: 0;
}

/* ---- Mobile: single column, cards full width ------------------------- */
@media (max-width: 768px) {
	.satsuma-tl--animated .satsuma-tl__line {
		left: 19px;
		margin-left: 0;
	}
	.satsuma-tl--animated .satsuma-tl__item {
		align-items: stretch;
		padding: 0 0 40px 0;
	}
	.satsuma-tl--animated .satsuma-tl__marker {
		align-self: flex-start;
		margin-left: 40px;
		max-width: calc(100% - 40px);
	}
	.satsuma-tl--animated .satsuma-tl__item--left .satsuma-tl__card,
	.satsuma-tl--animated .satsuma-tl__item--right .satsuma-tl__card {
		align-self: stretch;
		max-width: 100%;
		margin-left: 40px;
		transform: translateX(20px);
	}
	.satsuma-tl--animated .satsuma-tl__item.is-visible .satsuma-tl__card {
		transform: none;
	}
	.satsuma-tl--animated .satsuma-tl__item--left .satsuma-tl__card::before,
	.satsuma-tl--animated .satsuma-tl__item--right .satsuma-tl__card::before {
		left: 0;
		right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.satsuma-tl--animated .satsuma-tl__item,
	.satsuma-tl--animated .satsuma-tl__card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.satsuma-tl--animated .satsuma-tl__marker {
		animation: none !important;
	}
}