/* Sketch Suite — Text Scroller
   Infinite horizontal marquee of large repeating text, optionally a link.
   Two identical groups inside the track; the track animates 0 → -50% so the
   loop is seamless at any width.
*/

.sksc {
	box-sizing: border-box;
	display: block;
	/* Break out of any constrained content container so the band 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;
	padding: var(--sksc-margin, 0px);
	font-family: var(--sk-font, "Saans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	background: var(--sksc-bg, #ffffff);
	/* Paint the bg out beyond the box so a constrained parent's bg can't show
	   at the left/right edges of the band. */
	box-shadow: 0 0 0 100vmax var(--sksc-bg, #ffffff);
	clip-path: inset(0 -100vmax);
	color: var(--sksc-color, #111111);
	/* Uniform mobile down-scale applied to size + gap + translate together. */
	--sksc-scale: 1;
}
.sksc *,
.sksc *::before,
.sksc *::after { box-sizing: border-box; }

/* No underline in any state — beats theme `a:hover { text-decoration: underline }`. */
a.sksc,
a.sksc:hover,
a.sksc:focus,
a.sksc:active,
a.sksc:visited,
.sksc .sksc-item,
.sksc .sksc-item:hover { text-decoration: none; }

a.sksc { cursor: pointer; }

.sksc-viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--sksc-radius, 0px);
	padding: var(--sksc-pad-y, 24px) 0;
}

/* Optional soft fade into the background at the left/right edges. */
.sksc--fade .sksc-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--sksc-fade, 0px),
		#000 calc(100% - var(--sksc-fade, 0px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--sksc-fade, 0px),
		#000 calc(100% - var(--sksc-fade, 0px)),
		transparent 100%
	);
}

.sksc-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: sksc-marquee var(--sksc-duration, 30s) linear infinite;
}

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

.sksc-group {
	display: flex;
	flex: 0 0 auto;
	/* Vertically centre the image tiles against the large text. */
	align-items: center;
}

.sksc-item {
	flex: 0 0 auto;
	display: inline-block;
	white-space: nowrap;
	/* Trailing gap after every item (incl. the last in a group) keeps the
	   spacing even across the group → group seam. */
	margin-right: calc(var(--sksc-gap, 60px) * var(--sksc-scale, 1));
	font-size: calc(var(--sksc-size, 120px) * var(--sksc-scale, 1));
	font-weight: var(--sksc-weight, 700);
	letter-spacing: var(--sksc-letter, 0px);
	line-height: 1.05;
	color: inherit;
}

/* ── Square image tile between repeats ────────────────────── */
.sksc-img {
	flex: 0 0 auto;
	position: relative;
	display: block;
	/* Same scale + gap treatment as the text so it shrinks together. Tiles are
	   square unless a placement passes img_w for a wider one. */
	width: calc(var(--sksc-img-w, var(--sksc-img-size, 120px)) * var(--sksc-scale, 1));
	height: calc(var(--sksc-img-size, 120px) * var(--sksc-scale, 1));
	margin-right: calc(var(--sksc-gap, 60px) * var(--sksc-scale, 1));
	border-radius: calc(var(--sksc-img-radius, 16px) * var(--sksc-scale, 1));
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.sksc-img__layer {
	position: absolute;
	inset: 0;
	/* !important + max-width:none beat theme rules like
	   `img { max-width:100%; height:auto }` that would otherwise letterbox the
	   image inside the tile instead of filling it. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 0.12s linear;
}
.sksc-img__layer.is-active { opacity: 1; }

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

@media (prefers-reduced-motion: reduce) {
	.sksc-track { animation: none; }
}

.sksc--pause:hover .sksc-track {
	animation-play-state: paused;
}

/* Link hover treatment — text shifts to the hover colour. */
a.sksc .sksc-item { transition: color 0.25s ease; }
a.sksc:hover .sksc-item {
	color: var(--sksc-hover, inherit);
}

/* ── Cursor-follow pill ───────────────────────────────────── */
.sksc--pill { cursor: none; }

.sksc-pill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	background: var(--sksc-pill-bg, #111111);
	color: var(--sksc-pill-color, #ffffff);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	opacity: 0;
	/* Centre the pill on the cursor; --sksc-px/--sksc-py are set by the JS. */
	transform: translate3d(var(--sksc-px, 0px), var(--sksc-py, 0px), 0) translate(-50%, -50%) scale(0.85);
	transition: opacity 0.18s ease, transform 0.18s ease;
	will-change: transform;
}
.sksc--pill.is-hovering .sksc-pill {
	opacity: 1;
	transform: translate3d(var(--sksc-px, 0px), var(--sksc-py, 0px), 0) translate(-50%, -50%) scale(1);
}

/* Touch / no-hover devices: no custom cursor, no pill — keep it tappable. */
@media (hover: none) {
	.sksc--pill { cursor: pointer; }
	.sksc-pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sksc-pill { transition: opacity 0.18s ease; }
}

/* ── Responsive scale ─────────────────────────────────────── */
@media (max-width: 1024px) { .sksc { --sksc-scale: 0.7; } }
@media (max-width: 768px)  { .sksc { --sksc-scale: 0.5; } }
@media (max-width: 480px)  { .sksc { --sksc-scale: 0.4; } }