/**
 * Timeline — sticky sidebar with vertical timeline entries
 */

.module.timeline .container {
	align-items: start;
}

/*** Sidebar ***/

.module.timeline .timeline-sidebar {
	grid-column: 1 / 5;
	grid-row: 1;
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-small));
}

.module.timeline .timeline-sidebar .heading-2 {
	margin: 0 0 var(--text-spacing-xsmall);
}

/*** Entries ***/

.module.timeline .timeline-entries {
	border-left: 4px solid var(--wolfhound-gray);
	display: flex;
	flex-direction: column;
	gap: var(--module-spacing-large);
	grid-column: 6 / -1;
	grid-row: 1;
	padding-left: var(--text-spacing-large);
	position: relative;
}

/* Yellow progress line — animates over the gray border */

.module.timeline .timeline-entries::before {
	background: var(--goldie-yellow);
	content: '';
	height: var(--timeline-progress, 0px);
	left: -4px;
	position: absolute;
	top: 0;
	transition: height .6s ease;
	width: 4px;
	z-index: 1;
}

/*** Entry ***/

.module.timeline .timeline-entry {
	position: relative;
}

.module.timeline .timeline-entry::before {
	background: var(--wolfhound-gray);
	border: none;
	border-radius: 50%;
	content: '';
	height: 16px;
	left: calc(-1 * var(--text-spacing-large) - 10px);
	position: absolute;
	top: 2px;
	transition: background .3s ease, transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
	width: 16px;
	/* Above the last-child cover (z-index 2) so the scaled-up dot
	   isn't clipped by the cover at its bottom edge. */
	z-index: 3;
}

.module.timeline .timeline-entry:first-child::before {
	top: 0;
}

/* Hide the vertical line below the last dot by covering it
   with a strip matching the section background. */

.module.timeline .timeline-entry:last-child::after {
	background: var(--timeline-bg, var(--pitty-off-white));
	bottom: 0;
	content: '';
	left: calc(-1 * var(--text-spacing-large) - 4px);
	position: absolute;
	top: 18px;
	width: 4px;
	z-index: 2;
}

.module.timeline.background-appaloosa-beige .timeline-entry:last-child::after {
	background: var(--appaloosa-beige);
}

.module.timeline.background-russian-blue .timeline-entry:last-child::after {
	background: var(--russian-blue);
}

/** Activated State **/

.module.timeline .timeline-entry.animated-in::before {
	background: var(--goldie-yellow);
	transform: scale(1.4);
}

@keyframes timeline-blip {
	0% { transform: scale(1); }
	30% { transform: scale(1.6); }
	50% { transform: scale(1.15); }
	70% { transform: scale(1.4); }
	100% { transform: scale(1.25); }
}

.module.timeline .timeline-entry.animated-in::before {
	animation: timeline-blip .6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	background: var(--goldie-yellow);
}

.module.timeline .timeline-entry > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.timeline .timeline-entry > * + .media {
	margin-top: var(--text-spacing-medium);
}

.module.timeline .timeline-entry .media {
	border-radius: var(--border-radius-large);
}

.module.timeline .timeline-entry .media img {
	height: auto;
	max-height: 500px;
	max-width: 750px;
	position: relative;
	width: auto;
}

/** Dark Background (Russian Blue) **/

.module.timeline.background-russian-blue .eyebrow {
	color: var(--samoyed-white);
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.timeline .container {
		display: block;
	}

	.module.timeline .timeline-sidebar {
		margin-bottom: var(--text-spacing-large);
		position: relative;
		top: 0;
	}

	.module.timeline .timeline-entries {
		margin-top: var(--gap);
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.module.timeline .timeline-sidebar {
		margin-bottom: var(--text-spacing-medium);
	}

	.module.timeline .timeline-entries {
		gap: var(--module-spacing-small);
		padding-left: var(--text-spacing-medium);
	}

	.module.timeline .timeline-entry::before {
		height: 12px;
		left: calc(-1 * var(--text-spacing-medium) - 8px);
		width: 12px;
	}

	.module.timeline .timeline-entry:last-child::after {
		left: calc(-1 * var(--text-spacing-medium) - 4px);
		top: 14px;
	}

	.module.timeline .timeline-entry > * + .media {
		margin-top: var(--text-spacing-xsmall);
	}

}