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

body.kopylov-brand-scroll-frame-enabled,
body.kopylov-brand-scroll-frame-enabled .wp-site-blocks {
	overflow-anchor: none;
}

/* The 3D scene keeps its own fixed stage after the frame sequence completes. Once
 * Brand has taken over, remove that stage so it cannot leak into Portfolio/footer. */
body.kopylov-brand-scroll-frame-past .kopylov-3d-scroll-frame.is-complete .kopylov-3d-scroll-frame__stage {
	opacity: 0;
	visibility: hidden;
}

/* Brand starts transparent so the black 3D scene can sit behind its white reveal. */
#home-brand-design {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	min-height: 100lvh;
	background-color: transparent !important;
	overflow-anchor: none;
}

/* Desktop uses the regular document transition from the black 3D section into
 * the white Brand section. The circular reveal is reserved for mobile below. */
#home-brand-design.kopylov-brand-entry-active {
	background-color: #fff !important;
}

#home-brand-design.kopylov-brand-entry-complete {
	background-color: #fff !important;
}

#home-brand-design > .wp-block-column,
#home-portfolio > .wp-block-column {
	position: relative;
}

#home-brand-design > .wp-block-column > :not(.wp-block-template-part):not(.kopylov-brand-scroll-frame),
#home-portfolio > .wp-block-column > :not(.kopylov-brand-scroll-frame) {
	position: relative;
	z-index: 1;
}

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

#home-brand-design-t1,
#home-brand-design-t2,
#home-brand-design-t3 {
	will-change: top, clip-path;
}

#home-portfolio {
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	min-height: 100lvh;
	background-color: #000 !important;
	overflow-anchor: none;
}

/* During the circular hand-off Portfolio itself stays transparent. The
 * transition frame is the only layer that paints the new black surface. */
#home-portfolio.kopylov-portfolio-entry-active:not(.kopylov-portfolio-entry-complete) {
	background-color: transparent !important;
	z-index: 1100;
}

#home-portfolio.kopylov-portfolio-entry-complete {
	background-color: #000 !important;
}

body.kopylov-brand-portfolio-transition {
	/* The 16px document gap between the sections must match the outgoing white
	 * Brand surface instead of exposing the site's default black background. */
	background-color: #fff !important;
}

/* Keep Brand copy visible until the black circular reveal reaches it. */
body.kopylov-brand-portfolio-transition #home-brand-design-t1,
body.kopylov-brand-portfolio-transition #home-brand-design-t2,
body.kopylov-brand-portfolio-transition #home-brand-design-t3 {
	clip-path: none !important;
}

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

.kopylov-brand-scroll-frame__stage {
	position: sticky;
	top: 0;
	display: grid;
	height: 100vh;
	height: 100lvh;
	height: var(--kopylov-visual-viewport-height, 100lvh);
	overflow: hidden;
	place-items: center;
	background: transparent;
}

/* Keep the transition frame above the fixed Brand copy while it is incomplete;
 * transparent parts of the frame still let the outgoing content show through. */
.kopylov-brand-scroll-frame.is-portfolio-active:not(.is-portfolio-complete) {
	position: fixed;
	inset: 0;
	z-index: 1101;
	width: 100vw;
	height: 100vh;
	height: 100lvh;
	height: var(--kopylov-visual-viewport-height, 100lvh);
}

.kopylov-brand-scroll-frame.is-portfolio-active:not(.is-portfolio-complete) .kopylov-brand-scroll-frame__stage {
	position: fixed;
	inset: 0;
	width: 100%;
	height: var(--kopylov-visual-viewport-height, 100lvh);
}

/* Let Portfolio records keep their normal bottom-up document entrance. They
 * sit above the black circle, while the circle remains above the outgoing
 * Brand surface. Hiding these nodes until the end made a rectangular jump. */
