/* Timeline configuration */
.sax-history {
    --brown: #776046;
    --grey: #b0b5c0;
    --text: #5b6770;
    --height: 625px;
    --line-dot-size: 5px;
    --line-dot-gap: 10px;
    --marker-diagonal: 78.5px;
    --marker-dot-size: 16px;
    --marker-stroke-width: 2px;
    --marker-color: var(--grey);
    --copy-marker-gap: .5em;
    --arrow-size: 56px;
    --arrow-color: #fed12f;
    --arrow-hover-color: var(--grey);
    --pair-inner-dot-gap: 170px;
    --pair-gap: 50px;
    --copy-width: 275px;
    --copy-time-font-size: clamp(1rem, 3.5cqw, 1.9rem);
    --copy-time-margin-bottom: 0.5rem;
    --copy-text-font-size: clamp(0.8rem, 2.5cqw, 1.4rem);
    --copy-text-line-height: 1.9rem;
    --top-copy-min-height: 5.6rem;
    --font-family: "Barlow", sans-serif;
}

/* Responsive configuration */
@media (max-width: 767px) {
    .sax-history {
		--height: 475px;
		--line-dot-size: 3px;
		--line-dot-gap: 9px;
        --arrow-size: 36px;
		--marker-diagonal: 45px;
		--marker-dot-size: 10px;
        --pair-inner-dot-gap: 115px;
        --pair-gap: 45px;
        --copy-width: min(175px, var(--copy-available-width));
        --copy-time-margin-bottom: 0.4rem;
        --copy-paragraph-min-height: 3.8rem;
        --copy-paragraph-line-height: 1.3rem;
    }
}

/* Timeline layout */
.sax-history {
    --line-y: calc(var(--height) / 2);
    --line-dot-radius: calc(var(--line-dot-size) / 2);
    --marker-height: var(--marker-diagonal);
    --marker-width: calc(var(--marker-diagonal) + var(--marker-dot-size));
    --marker-line-length: calc(var(--marker-diagonal) * 1.4142135624); /* sqrt(2) */
    --marker-arrow-clearance: calc((var(--line-dot-size) + var(--line-dot-gap)) * 2);
    --safe-view-width: calc(100cqw - (var(--arrow-size) * 2) - (var(--marker-arrow-clearance) * 2));
    --copy-available-width: calc(var(--safe-view-width) - (var(--pair-inner-dot-gap) - var(--marker-diagonal)));
    position: relative;
    container-type: inline-size;
    width: 100%;
    height: var(--height);
    overflow: hidden;
    font-family: var(--font-family);
}

.sax-history__viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.sax-history__line {
    position: absolute;
    z-index: 1;
    top: calc(var(--line-y) - var(--line-dot-radius));
    left: 0;
    right: 0;
    height: var(--line-dot-size);
    background-image: radial-gradient(circle, var(--brown) 0 var(--line-dot-radius), transparent calc(var(--line-dot-radius) + .1px));
    background-size: calc(var(--line-dot-size) + var(--line-dot-gap)) var(--line-dot-size);
    background-repeat: repeat-x;
}

.sax-history__track {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: var(--pair-gap);
    width: max-content;
    height: var(--height);
    transform: translate3d(0,0,0);
    transition: transform .65s cubic-bezier(.65,0,.35,1);
    will-change: transform;
}

.sax-history__pair {
    position: relative;
    flex: 0 0 calc(var(--copy-width) + var(--pair-inner-dot-gap) - var(--marker-diagonal));
    width: calc(var(--copy-width) + var(--pair-inner-dot-gap) - var(--marker-diagonal));
    height: var(--height);
}

.sax-history__item {
    position: absolute;
    top: 0;
    width: var(--copy-width);
    height: var(--height);
    opacity: 1;
    transition: opacity .3s ease;
    will-change: opacity;
}

.sax-history__item--top {
    left: 0;
}

.sax-history__item--bottom {
    left: calc(var(--pair-inner-dot-gap) - var(--marker-diagonal));
}

.sax-history__item.is-faded {
    opacity: 0;
    pointer-events: none;
}

.sax-history__copy {
    position: absolute;
    z-index: 3;
    left: 0;
    width: var(--copy-width);
}

