/* Systical — Service Cards Slider */

.sys-ss {
	--ss-accent: #9afd0d;
	--ss-card-w: 380px;
	--ss-card-h: 560px;
	--ss-gap: 20px;
	--ss-speed: 40s;
	--ss-hover: 0.12s;
	position: relative;
	overflow: hidden;
	background: #070707;
}

.sys-ss__viewport {
	overflow: hidden;
}

.sys-ss__track {
	display: flex;
	gap: var(--ss-gap);
	width: max-content;
	will-change: transform;
	animation: sys-ss-marquee var(--ss-speed) linear infinite;
}

.sys-ss--reverse .sys-ss__track {
	animation-direction: reverse;
}

/* The card set is rendered twice, so a shift of exactly half the track
   lands on an identical frame and the loop has no seam. The gap is added
   back because it sits between the two halves too. */
@keyframes sys-ss-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-50% - (var(--ss-gap) / 2)), 0, 0);
	}
}

.sys-ss--pausable:hover .sys-ss__track,
.sys-ss__track:focus-within {
	animation-play-state: paused;
}

.sys-ss.is-dragging .sys-ss__track {
	animation-play-state: paused;
}

/* ---------- card ---------- */

.sys-ss__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 0 0 auto;
	width: var(--ss-card-w);
	height: var(--ss-card-h);
	padding: 26px;
	overflow: hidden;
	border-radius: 18px;
	background-color: #111;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
	transition: background-color var(--ss-hover, 0.12s) ease;
}

/* Scrim. Always present so the title stays legible over a busy photo, and
   deepened on hover so the revealed copy has enough contrast. */
.sys-ss__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.55) 32%,
		rgba(0, 0, 0, 0.05) 62%,
		rgba(0, 0, 0, 0) 100%
	);
	transition: opacity var(--ss-hover, 0.12s) ease,
		background var(--ss-hover, 0.12s) ease;
}

/* Frosted panel over the lower half of the card, instead of darkening the
   whole image on hover.

   The blur is declared up front and revealed with opacity rather than being
   transitioned from blur(0): backdrop-filter does not interpolate reliably
   across browsers, but opacity always does.

   The mask feathers the top edge so the blur dissolves into the photo instead
   of ending on a hard horizontal line. */
.sys-ss__card::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: var(--ss-blur-h, 50%);
	backdrop-filter: blur(var(--ss-blur, 14px));
	-webkit-backdrop-filter: blur(var(--ss-blur, 14px));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ss-hover, 0.12s) ease;
	-webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
	mask-image: linear-gradient(to top, #000 60%, transparent 100%);
}

.sys-ss__card:hover::before,
.sys-ss__card:focus-visible::before {
	opacity: 1;
}

.sys-ss__card:focus-visible {
	outline: 2px solid var(--ss-accent);
	outline-offset: 3px;
}

/* ---------- arrow ---------- */

.sys-ss__arrow {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--ss-accent);
	color: #070707;
	opacity: 0;
	transform: scale(0.6) translate(6px, -6px);
	transition: opacity calc(var(--ss-hover, 0.12s) * 0.8) ease,
		transform var(--ss-hover, 0.12s) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sys-ss__card:hover .sys-ss__arrow,
.sys-ss__card:focus-visible .sys-ss__arrow {
	opacity: 1;
	transform: scale(1) translate(0, 0);
}

.sys-ss__arrow svg {
	width: 24px;
	height: 24px;
}

/* ---------- body ---------- */

.sys-ss__body {
	position: relative;
	z-index: 1;
}

.sys-ss__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: #fff;
}

/* Reveal wrapper. grid-template-rows 0fr -> 1fr animates to the content's
   natural height, which max-height cannot do without guessing a value. */
.sys-ss__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--ss-hover, 0.12s) cubic-bezier(0.4, 0, 0.2, 1),
		opacity calc(var(--ss-hover, 0.12s) * 0.7) ease;
}

.sys-ss__reveal-inner {
	overflow: hidden;
	min-height: 0;
}

.sys-ss__card:hover .sys-ss__reveal,
.sys-ss__card:focus-visible .sys-ss__reveal {
	grid-template-rows: 1fr;
	opacity: 1;
}

.sys-ss__reveal--tags .sys-ss__tags {
	padding-bottom: 16px;
}

.sys-ss__reveal--desc .sys-ss__desc {
	padding-top: 14px;
}

/* ---------- tags ---------- */

.sys-ss__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sys-ss__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px 7px 8px;
	border-radius: 40px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.sys-ss__tag::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
}

/* ---------- description ---------- */

.sys-ss__desc {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	color: #e4e4e4;
}

/* ---------- edge fade ---------- */

.sys-ss--faded .sys-ss__viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 90px,
		#000 calc(100% - 90px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 90px,
		#000 calc(100% - 90px),
		transparent 100%
	);
}

/* ---------- drag ---------- */

.sys-ss--draggable .sys-ss__viewport {
	cursor: grab;
}

.sys-ss--draggable.is-dragging .sys-ss__viewport {
	cursor: grabbing;
}

.sys-ss.is-dragging .sys-ss__card {
	pointer-events: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-ss {
		--ss-card-w: 320px;
		--ss-card-h: 470px;
	}

	.sys-ss__title {
		font-size: 29px;
	}

	.sys-ss__arrow {
		width: 52px;
		height: 52px;
	}
}

@media (max-width: 767px) {
	.sys-ss {
		--ss-card-w: 260px;
		--ss-card-h: 380px;
		--ss-gap: 14px;
	}

	.sys-ss__card {
		padding: 20px;
	}

	.sys-ss__title {
		font-size: 24px;
	}

	.sys-ss__desc {
		font-size: 14px;
	}

	.sys-ss__arrow {
		width: 44px;
		height: 44px;
		top: 16px;
		right: 16px;
	}

	.sys-ss__arrow svg {
		width: 18px;
		height: 18px;
	}

	/* No hover on touch, so the reveal is always open — otherwise the tags
	   and description would be unreachable. */
	.sys-ss__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	.sys-ss__arrow {
		opacity: 1;
		transform: none;
	}

	/* No hover on touch, so the frost is simply on. */
	.sys-ss__card::before {
		opacity: 1;
	}
}

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

	.sys-ss__viewport {
		overflow-x: auto;
	}

	.sys-ss__reveal,
	.sys-ss__arrow,
	.sys-ss__card::after {
		transition: none;
	}
}