/* ==========================================================================
   SITE PREVIEW CARD (.ksp)
   --------------------------------------------------------------------------
   Used in the Social & Ecommerce section. Each card shows a screenshot of
   a page that scrolls from top to bottom:
     - Desktop: on hover (or keyboard focus).
     - Touch:   first tap plays the scroll, second tap follows the link.
   Touch behaviour: assets/js/components/site-preview.js

   Parts:
     .ksp         the card (link wrapper)
     .ksp__shot   the scrolling screenshot
     .ksp__veil   dark overlay at rest
     .ksp__play   circular play badge
     .ksp__label  screen-reader-only label

   Per-card settings (set inline or on a modifier class):
     --ksp-image     the screenshot
     --ksp-duration  how long the scroll takes (default 8s)
     --ksp-ratio     shape of the visible window (default 16 / 10)
   ========================================================================== */

.ksp {
	--ksp-duration: 8s;
	--ksp-ratio: 16 / 10;

	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--ksp-ratio);
	overflow: hidden;
	background-color: var(--color-content-bg-alt);
	cursor: pointer;
}

/* The screenshot. Scrolling is a background-position transition. */
.ksp__shot {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--ksp-image);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	transition: background-position var(--ksp-duration) ease-in-out;
}

/* Dark veil over the screenshot at rest. */
.ksp__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	transition: opacity 0.35s ease;
}

/* Circular play badge, centred. The triangle is drawn with borders. */
.ksp__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(250, 247, 242, 0.9);
	border-radius: 50%;
	color: #faf7f2;
	opacity: 0.85;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ksp__play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 3px; /* optical centring of the triangle */
	border-left: 12px solid currentColor;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

/* Visually hidden label for screen readers. */
.ksp__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* --- Desktop: hover / focus plays the scroll ----------------------------- */

@media (hover: hover) and (pointer: fine) {
	.ksp:hover .ksp__shot,
	.ksp:focus-visible .ksp__shot {
		background-position: center bottom;
	}

	.ksp:hover .ksp__veil,
	.ksp:focus-visible .ksp__veil {
		opacity: 0;
	}

	.ksp:hover .ksp__play,
	.ksp:focus-visible .ksp__play {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.85);
	}
}


/* --- Touch: first tap adds .is-playing (see JS) -------------------------- */

@media (hover: none) {
	.ksp__play {
		pointer-events: auto;
	}

	.ksp.is-playing .ksp__shot {
		background-position: center bottom;
	}

	.ksp.is-playing .ksp__veil {
		opacity: 0;
	}

	.ksp.is-playing .ksp__play {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.85);
	}
}


/* --- Reduced motion: jump instead of scrolling --------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ksp__shot {
		transition-duration: 0.01ms;
	}
}