/*
 * Pharaon Page Loader — logo mode
 *
 * Scoped to #ht-preloader.pharaon-loader so nothing here reaches the header
 * logo, Elementor widgets or any other image on the site.
 *
 * The theme already spins .loader-circle and centres .loader-text with
 * position:absolute + translate(-50%,-50%). The logo re-uses that centring, so
 * it sits exactly in the middle of the ring and does not inherit the rotation.
 */

#ht-preloader.pharaon-loader .pharaon-loader__logo-wrap {
	/* .loader-text already gives absolute centring and z-index; only the box
	   model differs for an image */
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pharaon-loader-w, 110px);
	max-width: 62vw;
	line-height: 0;
	text-transform: none;
	pointer-events: none;
}

#ht-preloader.pharaon-loader .pharaon-loader__logo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	/* keeps the ring clear even if a very tall logo is chosen */
	max-height: calc(10rem - 2.4rem);
	object-fit: contain;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	opacity: 0;
	transform: scale(.96);
	animation: pharaon-loader-in .55s cubic-bezier(.22, .68, .32, 1) .06s forwards;
	filter: drop-shadow(0 0 14px rgba(255, 255, 255, .12));
}

@keyframes pharaon-loader-in {
	to { opacity: 1; transform: scale(1); }
}

/* the screen-reader line must never take up layout inside the ring */
#ht-preloader.pharaon-loader .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	#ht-preloader.pharaon-loader .pharaon-loader__logo-wrap {
		width: var(--pharaon-loader-w-m, 88px);
	}
	#ht-preloader.pharaon-loader .pharaon-loader__logo {
		max-height: calc(8rem - 2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	#ht-preloader.pharaon-loader .pharaon-loader__logo {
		animation: none;
		opacity: 1;
		transform: none;
	}
	#ht-preloader.pharaon-loader .loader-circle {
		animation-duration: 6s;   /* slowed, not stopped: it still signals activity */
	}
}