/**
 * PWD Animations - Timeline widget stylesheet.
 * Loaded together with pwd-animations-core.css.
 */

/* =========================================================================
 * Timeline widget
 *
 * One DOM structure (.pwd-tl > .pwd-tl__item > marker + card) drives five
 * designs and both orientations via modifier classes. Reveal animations are
 * opt-in: JS adds .pwd-anim--tl-js only on the frontend when motion is
 * allowed, so no-JS, editor and reduced-motion visitors always see the
 * finished, fully readable timeline with the line filled.
 * ---------------------------------------------------------------------- */
.pwd-anim--timeline {
	--pwd-tl-line: #333333;
	--pwd-tl-fill: var(--pwd-c1, #ff7a1a);
	--pwd-tl-marker-bg: #161616;
	--pwd-tl-marker-active: var(--pwd-tl-fill);
	--pwd-tl-marker: 46px;
	--pwd-tl-marker-radius: 50%;
	--pwd-tl-marker-bw: 2px;
	--pwd-tl-thick: 3px;
	--pwd-tl-gap: 34px;
	--pwd-tl-card-w: 300px;
	--pwd-tl-half: 150px;
	--pwd-progress: 1;
	--pwd-stagger: 120ms;
	--pwd-slide: 28px;
	--pwd-speed: 0.6s;
	width: 100%;
}

.pwd-tl {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* ---- Marker ---- */
.pwd-tl__marker {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: var(--pwd-tl-marker);
	height: var(--pwd-tl-marker);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--pwd-tl-marker-radius);
	background: var(--pwd-tl-marker-bg);
	border: var(--pwd-tl-marker-bw) solid var(--pwd-tl-fill);
	color: var(--pwd-tl-fill);
}

.pwd-tl__marker i,
.pwd-tl__marker svg {
	font-size: var(--pwd-tl-icon, calc(var(--pwd-tl-marker) * 0.42));
	width: 1em;
	height: 1em;
	line-height: 1;
	fill: currentColor;
}

.pwd-tl__num {
	font-size: var(--pwd-tl-icon, calc(var(--pwd-tl-marker) * 0.4));
	font-weight: 700;
	line-height: 1;
}

.pwd-tl__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

/* ---- Card ---- */
.pwd-tl__card {
	position: relative;
	box-sizing: border-box;
	background-color: #161616;
	border-radius: var(--pwd-radius, 14px);
	padding: 20px 22px;
}

.pwd-tl__date {
	display: inline-block;
	color: var(--pwd-tl-fill);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.pwd-tl__title {
	margin: 0 0 8px;
	color: #fff;
}

.pwd-tl__content {
	color: #d6d6d6;
}

.pwd-tl__content :last-child {
	margin-bottom: 0;
}

.pwd-tl__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pwd-tl__cta .pwd-tl__cta-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.pwd-tl__cta .pwd-tl__cta-icon i,
.pwd-tl__cta .pwd-tl__cta-icon svg {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
	fill: currentColor;
}

/* Icon with no text: a square button (round with a large radius) */
.pwd-tl__cta.pwd-tl__cta--icononly {
	aspect-ratio: 1 / 1;
}

/* ---- Base track + fill (::before = track, ::after = progress fill) ---- */
.pwd-tl::before,
.pwd-tl::after {
	content: "";
	position: absolute;
	border-radius: 9px;
	pointer-events: none;
}

.pwd-tl::before {
	background: var(--pwd-tl-line);
}

.pwd-tl::after {
	background: var(--pwd-tl-fill);
	transition: transform 0.15s linear;
}

/* ============================ Vertical layout =========================== */
.pwd-anim--tl-v .pwd-tl {
	display: flex;
	flex-direction: column;
	gap: var(--pwd-tl-gap);
}

.pwd-anim--tl-v .pwd-tl::before,
.pwd-anim--tl-v .pwd-tl::after {
	top: 0;
	bottom: 0;
	width: var(--pwd-tl-thick);
}

.pwd-anim--tl-v .pwd-tl::after {
	height: 100%;
	transform-origin: top center;
	transform: scaleY(var(--pwd-progress));
}

.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl::before,
.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl::after {
	left: 50%;
	margin-left: calc(var(--pwd-tl-thick) / -2);
}

.pwd-anim--tl-v.pwd-anim--tl-side-left .pwd-tl::before,
.pwd-anim--tl-v.pwd-anim--tl-side-left .pwd-tl::after {
	left: calc(var(--pwd-tl-marker) / 2);
	margin-left: calc(var(--pwd-tl-thick) / -2);
}

.pwd-anim--tl-v.pwd-anim--tl-side-right .pwd-tl::before,
.pwd-anim--tl-v.pwd-anim--tl-side-right .pwd-tl::after {
	right: calc(var(--pwd-tl-marker) / 2);
	margin-right: calc(var(--pwd-tl-thick) / -2);
}

.pwd-anim--tl-v .pwd-tl__item {
	position: relative;
	display: grid;
	align-items: center;
	column-gap: var(--pwd-tl-gap);
}

.pwd-anim--tl-v.pwd-anim--tl-side-left .pwd-tl__item {
	grid-template-columns: var(--pwd-tl-marker) 1fr;
}

.pwd-anim--tl-v.pwd-anim--tl-side-left .pwd-tl__marker {
	grid-column: 1;
}

.pwd-anim--tl-v.pwd-anim--tl-side-left .pwd-tl__card {
	grid-column: 2;
}

.pwd-anim--tl-v.pwd-anim--tl-side-right .pwd-tl__item {
	grid-template-columns: 1fr var(--pwd-tl-marker);
}

.pwd-anim--tl-v.pwd-anim--tl-side-right .pwd-tl__marker {
	grid-column: 2;
}

.pwd-anim--tl-v.pwd-anim--tl-side-right .pwd-tl__card {
	grid-column: 1;
	text-align: right;
}

.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item {
	grid-template-columns: 1fr var(--pwd-tl-marker) 1fr;
}

.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__marker {
	grid-column: 2;
	justify-self: center;
}

.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(odd) .pwd-tl__card {
	grid-column: 1;
	text-align: right;
}

.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(even) .pwd-tl__card {
	grid-column: 3;
	text-align: left;
}

/* =========================== Horizontal layout ========================== */
.pwd-anim--tl-h .pwd-tl {
	display: flex;
	flex-direction: row;
	gap: var(--pwd-tl-gap);
	overflow-x: auto;
	padding-bottom: 4px;
}

.pwd-anim--tl-h .pwd-tl::before,
.pwd-anim--tl-h .pwd-tl::after {
	left: 0;
	right: 0;
	height: var(--pwd-tl-thick);
	top: calc(var(--pwd-tl-half) + var(--pwd-tl-marker) / 2 - var(--pwd-tl-thick) / 2);
}

.pwd-anim--tl-h .pwd-tl::after {
	transform-origin: left center;
	transform: scaleX(var(--pwd-progress));
}

.pwd-anim--tl-h .pwd-tl__item {
	position: relative;
	flex: 0 0 var(--pwd-tl-card-w);
	display: grid;
	justify-items: center;
	grid-template-rows: var(--pwd-tl-half) var(--pwd-tl-marker) var(--pwd-tl-half);
}

.pwd-anim--tl-h .pwd-tl__marker {
	grid-row: 2;
	align-self: center;
}

.pwd-anim--tl-h .pwd-tl__card {
	width: 100%;
	overflow: auto;
	max-height: 100%;
}

.pwd-anim--tl-h.pwd-anim--tl-pos-above .pwd-tl__card {
	grid-row: 1;
	align-self: end;
}

.pwd-anim--tl-h.pwd-anim--tl-pos-below .pwd-tl__card {
	grid-row: 3;
	align-self: start;
}

.pwd-anim--tl-h.pwd-anim--tl-pos-alternate .pwd-tl__item:nth-child(odd) .pwd-tl__card {
	grid-row: 1;
	align-self: end;
}

.pwd-anim--tl-h.pwd-anim--tl-pos-alternate .pwd-tl__item:nth-child(even) .pwd-tl__card {
	grid-row: 3;
	align-self: start;
}

/* ============================== Dashed line ============================= */
.pwd-anim--tl-dash.pwd-anim--tl-v .pwd-tl::before {
	background: repeating-linear-gradient(to bottom, var(--pwd-tl-line) 0 8px, transparent 8px 16px);
}

.pwd-anim--tl-dash.pwd-anim--tl-h .pwd-tl::before {
	background: repeating-linear-gradient(to right, var(--pwd-tl-line) 0 8px, transparent 8px 16px);
}

/* ========================= Design: Milestone =========================== */
.pwd-anim--tl-milestone .pwd-tl::before,
.pwd-anim--tl-milestone .pwd-tl::after {
	display: none;
}

.pwd-anim--tl-milestone .pwd-tl__card {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.pwd-anim--tl-milestone .pwd-tl__marker {
	box-shadow: 0 0 0 6px rgba(255, 122, 26, 0.12);
}

/* ========================= Design: Progress ============================ */
.pwd-anim--tl-progress .pwd-tl__marker {
	transition: background-color var(--pwd-speed) ease, color var(--pwd-speed) ease, box-shadow var(--pwd-speed) ease;
}

.pwd-anim--tl-progress .pwd-tl__item.is-active .pwd-tl__marker,
.pwd-anim--tl-progress:not(.pwd-anim--tl-js) .pwd-tl__marker {
	background: var(--pwd-tl-marker-active);
	color: #fff;
	box-shadow: 0 0 var(--pwd-glow, 14px) var(--pwd-tl-fill);
}

/* ========================= Design: Gradient ============================ */
.pwd-anim--tl-gradient.pwd-anim--tl-v .pwd-tl::after {
	background: linear-gradient(180deg, var(--pwd-c1), var(--pwd-c2), var(--pwd-c3), var(--pwd-c1));
	background-size: 100% 300%;
	animation: pwd-tl-flow-v 3s linear infinite;
}

.pwd-anim--tl-gradient.pwd-anim--tl-h .pwd-tl::after {
	background: linear-gradient(90deg, var(--pwd-c1), var(--pwd-c2), var(--pwd-c3), var(--pwd-c1));
	background-size: 300% 100%;
	animation: pwd-tl-flow-h 3s linear infinite;
}

@keyframes pwd-tl-flow-v {
	to {
		background-position: 0 -300%;
	}
}

@keyframes pwd-tl-flow-h {
	to {
		background-position: -300% 0;
	}
}

.pwd-anim--tl-gradient .pwd-tl__marker {
	border-color: transparent;
	background:
		linear-gradient(var(--pwd-tl-marker-bg), var(--pwd-tl-marker-bg)) padding-box,
		conic-gradient(from 0deg, var(--pwd-c1), var(--pwd-c2), var(--pwd-c3), var(--pwd-c1)) border-box;
}

/* ========================== Design: Snake ============================== */
.pwd-anim--tl-snake.pwd-anim--tl-h .pwd-tl::before,
.pwd-anim--tl-snake.pwd-anim--tl-h .pwd-tl::after {
	height: 20px;
	top: calc(var(--pwd-tl-half) + var(--pwd-tl-marker) / 2 - 10px);
	border-radius: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 15 L10 5 L20 15 L30 5 L40 15' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") repeat-x center / 40px 20px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 15 L10 5 L20 15 L30 5 L40 15' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") repeat-x center / 40px 20px;
}

.pwd-anim--tl-snake.pwd-anim--tl-v .pwd-tl::before,
.pwd-anim--tl-snake.pwd-anim--tl-v .pwd-tl::after {
	width: 20px;
	margin-left: -10px;
	margin-right: -10px;
	border-radius: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cpath d='M15 0 L5 10 L15 20 L5 30 L15 40' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") repeat-y center / 20px 40px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cpath d='M15 0 L5 10 L15 20 L5 30 L15 40' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E") repeat-y center / 20px 40px;
}

/* ======================== Design: Image Cards ========================== */
.pwd-anim--tl-imagecards {
	--pwd-tl-img-h: 200px;
	--pwd-tl-sat: 0.4;
	--pwd-tl-zoom: 1.1;
	--pwd-tl-body-pad: 14px 18px;
	--pwd-tl-mt: 6px;
}

.pwd-anim--tl-imagecards.pwd-anim--tl-v .pwd-tl__item {
	align-items: start;
}

.pwd-anim--tl-imagecards .pwd-tl__marker {
	margin-top: var(--pwd-tl-mt);
}

.pwd-anim--tl-imagecards .pwd-tl__card {
	isolation: isolate;
	padding: 0;
	box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.18);
}

.pwd-anim--tl-imagecards .pwd-tl__card .pwd-tl__summary,
.pwd-anim--tl-imagecards .pwd-tl__card .pwd-tl__body,
.pwd-anim--tl-imagecards .pwd-tl__card .pwd-tl__content {
	text-align: left;
}

/* Image: the Elementor and theme img rules are out-ranked by three classes */
.pwd-anim--tl-imagecards .pwd-tl__media {
	height: var(--pwd-tl-img-h);
	overflow: hidden;
	border-radius: var(--pwd-radius, 14px) var(--pwd-radius, 14px) 0 0;
}

.pwd-anim--tl-imagecards .pwd-tl__media .pwd-tl__cardimg {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.4s ease, filter 0.4s ease;
}

@media (hover: hover) {
	.pwd-anim--tl-imagecards .pwd-tl__media .pwd-tl__cardimg {
		filter: saturate(var(--pwd-tl-sat));
	}

	.pwd-anim--tl-imagecards .pwd-tl__card:hover .pwd-tl__cardimg,
	.pwd-anim--tl-imagecards .pwd-tl__card:focus-within .pwd-tl__cardimg {
		filter: saturate(1);
		transform: scale(var(--pwd-tl-zoom));
	}
}

/* Title bar (summary) and text */
.pwd-anim--tl-imagecards .pwd-tl__details {
	display: block;
	overflow: hidden;
}

.pwd-anim--tl-imagecards .pwd-tl__card > .pwd-tl__details:first-child {
	border-top-left-radius: var(--pwd-radius, 14px);
	border-top-right-radius: var(--pwd-radius, 14px);
}

.pwd-anim--tl-imagecards .pwd-tl__card > .pwd-tl__details:last-child {
	border-bottom-left-radius: var(--pwd-radius, 14px);
	border-bottom-right-radius: var(--pwd-radius, 14px);
}

.pwd-anim--tl-imagecards .pwd-tl__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: var(--pwd-tl-body-pad);
	cursor: pointer;
	list-style: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.pwd-anim--tl-imagecards .pwd-tl__summary::-webkit-details-marker {
	display: none;
}

.pwd-anim--tl-imagecards .pwd-tl__summary::marker {
	content: "";
}

.pwd-anim--tl-imagecards .pwd-tl__summary::after {
	content: "";
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease, margin 0.3s ease;
}

.pwd-anim--tl-imagecards .pwd-tl__details[open] > .pwd-tl__summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.pwd-anim--tl-imagecards .pwd-tl__summary:focus-visible {
	outline: 2px solid var(--pwd-tl-fill);
	outline-offset: -2px;
}

.pwd-anim--tl-imagecards .pwd-tl__details[open] > .pwd-tl__summary {
	background-color: var(--pwd-tl-fill);
	color: #fff;
}

.pwd-anim--tl-imagecards .pwd-tl__details[open] > .pwd-tl__summary .pwd-tl__date {
	color: inherit;
	opacity: 0.85;
}

.pwd-anim--tl-imagecards .pwd-tl__sumtext {
	display: block;
	min-width: 0;
}

.pwd-anim--tl-imagecards .pwd-tl__summary .pwd-tl__title {
	margin: 0;
}

.pwd-anim--tl-imagecards .pwd-tl__body,
.pwd-anim--tl-imagecards .pwd-tl__details .pwd-tl__content {
	padding: var(--pwd-tl-body-pad);
}

.pwd-anim--tl-imagecards .pwd-tl__body .pwd-tl__title {
	margin-top: 0;
}

.pwd-anim--tl-imagecards .pwd-tl__details .pwd-tl__content {
	padding-top: 14px;
}

/* Smooth open and close where the browser can animate details content */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
	.pwd-anim--tl-imagecards .pwd-tl__details {
		interpolate-size: allow-keywords;
	}

	.pwd-anim--tl-imagecards .pwd-tl__details::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
	}

	.pwd-anim--tl-imagecards .pwd-tl__details[open]::details-content {
		block-size: auto;
	}
}