#home-portfolio.kopylov-portfolio-entry-active:not(.kopylov-portfolio-entry-complete) > .wp-block-column > :not(.kopylov-brand-scroll-frame) {
	/* The record itself must remain above the circle so it can enter from the
	 * bottom while the circle masks the outgoing Brand surface underneath. */
	z-index: 1102;
}

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

.kopylov-brand-scroll-frame__white-reveal {
	background: #fff;
	transform: translate3d(-50%, 50%, 0) scale(var(--kopylov-brand-white-reveal-scale));
}

.kopylov-brand-scroll-frame__black-reveal {
	background: #000;
	transform: translate3d(-50%, 50%, 0) scale(var(--kopylov-brand-black-reveal-scale));
}

/* The source sprite is an extremely tall sheet. Keep it as a hidden overlay
 * from the start so it never pushes the text blocks down in normal flow. */
body.kopylov-brand-scroll-frame-enabled #home-brand-logos:not(.kopylov-brand-logos-fixed) {
	position: absolute !important;
	top: 0 !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
	box-sizing: border-box;
	width: 100% !important;
	height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
	visibility: hidden;
	pointer-events: none;
}

/* Keep the tall logo sheet in its own viewport layer while it travels through Brand. */
#home-brand-logos.kopylov-brand-logos-fixed {
	position: fixed !important;
	inset: 0 !important;
	z-index: 0 !important;
	box-sizing: border-box;
	width: 100vw !important;
	height: 100vh !important;
	height: 100lvh !important;
	height: var(--kopylov-visual-viewport-height, 100lvh) !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	visibility: visible;
	pointer-events: none;
}

#home-brand-logos.kopylov-brand-logos-fixed figure {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: var(--kopylov-brand-logo-width, 50vw);
	max-width: none !important;
	margin: 0 !important;
	transform: translate3d(var(--kopylov-brand-logo-x, 0px), var(--kopylov-brand-logo-y, var(--kopylov-visual-viewport-height, 100lvh)), 0);
	will-change: transform;
}

#home-brand-logos.kopylov-brand-logos-fixed img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

#home-brand-logos.kopylov-brand-logos-complete {
	visibility: hidden;
}

.kopylov-brand-logos-placeholder {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

@media (max-width: 1127px) {
	body.kopylov-brand-scroll-frame-active #home-brand-design,
	body.kopylov-brand-portfolio-active #home-portfolio {
		/* Stay above the preceding section while the viewport circle is opening. */
		z-index: 14;
	}

	.kopylov-brand-scroll-frame.is-entry-active .kopylov-brand-scroll-frame__stage,
	.kopylov-brand-scroll-frame.is-portfolio-active:not(.is-portfolio-complete) .kopylov-brand-scroll-frame__stage {
		position: fixed;
		inset: 0;
		width: 100vw;
	}

	/* The Brand entry circle stays below Brand copy but above the outgoing 3D
	 * section; only the Portfolio hand-off needs to cover outgoing text. */
	.kopylov-brand-scroll-frame.is-entry-active {
		z-index: 0;
	}

	.kopylov-brand-scroll-frame.is-portfolio-active:not(.is-portfolio-complete) {
		z-index: 1101;
	}

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

	.kopylov-brand-scroll-frame--portfolio .kopylov-brand-scroll-frame__stage {
		background: #000;
	}

	#home-brand-logos.kopylov-brand-logos-fixed {
		inset: auto 0 16px !important;
		height: var(--kopylov-brand-logo-height, 288px) !important;
	}

	#home-brand-logos.kopylov-brand-logos-fixed figure {
		top: auto;
		bottom: 0;
		width: var(--kopylov-brand-logo-width, 2592px);
		transform: translate3d(var(--kopylov-brand-logo-x, -2592px), 0, 0);
	}

	/* Mobile keeps the black 3D scene behind the circular white reveal until
	 * Brand has fully entered. */
	#home-brand-design.kopylov-brand-entry-active {
		background-color: transparent !important;
	}
}