/* Crop narrow dark edges in the source photos without resizing the slider. */
.tuc-uc__cut .tuc-uc__frame .tuc-uc__img {
	object-fit: cover !important;
	object-position: center center !important;
	transform: scale(1.03);
}

.tuc-uc__layer {
	clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Soften the join when the two source photos are not aligned exactly. */
@supports ((-webkit-mask-image: linear-gradient(to right, #000, transparent)) or (mask-image: linear-gradient(to right, #000, transparent))) {
	.tuc-uc__layer {
		--blend-half: clamp(1.25rem, 5vw, 2rem);
		clip-path: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(var(--pos, 50%) - var(--blend-half)), transparent calc(var(--pos, 50%) + var(--blend-half)));
		mask-image: linear-gradient(to right, #000 calc(var(--pos, 50%) - var(--blend-half)), transparent calc(var(--pos, 50%) + var(--blend-half)));
	}

	.tuc-uc__frame[data-reveal-edge="start"] .tuc-uc__layer {
		visibility: hidden;
	}

	.tuc-uc__frame[data-reveal-edge="end"] .tuc-uc__layer {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* The frame clips both photos and the handle, exactly like the /domu hero.
   Its width can be smaller than the stack because of aspect-ratio/max-height. */
.tuc-uc__cut .tuc-uc__frame {
	user-select: none;
	cursor: ew-resize;
	touch-action: pan-y;
}

.tuc-uc__cutline {
	left: var(--pos, 50%);
	width: 1.5px;
	border: 0;
	background: repeating-linear-gradient(to bottom, rgba(251, 250, 248, .85) 0 4px, transparent 4px 7px);
	transform: translateX(-50%);
}

/* Pointer interaction needs no focus rings; keep keyboard focus visible. */
.tuc-uc__cut .tuc-uc__frame[data-pointer-focus],
.tuc-uc__cut .tuc-uc__frame[data-pointer-focus] .tuc-uc__grip {
	outline: none;
}