/* Footer button */
.pwd-anim--tl-imagecards .pwd-tl__foot {
	display: flex;
	justify-content: center;
	padding: 0 18px 16px;
}

/* Pointer arrow: a rotated square in the card colour, behind the card content */
.pwd-anim--tl-imagecards.pwd-anim--tl-arrow .pwd-tl__card::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--pwd-tl-mt) + var(--pwd-tl-marker) / 2 - 7px);
	width: 14px;
	height: 14px;
	background: inherit;
	transform: rotate(45deg);
}

.pwd-anim--tl-imagecards.pwd-anim--tl-arrow.pwd-anim--tl-side-left .pwd-tl__card::before,
.pwd-anim--tl-imagecards.pwd-anim--tl-arrow.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(even) .pwd-tl__card::before {
	left: -7px;
}

.pwd-anim--tl-imagecards.pwd-anim--tl-arrow.pwd-anim--tl-side-right .pwd-tl__card::before,
.pwd-anim--tl-imagecards.pwd-anim--tl-arrow.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(odd) .pwd-tl__card::before {
	right: -7px;
}

@media (max-width: 767px) {
	/* Alternate collapses to one column on a phone: every card sits right of the spine */
	.pwd-anim--tl-imagecards.pwd-anim--tl-arrow.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(n) .pwd-tl__card::before {
		right: auto;
		left: -7px;
	}
}