.sax-history__item--top .sax-history__copy {
	top: auto;
	bottom: calc(var(--height) - var(--line-y) + var(--marker-height) + var(--copy-marker-gap));
	min-height: var(--top-copy-min-height);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.sax-history__item--bottom .sax-history__copy {
    top: calc(var(--line-y) + var(--marker-height) + var(--copy-marker-gap));
}

.sax-history__copy time {
    display: block;
    margin: 0 0 var(--copy-time-margin-bottom);
    color: var(--grey);
    font-size: var(--copy-time-font-size);
    font-weight: 700;
    line-height: 1;
}

.sax-history__text {
    margin: 0;
    color: var(--text);
    font-size: var(--copy-text-font-size);
    font-weight: 400;
    line-height: var(--copy-text-line-height);
    white-space: normal;
    hyphens: auto;
    overflow-wrap: break-word;
}

.sax-history__text p {
    margin: 0;
    font-size: var(--copy-paragraph-font-size, inherit);
    line-height: var(--copy-paragraph-line-height, inherit);
    min-height: var(--copy-paragraph-min-height, var(--top-copy-min-height));
}

.sax-history__text strong {
    color: var(--brown);
    font-weight: 700;
}

.sax-history__marker {
    position: absolute;
    z-index: 2;
    display: block;
    width: var(--marker-width);
    height: var(--marker-height);
    overflow: visible;
}

.sax-history__marker::before,
.sax-history__marker::after {
    position: absolute;
    display: block;
    content: "";
}

.sax-history__marker::before {
    width: var(--marker-line-length);
    height: var(--marker-stroke-width);
    background: var(--marker-color);
    transform-origin: left center;
}

.sax-history__marker::after {
    width: var(--marker-dot-size);
    height: var(--marker-dot-size);
    border-radius: 50%;
    background: var(--marker-color);
}

.sax-history__marker--top {
    left: 0;
    top: auto;
    bottom: calc(var(--height) - var(--line-y));
}

.sax-history__marker--top::before {
    left: calc(var(--marker-dot-size) / 2);
    bottom: calc(var(--marker-stroke-width) / -2);
    transform: rotate(-45deg);
}

.sax-history__marker--top::after {
    left: 0;
    bottom: calc(var(--marker-dot-size) / -2);
}

.sax-history__marker--bottom {
    left: 0;
    top: var(--line-y);
}

.sax-history__marker--bottom::before {
    left: calc(var(--marker-width) - (var(--marker-dot-size) / 2));
    top: calc(var(--marker-stroke-width) / -2);
    transform: rotate(135deg);
}

.sax-history__marker--bottom::after {
    right: 0;
    top: calc(var(--marker-dot-size) / -2);
}

.sax-history__nav {
	position: absolute !important;
	z-index: 20;
	top: var(--line-y);
	width: var(--arrow-size) !important;
	height: var(--arrow-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: translateY(-50%) !important;
	transition: opacity .25s ease, visibility 0s !important;
	opacity: 1 !important;
	visibility: visible;
	cursor: pointer;
	line-height: 0 !important;
	appearance: none;
	-webkit-appearance: none;
}

.sax-history__nav:hover,
.sax-history__nav:focus,
.sax-history__nav:focus-visible,
.sax-history__nav:active {
	width: var(--arrow-size) !important;
	height: var(--arrow-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: translateY(-50%) !important;
	transition: opacity .25s ease, visibility 0s !important;
	opacity: 1 !important;
}

.sax-history__nav:disabled {
	cursor: default;
	opacity: 0 !important;
	pointer-events: none;
	visibility: hidden;
	transition: opacity .25s ease, visibility 0s linear .25s !important;
}

.sax-history__nav--prev {
	left: 0;
}

.sax-history__nav--next {
	right: 0;
}

.sax-history__nav svg,
.sax-history__nav:hover svg,
.sax-history__nav:focus svg,
.sax-history__nav:focus-visible svg,
.sax-history__nav:active svg {
	display: block;
	width: var(--arrow-size) !important;
	height: var(--arrow-size) !important;
	max-width: none !important;
	transform: none !important;
	transition: none !important;
}


.sax-history__nav svg circle {
	fill: var(--arrow-color);
	transition: fill .25s ease !important;
}

.sax-history__nav:hover svg circle {
	fill: var(--arrow-hover-color);
}

.sax-history__nav svg path {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .sax-history__track,
    .sax-history__item {
        transition-duration: .01ms;
    }
}