/**
 * Module: Timeline
 *
 * Every entry renders at full strength by default. The dimmed state exists only inside the
 * motion + scroll-timeline block at the bottom, where each entry brightens as its center reaches
 * the middle of the viewport and stays bright; reduced motion, browsers without scroll-driven
 * animations and a focused link inside an entry all skip it.
 */

/*** Module: Timeline ***/

.module.timeline {
	--texture-fade: 135%;
	--texture-opacity: 0.08;
}

.module.timeline.textured {
	padding-bottom: calc(var(--module-spacing-xlarge) + var(--text-spacing-large));
}

.module.timeline ol.container {
	display: flex;
	flex-direction: column;
	gap: var(--module-spacing-medium);
	list-style: none;
}

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

.module.timeline .title {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	grid-column: 2 / span 5;
}

.module.timeline .eyebrow {
	margin: 0;
}

.module.timeline .description {
	grid-column: 7 / span 5;
	margin-right: calc(var(--gap) * -1);
}

.module.timeline .description,
.module.timeline .description p {
	font-weight: 400;
}

.module.timeline .description :is(strong, b) {
	font-weight: 500;
}

.module.timeline .description > :first-child {
	margin-top: 0;
}

.module.timeline .description > :last-child {
	margin-bottom: 0;
}

/*** Scroll Brighten ***/

@media (prefers-reduced-motion: no-preference) {

	@keyframes timeline-label {
		from {
			color: var(--slate);
			opacity: 0.5;
		}
	}

	@keyframes timeline-heading {
		from {
			opacity: 0.5;
		}
	}

	@keyframes timeline-description {
		from {
			opacity: 0.25;
		}
	}

	@supports (animation-timeline: view()) {

		.module.timeline .item {
			view-timeline: --timeline-item block;
		}

		.module.timeline .item :is(.eyebrow, .heading-5, .description) {
			animation: timeline-heading linear both;
			animation-range: cover 30% cover 50%;
			animation-timeline: --timeline-item;
		}

		.module.timeline .item .eyebrow {
			animation-name: timeline-label;
		}

		.module.timeline .item .description {
			animation-name: timeline-description;
		}

		.module.timeline .item:focus-within :is(.eyebrow, .heading-5, .description) {
			animation: none;
		}

	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Small Desktop Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.timeline .title {
		grid-column: 1 / span 6;
	}

	.module.timeline .description {
		grid-column: 7 / span 6;
		margin-right: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.timeline .item {
		row-gap: var(--text-spacing-xsmall);
	}

	.module.timeline :is(.title, .description) {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.timeline ol.container {
		gap: var(--module-spacing-small);
	}

}