/* Establish the positioning context for the timeline. */
.forty-two-timeline > div {
	position: relative;
}

.timeline__item {
	visibility: hidden;
}

.timeline__item.loaded {
	visibility: visible;
}

/* First column - initial state */
.forty-two-timeline .timeline__item--first {
	opacity: 0;
	transform: translateY(25px);
	transition: transform 0.5s, opacity 0.5s;
	transition-delay: 0.3s;
}

/* Last column - initial state */
.forty-two-timeline .timeline__item--last {
	opacity: 0;
	transform: translateY(45px);
	transition: transform 0.7s, opacity 0.8s;
	transition-delay: 0.5s;
}

/* First and last column - loaded state */
.forty-two-timeline .timeline__item--first.loaded,
.forty-two-timeline .timeline__item--last.loaded {
	opacity: 1;
	transform: translateY(0);
}

/**
 * Vertical line animation
 * The vertical line is a pseudo-element of the middle column.
 */

/* Establish positioning context */
.forty-two-timeline .timeline__item--line {
	position: relative;
	visibility: hidden;
	z-index: 1;
}

/* Vertical line - initial state */
.forty-two-timeline .timeline__item--line::before {
	background-color: inherit;
	content: "";
	display: block;
	height: 1px;
	inset: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	transform-origin: top;
	transition: height 1.5s, opacity 0.1s;
	transition-delay: 0.1s;
	visibility: hidden;
	width: 100%;
	z-index: -1;
}

/* Vertical line - loaded state */
.forty-two-timeline .timeline__item--line.loaded::before {
	height: 100%;
	opacity: 1;
	visibility: visible;
}

/* Middle column - inner text - initial state */
.forty-two-timeline .timeline__item--line > p {
	opacity: 0;
	transition: opacity 0.5s;
	transition-delay: 1.15s;
	visibility: hidden;
}

/* Middle column - inner text - loaded state */
.forty-two-timeline:not(.forty-two-timeline--circles) .timeline__item--line.loaded > p {
	opacity: 1;
	visibility: visible;
}

/**
 * Circle timeline
 * The circle timeline is a variation of the default timeline.
 */
.forty-two-timeline--circles .timeline__item--line > p {
	opacity: 1;
	position: relative;
	visibility: hidden;
}

/* Create the circles */
.forty-two-timeline--circles .timeline__item--line > p::after,
.forty-two-timeline--circles .timeline__item--line > p::before {
	background-color: inherit;
	border-radius: 50%;
	content: "";
	display: block;
	height: 1rem;
	left: calc(50% - 0.5rem);
	opacity: 0;
	position: absolute;
	top: calc(50% - 0.5rem);
	transition: opacity 0.4s, transform 0.6s;
	visibility: hidden;
	width: 1rem;
}

/* Foreground circle - initial state */
.forty-two-timeline--circles .timeline__item--line > p::before {
	transition-delay: 1s;
	z-index: 2;
}

/* Foreground circle - loaded state */
.forty-two-timeline--circles .timeline__item--line.loaded > p::before {
	opacity: 1;
	visibility: visible;
}

/* box shadow to timeline items */
.forty-two-timeline .timeline__item--last > .wp-block-group {
	box-shadow: rgba(0, 0, 0, 0.1) 0 10px 40px 0;
	position: relative;
}

.forty-two-timeline .timeline__item--last > .wp-block-group::before {
	border: 18px solid transparent;
	border-color: transparent #00274c transparent transparent;
	content: "";
	display: block;
	left: -42px;
	position: absolute;
	top: 24px;
}

@media (prefers-reduced-motion: reduce) {

	.forty-two-timeline *,
	.forty-two-timeline *::after,
	.forty-two-timeline *::before {
		opacity: 1 !important;
		transition: none !important;
		visibility: visible !important;
	}
}