/**
 * 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;
	/* overflow-x:auto also clips vertically, which sliced the first and last
	   card (and every card shadow) at the track edge. The track gets bleed room
	   inside, cancelled by an equal negative margin so layout does not move. */
	--pwd-tl-bleed: 40px;
	padding: var(--pwd-tl-bleed);
	margin: calc(var(--pwd-tl-bleed) * -1);
}

.pwd-anim--tl-h .pwd-tl::before,
.pwd-anim--tl-h .pwd-tl::after {
	left: var(--pwd-tl-bleed);
	right: var(--pwd-tl-bleed);
	height: var(--pwd-tl-thick);
	top: calc(var(--pwd-tl-bleed) + 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-bleed) + 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-tl-bleed: 0px;
	}

	.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;
	}
}