/*
 * benssur Architects cinematic logo introduction.
 * One unchanged copy of the real WordPress Site Logo is masked, revealed and landed.
 * Its visible crop and alignment are inherited from the rendered header logo.
 */

.bla-motion-logo[hidden] {
	display: none !important;
}

.bla-motion-logo {
	--bla-full-width: 4.266667em;
	--bla-benssur-centre: -23.177083%;
	--bla-architects-mask: 53.645833%;
	--bla-centre-y: -70%;
	--bla-logo-clip-path: inset(40% 0 0 0);
	--bla-logo-filter: none;
	--bla-logo-object-fit: contain;
	--bla-logo-object-position: left bottom;
	--bla-final-left: var(--wp--style--root--padding-left, 4vw);
	--bla-final-top: 16px;
	--bla-final-scale: 0.34;
	display: none;
	font-size: clamp(5rem, 9.4vw, 8.8rem);
	height: 1em;
	left: 50%;
	line-height: 1;
	pointer-events: none;
	position: fixed;
	top: 50%;
	transform: translate(var(--bla-benssur-centre), var(--bla-centre-y));
	transform-origin: left top;
	white-space: nowrap;
	width: var(--bla-full-width);
	will-change: left, top, transform, opacity;
	z-index: 1000;
}

html.bla-running .bla-motion-logo:not([hidden]) {
	animation: blaMotionLogoSettle 4.4s cubic-bezier(0.46, 0, 0.12, 1) 0.2s both;
	display: block;
}

.bla-logo-reveal {
	clip-path: inset(0 var(--bla-architects-mask) 0 0);
	display: block;
	height: 1em;
	line-height: 1;
	overflow: visible;
	white-space: nowrap;
	width: var(--bla-full-width);
}

.bla-logo-source {
	clip-path: var(--bla-logo-clip-path) !important;
	display: block !important;
	filter: var(--bla-logo-filter) !important;
	height: 1em !important;
	max-width: none !important;
	object-fit: var(--bla-logo-object-fit) !important;
	object-position: var(--bla-logo-object-position) !important;
	width: var(--bla-full-width) !important;
}

html.bla-running .bla-logo-reveal {
	animation: blaLogoReveal 4.4s ease 0.2s both;
}

html.bla-pending body.home .ba-site-header .brand-lockup,
html.bla-running body.home .ba-site-header .brand-lockup,
html.bla-pending body.home .site-header .brand-lockup,
html.bla-running body.home .site-header .brand-lockup {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

html.bla-pending body.home .ba-primary-navigation,
html.bla-pending body.home .site-nav,
html.bla-pending body.home .ba-home-hero h1,
html.bla-pending body.home .cinematic-hero .hero-title {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

html.bla-running body.home .ba-primary-navigation,
html.bla-running body.home .site-nav,
html.bla-running body.home .ba-home-hero h1,
html.bla-running body.home .cinematic-hero .hero-title {
	animation: blaContentIn 0.85s ease 5s both !important;
}

@keyframes blaLogoReveal {
	0%,
	37.9% {
		clip-path: inset(0 var(--bla-architects-mask) 0 0);
	}

	50.2%,
	100% {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes blaMotionLogoSettle {
	0%,
	22% {
		left: 50%;
		top: 50%;
		transform: translate(var(--bla-benssur-centre), var(--bla-centre-y)) scale(1);
	}

	38%,
	58% {
		left: 50%;
		top: 50%;
		transform: translate(-50%, var(--bla-centre-y)) scale(1);
	}

	100% {
		left: var(--bla-final-left);
		top: var(--bla-final-top);
		transform: translate(0, 0) scale(var(--bla-final-scale));
	}
}

@keyframes blaContentIn {
	0% {
		opacity: 0;
		pointer-events: none;
		transform: translateY(18px);
		visibility: hidden;
	}

	1% {
		visibility: visible;
	}

	100% {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
	}
}

@media (max-width: 900px) {
	.bla-motion-logo {
		font-size: clamp(3.4rem, 12vw, 7rem);
	}
}

@media (max-width: 620px) {
	.bla-motion-logo {
		font-size: clamp(2.8rem, 18vw, 4.8rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bla-motion-logo,
	.bla-logo-reveal,
	body.home .ba-primary-navigation,
	body.home .site-nav,
	body.home .ba-home-hero h1,
	body.home .cinematic-hero .hero-title {
		animation: none !important;
	}

	.bla-motion-logo {
		display: none !important;
	}
}