/*
 * Homepage-only branded preloader.
 * Scoped to the front-page template; Global UI remains untouched.
 */
html.rth-home-preloader-active,
html.rth-home-preloader-active body {
	overflow: hidden;
}

.rth-home-preloader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 100dvh;
	background: #fff;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .36s cubic-bezier(.22,1,.36,1), visibility 0s linear .36s;
	contain: layout paint;
	animation: rth-home-preloader-css-failsafe .36s cubic-bezier(.22,1,.36,1) 4.6s forwards;
}

@keyframes rth-home-preloader-css-failsafe {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.rth-home-preloader.is-leaving {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	animation: none;
}

.rth-home-preloader__video {
	display: block;
	width: min(46vw, 480px);
	height: auto;
	max-width: calc(100vw - 44px);
	max-height: 72vh;
	object-fit: contain;
	background: transparent;
	/*
	 * Feather the compressed MP4 canvas into the white preloader surface.
	 * The mark stays fully sharp in the centre; only the unused outer video
	 * margin fades away, preventing a visible rectangular video boundary on
	 * browsers/devices that composite video whites slightly differently.
	 */
	-webkit-mask-image: radial-gradient(
		ellipse at center,
		#000 0%,
		#000 72%,
		rgba(0, 0, 0, .98) 78%,
		rgba(0, 0, 0, .78) 86%,
		rgba(0, 0, 0, .38) 93%,
		rgba(0, 0, 0, .10) 97%,
		transparent 100%
	);
	mask-image: radial-gradient(
		ellipse at center,
		#000 0%,
		#000 72%,
		rgba(0, 0, 0, .98) 78%,
		rgba(0, 0, 0, .78) 86%,
		rgba(0, 0, 0, .38) 93%,
		rgba(0, 0, 0, .10) 97%,
		transparent 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: opacity, -webkit-mask-image, mask-image;
}

@media (max-width: 700px) {
	.rth-home-preloader__video {
		width: min(82vw, 330px);
		max-width: calc(100vw - 32px);
	}
}

@media (max-width: 380px) {
	.rth-home-preloader__video {
		width: min(86vw, 300px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rth-home-preloader {
		transition-duration: .18s;
	}

	.rth-home-preloader__video {
		display: none;
	}
}