.timeline {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    align-items: center;
}

.timelineEntry {
	position: relative;
	display: flex;
	align-items: center;
}

.timelineEntry.completed::before,
.timelineEntry.current::before,
.timelineEntry.incomplete::before {
	content: "";
	position: absolute;
	left: -12px;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	z-index: 1;
}

.timelineEntry.completed::before {
	background: var(--green);
}

.timelineEntry.completed .timelineCtn {
    border-color: var(--green);
}

.timelineEntry.current::before {
	background: var(--purple);
    animation: pulseCurrent 1.5s ease-in-out infinite alternate;
}

@keyframes pulseCurrent {
	from { background: var(--purple); }
	to { background: var(--purple-light) }
}

.timelineEntry.current .timelineCtn {
    border-color: var(--purple);
}

.timelineEntry.incomplete::before {
	background: var(--orange-deep);
}

.timelineEntry.incomplete .timelineCtn {
    border-color: var(--orange-deep);
}

.timelineEntry > .siteIcon {
	position: absolute;
	left: -10px;
	z-index: 2;
	width: 25px;
	height: 25px;
}

.timelineCtn {
    position: relative;
    width: 320px;
    min-height: 110px;
    display: grid;
    place-items: center;
	text-align: center;
    margin: 0;
    padding: 13px 25px;
    background: var(--bg-1);
    border: var(--border-3);
    border-width: 2px;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
	overflow: hidden;
}

.entryFront,
.entryBack {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.entryBack {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

.timelineCtn:hover .entryFront,
.timelineCtn:focus-visible .entryFront {
	opacity: 0;
	transform: translateY(-8px);
}

.timelineCtn:hover .entryBack,
.timelineCtn:focus-visible .entryBack {
	opacity: 1;
	transform: translateY(0);
}

.entryBack strong {
	color: var(--text-1);
	font-size: 1.05rem;
}

.entryBack span {
	color: var(--text-3);
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.3;
}

.timelineCtn h2 {
    color: var(--text-1);
    margin: 0;
    font-size: 1.45rem;
}

.timelineCtn span {
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-2);
}

.timelineCtn span:nth-child(3) {
    color: var(--text-3);
}

.timelineCtn time {
    font-weight: bold;
    color: var(--text-4);
    font-size: 1rem;
}

.entryBack span {
    color: var(--text-3);
}

.iconComplete {
    background: var(--green-darker);
}

.iconCurrent {
    background: var(--purple-darker);
}

.iconIncomplete {
    background: var(--orange-deep-darker);
}

.timelineSep-0,
.timelineSep-1,
.timelineSep-2,
.timelineSep-2-reverse,
.timelineSep-3,
.timelineSep-4,
.timelineSep-4-reverse,
.timelineSep-5,
.timelineSep-6,
.timelineSep-7 {
    height: 13px;
    width: 13px;
    margin: 0;
}

.timelineSep-0 {
    background: linear-gradient(180deg, transparent, var(--green));
}

.timelineSep-1 {
    background: var(--green);
}

.timelineSep-2 {
    background: linear-gradient(180deg, var(--green), var(--purple));
}

.timelineSep-2-reverse {
    background: linear-gradient(180deg, var(--purple), var(--green));
}

.timelineSep-3 {
    background: var(--purple);
}

.timelineSep-4 {
    background: linear-gradient(180deg, var(--purple), var(--orange-deep));
}

.timelineSep-4-reverse {
    background: linear-gradient(180deg, var(--orange-deep), var(--purple));
}

.timelineSep-5 {
    background: var(--orange-deep);
}

.timelineSep-6 {
    background: linear-gradient(180deg, var(--orange-deep), var(--sep-bg-1));
}

.timelineSep-7 {
    background: linear-gradient(180deg, var(--sep-bg-1), transparent);
}