/**
 * EFFVIT Testimonial Marquee
 *
 * Vertical infinite-scroll columns. Motion is CSS-only so page-optimizer
 * "delay JavaScript" settings cannot break it.
 *
 * Everything sizes off --etm-scale, so scale:1.25 grows the whole row by 25%
 * without a second set of hand-tuned numbers.
 */

.etm {
	--etm-scale: 1;

	/* A scale tuned for a 1460px row is too heavy on a 380px phone, so the
	   author's scale is damped on smaller screens rather than applied flat.
	   --etm-s is the effective scale; nothing below uses --etm-scale directly. */
	--etm-breakpoint-damp: 1;
	--etm-s: calc(var(--etm-scale) * var(--etm-breakpoint-damp));

	/* Base geometry at scale 1. --etm-viewport deliberately uses the raw scale,
	   not --etm-s: the damp is applied once on the height property below, so an
	   explicit `height` override damps identically to a derived one. */
	--etm-viewport: calc(354px * var(--etm-scale));
	--etm-gap: calc(20px * var(--etm-s));
	--etm-col-gap: calc(20px * var(--etm-s));
	--etm-card-pad-y: calc(30px * var(--etm-s));
	--etm-card-pad-x: calc(30px * var(--etm-s));
	--etm-radius: calc(16px * var(--etm-s));

	/* Type. */
	--etm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--etm-font-meta: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--etm-font-quote: "Gilda Display", Georgia, "Times New Roman", serif;
	--etm-text-size: calc(16px * var(--etm-s));
	--etm-text-leading: 1.5;
	--etm-name-size: calc(14px * var(--etm-s));
	--etm-loc-size: calc(12px * var(--etm-s));
	--etm-quote-size: calc(52px * var(--etm-s));
	--etm-avatar: calc(36px * var(--etm-s));

	/* Colour, overridden by the theme modifiers below. */
	--etm-card-bg: #292929;
	--etm-card-border: rgba(255, 255, 255, 0.08);
	--etm-fg: #ffffff;
	--etm-fg-muted: rgba(255, 255, 255, 0.62);
	--etm-shadow: 0 calc(8px * var(--etm-s)) calc(28px * var(--etm-s)) rgba(0, 0, 0, 0.35);

	--etm-duration: 40s;

	position: relative;
	width: 100%;
}

.etm--light {
	--etm-card-bg: #ffffff;
	--etm-card-border: rgba(19, 32, 57, 0.1);
	--etm-fg: #132039;
	--etm-fg-muted: rgba(19, 32, 57, 0.6);
	--etm-shadow: 0 calc(8px * var(--etm-s)) calc(28px * var(--etm-s)) rgba(19, 32, 57, 0.08);
}

.etm__heading {
	margin: 0 0 calc(24px * var(--etm-s));
	text-align: center;
	color: var(--etm-fg);
	font-family: var(--etm-font-meta);
}

/* The viewport crops the columns and feathers them top and bottom so cards
   enter and leave rather than popping. */
.etm__viewport {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--etm-col-gap);
	height: calc(var(--etm-viewport) * var(--etm-breakpoint-damp));
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.etm__col {
	flex: 1 1 0;
	min-width: 0;
	max-width: calc(520px * var(--etm-s));
	height: 100%;
	overflow: hidden;
}

/* Columns beyond the first are progressively revealed with available width. */
.etm__col--2,
.etm__col--3,
.etm__col--4,
.etm__col--5,
.etm__col--6 {
	display: none;
}

@media (min-width: 768px) {
	.etm__col--2 {
		display: block;
	}
}

@media (min-width: 1024px) {
	.etm__col--3,
	.etm__col--4,
	.etm__col--5,
	.etm__col--6 {
		display: block;
	}
}

/* Damp the author's scale below the desktop breakpoint, and shorten the
   viewport with it so the row does not eat a phone screen. */
@media (max-width: 1023px) {
	.etm {
		--etm-breakpoint-damp: 0.9;
	}
}

@media (max-width: 767px) {
	.etm {
		--etm-breakpoint-damp: 0.78;
	}
}

/* The track holds the card list twice. Translating it -50% moves the second
   copy into exactly the position the first started from, so the loop is
   seamless. The trailing padding matches the gap, which is what keeps the two
   halves the same height. */
.etm__track {
	display: flex;
	flex-direction: column;
	gap: var(--etm-gap);
	padding-bottom: var(--etm-gap);
	will-change: transform;
	animation: etm-scroll var(--etm-duration) linear infinite;
}

@keyframes etm-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, -50%, 0);
	}
}

/* Hover pauses only until the steering script takes over. Once it adds
   .etm--steer, hover position drives playbackRate instead — and a paused
   animation ignores playbackRate entirely, so these two cannot both apply. */
.etm:not(.etm--steer):hover .etm__track,
.etm:focus-within .etm__track,
.etm[data-etm-paused] .etm__track {
	animation-play-state: paused;
}

.etm__card {
	display: block;
	box-sizing: border-box;
	padding: var(--etm-card-pad-y) var(--etm-card-pad-x);
	background: var(--etm-card-bg);
	border: 1px solid var(--etm-card-border);
	border-radius: var(--etm-radius);
	box-shadow: var(--etm-shadow);
	color: var(--etm-fg);
	text-align: center;
	margin: 0;
	text-decoration: none;
}

a.etm__card:hover,
a.etm__card:focus-visible {
	border-color: rgba(255, 255, 255, 0.24);
}

.etm--light a.etm__card:hover,
.etm--light a.etm__card:focus-visible {
	border-color: rgba(19, 32, 57, 0.28);
}

.etm__quote {
	display: block;
	font-family: var(--etm-font-quote);
	font-size: var(--etm-quote-size);
	line-height: 0.6;
	color: var(--etm-fg);
	text-align: left;
	margin-bottom: calc(14px * var(--etm-s));
}

.etm__text {
	margin: 0;
	border: 0;
	padding: 0;
	quotes: none;
	font-family: var(--etm-font-body);
	font-size: var(--etm-text-size);
	line-height: var(--etm-text-leading);
	font-weight: 400;
	color: var(--etm-fg);
}

.etm__text::before,
.etm__text::after {
	content: none;
}

.etm__who {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(10px * var(--etm-s));
	margin-top: calc(20px * var(--etm-s));
}

.etm__avatar {
	flex: 0 0 auto;
	width: var(--etm-avatar);
	height: var(--etm-avatar);
	border-radius: 50%;
	object-fit: cover;
}

.etm__avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--etm-card-border);
	font-family: var(--etm-font-meta);
	font-size: calc(12px * var(--etm-s));
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--etm-fg);
}

.etm--light .etm__avatar--initials {
	background: rgba(19, 32, 57, 0.06);
}

.etm__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	min-width: 0;
}

.etm__name {
	font-family: var(--etm-font-meta);
	font-size: var(--etm-name-size);
	font-weight: 600;
	line-height: 1.3;
	color: var(--etm-fg);
}

.etm__loc {
	font-family: var(--etm-font-meta);
	font-size: var(--etm-loc-size);
	font-weight: 400;
	line-height: 1.3;
	color: var(--etm-fg-muted);
}

/* Motion is decorative. Without it the row becomes a plain scrollable list,
   and the duplicate copy is removed so nothing reads twice. */
@media (prefers-reduced-motion: reduce) {
	.etm__viewport {
		height: auto;
		max-height: none;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
		align-items: stretch;
	}

	.etm__track {
		animation: none;
		padding-bottom: 0;
	}

	.etm__card[aria-hidden="true"] {
		display: none;
	}
}