/* Sketch Suite — Work Carousel
   A constantly moving row of work cards: one shared height, widths that vary
   card to card, looping seamlessly because the set is rendered twice.
*/

.skwk {
	box-sizing: border-box;
	/* Break out of any constrained content container so the row spans the
	   full viewport width regardless of where it's dropped in. */
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	background: var(--skwk-bg, #ffffff);
	/* Belt-and-braces full-bleed: paint the bg out beyond the box so a
	   constrained parent's background can't show at the sides. */
	box-shadow: 0 0 0 100vmax var(--skwk-bg, #ffffff);
	clip-path: inset(0 -100vmax);
	/* Uniform scale on card height, gap and the marquee translate, so the
	   loop stays seamless when everything shrinks on smaller screens. */
	--skwk-scale: 1;
}
.skwk *,
.skwk *::before,
.skwk *::after { box-sizing: border-box; }

.skwk-stage {
	position: relative;
	width: 100%;
	padding: var(--skwk-pad-y, 15px) 0;
	overflow: hidden;
}

/* ── Heading ──────────────────────────────────────────────── */

.skwk-heading {
	margin: 0 0 28px;
	text-align: center;
	color: var(--skwk-text, #111111);
	font-family: inherit;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ── Track ────────────────────────────────────────────────── */

.skwk-viewport {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	height: calc(var(--skwk-card-h, 420px) * var(--skwk-scale, 1));
}

/* Optional soft dissolve into the section background at both edges;
   with the fade at 0 this is a no-op mask and the cards run to the edge. */
.skwk-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--skwk-fade, 0px),
		#000 calc(100% - var(--skwk-fade, 0px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--skwk-fade, 0px),
		#000 calc(100% - var(--skwk-fade, 0px)),
		transparent 100%
	);
}

.skwk-track {
	display: flex;
	align-items: stretch;
	gap: calc(var(--skwk-gap, 24px) * var(--skwk-scale, 1));
	padding-right: calc(var(--skwk-gap, 24px) * var(--skwk-scale, 1)); /* trailing gap keeps set-1 → set-2 even */
	width: max-content;
	will-change: transform;
	animation: skwk-marquee var(--skwk-duration, 60s) linear infinite;
}

.skwk--right .skwk-track { animation-direction: reverse; }

@keyframes skwk-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--skwk-set-w) * var(--skwk-scale, 1)), 0, 0); }
}

/* The row is meant to be constant — it doesn't pause on hover. Motion
   preferences still win. */
@media (prefers-reduced-motion: reduce) {
	.skwk-track { animation: none; }
	.skwk-viewport { overflow-x: auto; }
}

/* ── Cards ────────────────────────────────────────────────── */

.skwk-card {
	flex: 0 0 auto;
	position: relative;
	height: calc(var(--skwk-card-h, 420px) * var(--skwk-scale, 1));
	width: calc(var(--skwk-card-w, 480px) * var(--skwk-scale, 1));
	border-radius: var(--skwk-radius, 18px);
	background: var(--skwk-card-bg, #f4f4f2);
	overflow: hidden;
	display: block;
	text-decoration: none;
	color: inherit;
}

.skwk--bordered .skwk-card {
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

/* Images and videos are interchangeable inside a card — both fill it. */
.skwk-card img,
.skwk-card video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--skwk-fit, cover);
	object-position: center;
	pointer-events: none; /* the card, not the video, owns the click */
	background: var(--skwk-card-bg, #f4f4f2);
}

/* Vimeo cards. An iframe can't be object-fit, so the player is grown to
   whichever size covers the card at its own aspect ratio and centred — the
   overflow is clipped by the card, which is what makes an explicit width
   crop the video rather than letterbox it. */
.skwk-embed {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: var(--skwk-card-bg, #f4f4f2);
	pointer-events: none; /* the card, not the player, owns the click */
	--skwk-cw: calc(var(--skwk-card-w, 480px) * var(--skwk-scale, 1));
	--skwk-ch: calc(var(--skwk-card-h, 420px) * var(--skwk-scale, 1));
}

.skwk-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	width: max(var(--skwk-cw), calc(var(--skwk-ch) * var(--skwk-embed-ar, 1.7778)));
	height: max(var(--skwk-ch), calc(var(--skwk-cw) / var(--skwk-embed-ar, 1.7778)));
}

/* "Fit inside" applies to embeds too: show the whole frame, letterboxed. */
.skwk[style*="--skwk-fit:contain"] .skwk-embed iframe {
	width: min(var(--skwk-cw), calc(var(--skwk-ch) * var(--skwk-embed-ar, 1.7778)));
	height: min(var(--skwk-ch), calc(var(--skwk-cw) / var(--skwk-embed-ar, 1.7778)));
}

/* Linked cards get the smallest possible acknowledgement of the pointer —
   the row itself never stops moving. */
a.skwk-card img,
a.skwk-card video {
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.skwk-card:hover img,
a.skwk-card:hover video {
	transform: scale(1.03);
}

/* ── Smaller screens ──────────────────────────────────────── */

@media (max-width: 1024px) {
	.skwk { --skwk-scale: 0.8; }
	.skwk-stage { padding: calc(var(--skwk-pad-y, 15px) * 0.8) 0; }
}

@media (max-width: 768px) {
	.skwk { --skwk-scale: 0.62; }
	.skwk-stage { padding: calc(var(--skwk-pad-y, 15px) * 0.65) 0; }
}

@media (max-width: 480px) {
	.skwk { --skwk-scale: 0.5; }
}