/* =========================== Reveal animation ========================== */
.pwd-anim--tl-js .pwd-tl__card {
	transition: opacity var(--pwd-speed) ease, transform var(--pwd-speed) ease;
	transition-delay: var(--pwd-stagger);
}

.pwd-anim--tl-js .pwd-tl__marker {
	transition: opacity var(--pwd-speed) ease, transform var(--pwd-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hiding again on scroll up: no stagger wait, so the card leaves with its step */
.pwd-anim--tl-replay .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transition-delay: 0s;
}

/* Hidden (pre-reveal) states, skipped for the "None" reveal */
.pwd-anim--tl-js:not(.pwd-anim--tl-reveal-none) .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	opacity: 0;
}

.pwd-anim--tl-js:not(.pwd-anim--tl-reveal-none) .pwd-tl__item:not(.is-inview) .pwd-tl__marker {
	opacity: 0;
	transform: scale(0.5);
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-scale .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transform: scale(0.92);
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-flip .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transform: perspective(700px) rotateX(-18deg);
	transform-origin: top center;
}

/* Grow from the line: the card scales out from the corner nearest the line */
.pwd-anim--tl-reveal-grow.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(odd) .pwd-tl__card,
.pwd-anim--tl-reveal-grow.pwd-anim--tl-v.pwd-anim--tl-side-right .pwd-tl__card {
	transform-origin: 100% 0;
}

