:root {
	--kopylov-home-3d-sticky-top: 90px;
}

/* Fixed text changes its flow placeholder while scrolling; never let the browser compensate by moving the scroll position. */
body.kopylov-3d-scroll-frame-enabled,
body.kopylov-3d-scroll-frame-enabled .wp-site-blocks {
	overflow-anchor: none;
}

#home-3d-design {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: var(--kopylov-home-3d-sticky-top);
	overflow-anchor: none;
}

#home-3d-design > .wp-block-column {
	position: relative;
}

#home-3d-design > .wp-block-column > :not(.wp-block-template-part) {
	position: relative;
	z-index: 1;
}

#home-3d-design > .wp-block-column > .wp-block-template-part {
	position: static;
	z-index: auto;
}

#home-3d-design > .wp-block-column > .wp-block-template-part + #home-3d-design-h {
	margin-block-start: 0 !important;
}

#home-3d-design-h {
	margin-block-start: 0 !important;
	will-change: top;
}

#home-3d-design-t1,
#home-3d-design-t2,
#home-3d-design-t3 {
	will-change: top;
}

.kopylov-3d-scroll-frame {
	--kopylov-3d-black-reveal-scale: 0;
	--kopylov-3d-mobile-reveal-radius: 0px;
	position: absolute;
	top: calc(-1 * var(--kopylov-home-3d-sticky-top));
	bottom: 0;
	left: calc((100% - 100vw) / 2);
	z-index: 0;
	width: 100vw;
	pointer-events: none;
}

.kopylov-3d-scroll-frame__stage {
	position: sticky;
	top: 0;
	display: grid;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	place-items: center;
	background: transparent;
}

.kopylov-3d-scroll-frame.is-complete .kopylov-3d-scroll-frame__stage {
	position: fixed;
	inset: 0;
	width: 100%;
	pointer-events: none;
}

.kopylov-3d-scroll-frame__black-reveal {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 0;
	width: 300vmax;
	height: 300vmax;
	border-radius: 50%;
	background: #000;
	transform: translate3d(-50%, 50%, 0) scale(var(--kopylov-3d-black-reveal-scale));
	transform-origin: center;
	pointer-events: none;
	will-change: transform;
}

.kopylov-3d-scroll-frame__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	background: #000;
}

.kopylov-3d-scroll-frame__loading {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	padding: 0.55rem 0.7rem;
	background: rgba(0, 0, 0, 0.72);
	color: #a7adbb;
	font-size: 0.86rem;
	line-height: 1;
	backdrop-filter: blur(14px);
}

.kopylov-3d-scroll-frame.is-ready .kopylov-3d-scroll-frame__loading {
	display: none;
}

/* Once 3D owns the viewport, the completed laptop scene must not remain behind it. */
body.kopylov-3d-scroll-frame-past .kopylov-scroll-frame.is-complete .kopylov-scroll-frame__stage {
	opacity: 0;
	visibility: hidden;
}

@media (max-width: 1127px) {
	body.kopylov-3d-scroll-frame-active #home-3d-design {
		/* The UX/UI panel uses z-index: 12; raise 3D only while its entry circle is active. */
		z-index: 13;
	}

	.kopylov-3d-scroll-frame.is-entry-active .kopylov-3d-scroll-frame__stage {
		/* Fix the circle to the viewport as soon as 3D enters, retaining its bottom-up direction. */
		position: fixed;
		inset: 0;
		width: 100vw;
	}

	.kopylov-3d-scroll-frame__stage {
		place-items: end center;
		background: #000;
		clip-path: circle(var(--kopylov-3d-mobile-reveal-radius) at 50% 100%);
		will-change: clip-path;
	}

	.kopylov-3d-scroll-frame__image {
		width: 100vw;
		height: auto;
		max-height: 100vh;
		max-height: 100svh;
		object-fit: contain;
		align-self: end;
		justify-self: center;
	}
}