/**
 * OCH branded page-loader
 * Version: 2.2.0
 *
 * Source animation:
 * - Canvas: 458 × 334 px
 * - Aspect ratio: 229 / 167
 * - White background with feathered edges
 */

:root {
	--och-loader-background: #ffffff;
	--och-loader-logo-ratio: 229 / 167;
	--och-loader-logo-desktop-width: min(86vw, 1100px);
	--och-loader-logo-tablet-width: min(88vw, 860px);
	--och-loader-logo-mobile-width: min(92vw, 620px);
}

/* The Elementor logo stays normal unless the bootstrap enables the loader. */
.och-header-logo {
	opacity: 1;
	transition: opacity 180ms ease;
}

/* Prevent a pre-animation flash of Elementor's static logo. */
html.och-loader-pending .och-header-logo {
	opacity: 0 !important;
}

/* Lock scrolling only while the branded sequence is active. */
html.och-loader-pending,
html.och-loader-pending body {
	overflow: hidden;
	overscroll-behavior: none;
}

/* Eligible-page markup remains inert unless the pending state is active. */
.och-page-loader {
	display: none;
}

html.och-loader-pending .och-page-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	place-items: center;
	overflow: hidden;

	/*
	 * The animation is flattened against white. Keep the loader white so its
	 * feathered edges remain invisible during the fullscreen phase.
	 */
	background: var(--och-loader-background);
	opacity: 1;
	visibility: visible;
	isolation: isolate;
	contain: layout paint style;
}

.och-page-loader__stage {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * The tightly cropped 458 × 334 asset no longer needs oversized compensation.
 * JavaScript animates this element directly to the measured header-logo box.
 */
.och-page-loader__logo {
	position: fixed;
	top: 50%;
	left: 50%;
	display: block;
	width: var(--och-loader-logo-desktop-width);
	height: auto;
	aspect-ratio: var(--och-loader-logo-ratio);
	max-width: none;
	max-height: 76vh;
	object-fit: contain;
	transform: translate3d(-50%, -50%, 0);
	transform-origin: center center;
	backface-visibility: hidden;
	will-change: transform, opacity;
	user-select: none;
	-webkit-user-drag: none;
}

/* Crossfade state for the actual Elementor logo. */
html.och-loader-revealing .och-header-logo,
html.och-loader-complete .och-header-logo {
	opacity: 1 !important;
}

/* Avoid an invisible interactive overlay during teardown. */
.och-page-loader.is-finishing {
	pointer-events: none;
}

/* Tablet */
@media (max-width: 1024px) {
	.och-page-loader__logo {
		width: var(--och-loader-logo-tablet-width);
		max-height: 70vh;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.och-page-loader__logo {
		width: var(--och-loader-logo-mobile-width);
		max-height: 62vh;
	}
}

/* Short landscape screens */
@media (max-height: 520px) {
	.och-page-loader__logo {
		width: min(74vw, 760px);
		max-height: 78vh;
	}
}

/* Reduced motion bypasses the sequence completely. */
@media (prefers-reduced-motion: reduce) {
	html.och-loader-pending,
	html.och-loader-pending body {
		overflow: auto;
		overscroll-behavior: auto;
	}

	html.och-loader-pending .och-header-logo {
		opacity: 1 !important;
	}

	html.och-loader-pending .och-page-loader {
		display: none !important;
	}
}