.pwd-anim--tl-reveal-grow.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(even) .pwd-tl__card,
.pwd-anim--tl-reveal-grow.pwd-anim--tl-v.pwd-anim--tl-side-left .pwd-tl__card {
	transform-origin: 0 0;
}

.pwd-anim--tl-reveal-grow.pwd-anim--tl-h.pwd-anim--tl-pos-above .pwd-tl__card,
.pwd-anim--tl-reveal-grow.pwd-anim--tl-h.pwd-anim--tl-pos-alternate .pwd-tl__item:nth-child(odd) .pwd-tl__card {
	transform-origin: 50% 100%;
}

.pwd-anim--tl-reveal-grow.pwd-anim--tl-h.pwd-anim--tl-pos-below .pwd-tl__card,
.pwd-anim--tl-reveal-grow.pwd-anim--tl-h.pwd-anim--tl-pos-alternate .pwd-tl__item:nth-child(even) .pwd-tl__card {
	transform-origin: 50% 0;
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-grow .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transform: scale(0.1);
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(odd):not(.is-inview) .pwd-tl__card {
	transform: translateX(calc(var(--pwd-slide) * -1));
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(even):not(.is-inview) .pwd-tl__card {
	transform: translateX(var(--pwd-slide));
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-v.pwd-anim--tl-side-left .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transform: translateX(var(--pwd-slide));
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-v.pwd-anim--tl-side-right .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transform: translateX(calc(var(--pwd-slide) * -1));
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-h.pwd-anim--tl-pos-above .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transform: translateY(calc(var(--pwd-slide) * -1));
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-h.pwd-anim--tl-pos-below .pwd-tl__item:not(.is-inview) .pwd-tl__card {
	transform: translateY(var(--pwd-slide));
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-h.pwd-anim--tl-pos-alternate .pwd-tl__item:nth-child(odd):not(.is-inview) .pwd-tl__card {
	transform: translateY(calc(var(--pwd-slide) * -1));
}

.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-h.pwd-anim--tl-pos-alternate .pwd-tl__item:nth-child(even):not(.is-inview) .pwd-tl__card {
	transform: translateY(var(--pwd-slide));
}

/* ===================== Horizontal → stack on mobile ==================== */
@media (max-width: 767px) {
	.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl {
		flex-direction: column;
		overflow-x: visible;
		gap: var(--pwd-tl-gap);
	}

	.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl::before,
	.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl::after {
		top: 0;
		bottom: 0;
		right: auto;
		left: calc(var(--pwd-tl-marker) / 2);
		width: var(--pwd-tl-thick);
		height: 100%;
		margin: 0;
	}

	.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl::after {
		transform-origin: top center;
		transform: scaleY(var(--pwd-progress));
	}

	.pwd-anim--tl-stack.pwd-anim--tl-snake.pwd-anim--tl-h .pwd-tl::before,
	.pwd-anim--tl-stack.pwd-anim--tl-snake.pwd-anim--tl-h .pwd-tl::after {
		-webkit-mask: none;
		mask: none;
	}

	.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl__item {
		grid-template-columns: var(--pwd-tl-marker) 1fr;
		grid-template-rows: auto;
		flex: 0 0 auto;
		column-gap: var(--pwd-tl-gap);
		align-items: center;
	}

	.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl__marker {
		grid-column: 1;
		grid-row: auto;
	}

	.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl__card {
		grid-column: 2;
		grid-row: auto;
		max-height: none;
		overflow: visible;
		align-self: center;
		text-align: left;
	}
}

/* ============ Vertical alternate → single column on mobile ============= */
@media (max-width: 767px) {
	/* Alternating cards get only ~half the width on a phone, which shreds the
	   text. Collapse to a single left-aligned column: spine on the left, every
	   card full width. */
	.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl::before,
	.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl::after {
		left: calc(var(--pwd-tl-marker) / 2);
		right: auto;
		margin-left: calc(var(--pwd-tl-thick) / -2);
		margin-right: 0;
	}

	.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item {
		grid-template-columns: var(--pwd-tl-marker) 1fr;
	}

	.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__marker {
		grid-column: 1;
		justify-self: start;
	}

	.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(odd) .pwd-tl__card,
	.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(even) .pwd-tl__card {
		grid-column: 2;
		text-align: left;
	}

	.pwd-anim--tl-reveal-grow.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(odd) .pwd-tl__card {
		transform-origin: 0 0;
	}

	/* Even cards would otherwise slide in from the right and briefly overflow
	   the viewport in the single-column layout — slide from the left instead. */
	.pwd-anim--tl-js.pwd-anim--tl-reveal-slide.pwd-anim--tl-v.pwd-anim--tl-side-alternate .pwd-tl__item:nth-child(even):not(.is-inview) .pwd-tl__card {
		transform: translateX(calc(var(--pwd-slide) * -1));
	}
}

/* ===================== Scroll-driven line fill (CSS) ==================== */
/* The script adds .pwd-anim--tl-cssfill only when the browser supports
   view() and no ancestor is a scroll container; otherwise it keeps filling the
   line from a scroll listener. The ranges reproduce that listener's maths:
   vertical fills between 55% of the viewport and the track's own height;
   horizontal (desktop) is stretched over a longer distance. */
@property --pwd-progress {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@keyframes pwd-tl-fill {
	from {
		--pwd-progress: 0;
	}
	to {
		--pwd-progress: 1;
	}
}

@supports (animation-timeline: view()) {
	.pwd-anim--tl-cssfill .pwd-tl {
		animation: pwd-tl-fill linear both;
		animation-timeline: view();
		animation-range: cover 45vh cover calc(100% - 55vh);
	}

	.pwd-anim--tl-cssfill.pwd-anim--tl-h .pwd-tl {
		animation-range: cover 15vh cover calc(100% - 45vh);
	}

	@media (max-width: 767px) {
		.pwd-anim--tl-cssfill.pwd-anim--tl-stack.pwd-anim--tl-h .pwd-tl {
			animation-range: cover 45vh cover calc(100% - 55vh);
		}
	}
}

/* ============================ Reduced motion =========================== */
@media (prefers-reduced-motion: reduce) {
	.pwd-anim--timeline {
		--pwd-progress: 1;
	}

	.pwd-anim--timeline .pwd-tl__card,
	.pwd-anim--timeline .pwd-tl__marker {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}