/* Motion Kit — Before / After. Needs core.css.
   --pos (a %) clips the before image and places the divider; --p is the same number without the
   unit, used to fade a label out when its side is nearly hidden. before-after.js updates both from
   the range input that covers the frame. */

.mkit-ba {
	width: 100%;
	margin: 0;
	color: var(--mkit-muted);
}

.mkit-ba__frame {
	position: relative;
	aspect-ratio: var(--ratio, 16/10);
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--mkit-card-radius, 18px);
	background: var(--mkit-chip-bg);
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.mkit-ba__layer {
	position: absolute;
	inset: 0;
}

.mkit-ba__layer > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mkit-ba__layer--before {
	clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.mkit-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	z-index: 3;
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 24px rgba(0, 0, 0, .35);
	pointer-events: none;
}

.mkit-ba__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	translate: -50% -50%;
	border-radius: 50%;
	background: #fff;
	color: #14152b;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
	transition: scale .3s var(--mkit-spring);
}

.mkit-ba__knob svg {
	width: 1.4rem;
	height: 1.4rem;
}

.mkit-ba__frame:hover .mkit-ba__knob {
	scale: 1.08;
}

.mkit-ba__frame:has(.mkit-ba__range:focus-visible) .mkit-ba__knob {
	outline: 3px solid var(--mkit-accent);
	outline-offset: 3px;
}

.mkit-ba__range {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	touch-action: pan-y;
	-webkit-appearance: none;
	appearance: none;
}

/* A 1px thumb, so the value maps exactly to where the pointer is */
.mkit-ba__range::-webkit-slider-thumb {
	width: 1px;
	height: 100%;
	-webkit-appearance: none;
	appearance: none;
}

.mkit-ba__range::-moz-range-thumb {
	width: 1px;
	height: 100%;
	border: 0;
}

.mkit-ba__label {
	position: absolute;
	top: 1rem;
	z-index: 2;
	padding: .45em .85em;
	border-radius: 999px;
	background: rgba(13, 14, 34, .6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: var(--mkit-font-mono);
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: opacity .25s var(--mkit-ease);
}

.mkit-ba__label--before {
	left: 1rem;
	opacity: clamp(0, calc((var(--p, 50) - 16) / 6), 1);
}

.mkit-ba__label--after {
	right: 1rem;
	opacity: clamp(0, calc((84 - var(--p, 50)) / 6), 1);
}

/* Placeholders when an image is missing */
.mkit-ba__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: clamp(2rem, 1rem + 4vw, 5rem);
	font-weight: 700;
	letter-spacing: -.04em;
}

/* each word sits in its own half, so the divider never cuts through it */
.mkit-ba__ph--before {
	place-items: center start;
	padding-left: 10%;
	background: repeating-linear-gradient(135deg, #2b2c3e 0 14px, #25263a 14px 28px);
	color: rgba(255, 255, 255, .32);
}

.mkit-ba__ph--after {
	place-items: center end;
	padding-right: 10%;
	background:
		radial-gradient(90% 90% at 70% 20%, color-mix(in srgb, var(--mkit-accent) 70%, #fff 15%), transparent 60%),
		linear-gradient(140deg, color-mix(in srgb, var(--mkit-accent) 60%, #0d0e22), color-mix(in srgb, var(--mkit-accent) 20%, #0d0e22));
	color: #fff;
}

.mkit-ba__caption {
	margin-top: .9rem;
	font-size: .9375rem;
	line-height: 1.5;
	text-align: center;
}