/**
 * Scroll-driven image reveal — layout only; motion comes from JS (scroll progress).
 */

.gt-scroll-reveal {
	position: relative;
	box-sizing: border-box;
}

.gt-scroll-reveal__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(1rem, 4vw, 2.5rem);
	box-sizing: border-box;
}

.gt-scroll-reveal__frame {
	position: relative;
	width: min(100%, 1200px);
	margin: 0;
	overflow: hidden;
	border-radius: 0;
	background: rgb(15 23 42 / 0.06);
}

.gt-scroll-reveal__target {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 16 / 10;
	/* Before first rAF; JS syncs to scroll (slightly visible so layout is obvious) */
	opacity: 0.35;
	transform: scale(0.86);
	transform-origin: center center;
	clip-path: inset(10% 6.8% 10% 6.8% round 16px);
}

@media (prefers-reduced-motion: reduce) {
	.gt-scroll-reveal__target {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}