/**
 * Site intro preloader — blur → reveal + logo motion (demo-skin parity).
 * Animation mode: #preloader.cw-preloader-anim--{slug} (Customizer).
 */
/*
 * Horizontal clip only: blur + scale(1.02) on body children can spill past the viewport
 * and create a horizontal scrollbar if overflow-x stays visible.
 * Vertical scrolling is unchanged (overflow-y is not forced hidden).
 */
body.cw-loading {
	overflow-x: hidden;
}

/*
 * Exclude Theme Builder header/footer (and classic .site-header): transform/filter on an ancestor
 * create a fixed-position containing block — Elementor Pro sticky uses position:fixed and would
 * not stick to the viewport if those nodes were direct body children with transform (see Elementor
 * .elementor-location-* on the location wrapper).
 */
.cw-loading > :not(#preloader):not(script):not(style):not(.skip-link):not(noscript):not(.elementor-location-header):not(.elementor-location-footer):not(.site-header) {
	filter: blur(20px);
	opacity: 0;
	transform: scale(1.02);
	transition: none;
}

.cw-loaded > :not(#preloader):not(script):not(style):not(.skip-link):not(noscript):not(.elementor-location-header):not(.elementor-location-footer):not(.site-header) {
	filter: blur(0);
	opacity: 1;
	transform: scale(1);
	transition:
		filter 1.2s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
		transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: var(--cw-preloader-bg, #2d2a2c);
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	isolation: isolate;
	/* demo-skin/index.html: .bg-vignette + .bg-noise on the main page — same mood on the loading overlay */
}

#preloader::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
}

#preloader::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.015;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#preloader.fade-out {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/*
 * Logo exit (theme): after intro-preloader pulse, one-shot zoom-out before overlay fade.
 * Demo HTML/CSS (intro-preloader.css): page sits at scale(1.02) while loading, then scale(1) on .cw-loaded
 * (perceived “zoom out / settle”); logo pulse hits scale(0.95) at 50%. This exit reinforces that beat.
 */
#preloader.cw-preloader-exit .preloader-logo-pulse {
	-webkit-animation: none !important;
	animation: none !important;
}

#preloader.cw-preloader-exit img.preloader-logo,
#preloader.cw-preloader-exit .preloader-logo-text {
	-webkit-animation: cw-preloader-logo-exit 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
	animation: cw-preloader-logo-exit 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@-webkit-keyframes cw-preloader-logo-exit {
	from {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-filter: blur(0px) var(--cw-preloader-logo-filter, none);
		filter: blur(0px) var(--cw-preloader-logo-filter, none);
	}

	to {
		opacity: 0.25;
		-webkit-transform: scale(0.82);
		transform: scale(0.82);
		-webkit-filter: blur(6px) var(--cw-preloader-logo-filter, none);
		filter: blur(6px) var(--cw-preloader-logo-filter, none);
	}
}

@keyframes cw-preloader-logo-exit {
	from {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px) var(--cw-preloader-logo-filter, none);
	}

	to {
		opacity: 0.25;
		transform: scale(0.82);
		filter: blur(6px) var(--cw-preloader-logo-filter, none);
	}
}

/*
 * Wrapper: layout only. Default “pulse” matches demo-skin/css/intro-preloader.css
 * (animation on .preloader-logo <img>, 2s cycle, scale + blur).
 */
#preloader .preloader-logo-pulse {
	display: flex;
	justify-content: center;
	align-items: center;
	transform-origin: center center;
	backface-visibility: hidden;
	position: relative;
	z-index: 1;
}

.preloader-logo {
	display: block;
	max-width: var(--cw-preloader-logo-max, 250px);
	width: auto;
	height: auto;
	transform-origin: center center;
	backface-visibility: hidden;
}

#preloader.cw-preloader-anim--pulse img.preloader-logo {
	will-change: transform, opacity, filter;
	/* Depth on the glass card surface (demo page uses layered orbs behind hero; preload is logo-only) */
	--cw-preloader-pulse-lift: drop-shadow(0 14px 42px rgba(0, 0, 0, 0.55));
}

.preloader-logo-text {
	font-family: var(--cw-font-heading, "Barlow", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(1.25rem, 4vw, 2rem);
	letter-spacing: 0;
	color: var(--cw-text, #dce0ea);
	text-align: center;
}

/* ——— Pulse — same as demo-skin intro-preloader.css .preloader-logo + @keyframes preloader-pulse ——— */
#preloader.cw-preloader-anim--pulse img.preloader-logo {
	-webkit-animation: cw-preloader-pulse-logo 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	animation: cw-preloader-pulse-logo 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

#preloader.cw-preloader-anim--pulse .preloader-logo-text {
	-webkit-animation: cw-preloader-pulse-text 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	animation: cw-preloader-pulse-text 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	will-change: transform, opacity, filter;
}

@-webkit-keyframes cw-preloader-pulse-logo {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-filter: blur(0px) var(--cw-preloader-pulse-lift) var(--cw-preloader-logo-filter, none);
		filter: blur(0px) var(--cw-preloader-pulse-lift) var(--cw-preloader-logo-filter, none);
	}

	50% {
		opacity: 0.6;
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
		-webkit-filter: blur(2px) var(--cw-preloader-pulse-lift) var(--cw-preloader-logo-filter, none);
		filter: blur(2px) var(--cw-preloader-pulse-lift) var(--cw-preloader-logo-filter, none);
	}
}

@keyframes cw-preloader-pulse-logo {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px) var(--cw-preloader-pulse-lift) var(--cw-preloader-logo-filter, none);
	}

	50% {
		opacity: 0.6;
		transform: scale(0.95);
		filter: blur(2px) var(--cw-preloader-pulse-lift) var(--cw-preloader-logo-filter, none);
	}
}

@-webkit-keyframes cw-preloader-pulse-text {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-filter: none;
		filter: none;
		text-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
	}

	50% {
		opacity: 0.6;
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
		-webkit-filter: blur(2px);
		filter: blur(2px);
		text-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
	}
}

@keyframes cw-preloader-pulse-text {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
		filter: none;
		text-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
	}

	50% {
		opacity: 0.6;
		transform: scale(0.95);
		filter: blur(2px);
		text-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
	}
}

/* ——— Pulse lite: no filter (survives aggressive CSS merge / older engines) ——— */
#preloader.cw-preloader-anim--pulse-lite img.preloader-logo,
#preloader.cw-preloader-anim--pulse-lite .preloader-logo-text {
	-webkit-animation: cw-preloader-pulse-lite 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	animation: cw-preloader-pulse-lite 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@-webkit-keyframes cw-preloader-pulse-lite {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		opacity: 0.65;
		-webkit-transform: scale(0.94);
		transform: scale(0.94);
	}
}

@keyframes cw-preloader-pulse-lite {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.65;
		transform: scale(0.94);
	}
}

/* ——— Breathe: slower, gentle scale up ——— */
#preloader.cw-preloader-anim--breathe img.preloader-logo,
#preloader.cw-preloader-anim--breathe .preloader-logo-text {
	-webkit-animation: cw-preloader-breathe 3s ease-in-out infinite;
	animation: cw-preloader-breathe 3s ease-in-out infinite;
}

@-webkit-keyframes cw-preloader-breathe {
	0%,
	100% {
		opacity: 0.92;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.045);
		transform: scale(1.045);
	}
}

@keyframes cw-preloader-breathe {
	0%,
	100% {
		opacity: 0.92;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.045);
	}
}

/* ——— Fade: opacity only ——— */
#preloader.cw-preloader-anim--fade img.preloader-logo,
#preloader.cw-preloader-anim--fade .preloader-logo-text {
	-webkit-animation: cw-preloader-fade 1.5s ease-in-out infinite;
	animation: cw-preloader-fade 1.5s ease-in-out infinite;
}

@-webkit-keyframes cw-preloader-fade {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.38;
	}
}

@keyframes cw-preloader-fade {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.38;
	}
}

/* ——— Glow: soft brand-colored halo (wrapper — box-shadow) ——— */
#preloader.cw-preloader-anim--glow .preloader-logo-pulse {
	border-radius: 12px;
	padding: 8px;
	-webkit-animation: cw-preloader-glow 2.2s ease-in-out infinite alternate;
	animation: cw-preloader-glow 2.2s ease-in-out infinite alternate;
	will-change: opacity, box-shadow;
}

@-webkit-keyframes cw-preloader-glow {
	0% {
		opacity: 0.88;
		box-shadow:
			0 0 0 0 rgba(220, 38, 38, 0),
			0 0 0 0 rgba(0, 183, 250, 0);
	}

	100% {
		opacity: 1;
		box-shadow:
			0 0 32px 4px rgba(220, 38, 38, 0.22),
			0 0 56px 8px rgba(0, 183, 250, 0.12);
	}
}

@keyframes cw-preloader-glow {
	0% {
		opacity: 0.88;
		box-shadow:
			0 0 0 0 rgba(220, 38, 38, 0),
			0 0 0 0 rgba(0, 183, 250, 0);
	}

	100% {
		opacity: 1;
		box-shadow:
			0 0 32px 4px rgba(220, 38, 38, 0.22),
			0 0 56px 8px rgba(0, 183, 250, 0.12);
	}
}

/* ——— Float: vertical drift (wrapper) ——— */
#preloader.cw-preloader-anim--float .preloader-logo-pulse {
	-webkit-animation: cw-preloader-float 2.5s ease-in-out infinite;
	animation: cw-preloader-float 2.5s ease-in-out infinite;
	will-change: transform, opacity;
}

@-webkit-keyframes cw-preloader-float {
	0%,
	100% {
		opacity: 0.95;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
	}
}

@keyframes cw-preloader-float {
	0%,
	100% {
		opacity: 0.95;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-8px);
	}
}

/* ——— None ——— */
#preloader.cw-preloader-anim--none img.preloader-logo,
#preloader.cw-preloader-anim--none .preloader-logo-text,
#preloader.cw-preloader-anim--none .preloader-logo-pulse {
	-webkit-animation: none !important;
	animation: none !important;
}

/*
 * When Customizer disables “Respect reduced motion”, body gets .cw-preloader-motion-override so the
 * preloader logo can still use CSS/WAAPI motion even if the OS reports prefers-reduced-motion.
 */
@media (prefers-reduced-motion: reduce) {
	body:not(.cw-preloader-motion-override) #preloader::before,
	body:not(.cw-preloader-motion-override) #preloader::after {
		opacity: 0;
	}

	body:not(.cw-preloader-motion-override) #preloader img.preloader-logo,
	body:not(.cw-preloader-motion-override) #preloader .preloader-logo-text,
	body:not(.cw-preloader-motion-override) #preloader .preloader-logo-pulse {
		-webkit-animation: none !important;
		animation: none !important;
		opacity: 1 !important;
		-webkit-transform: none !important;
		transform: none !important;
		filter: none !important;
		-webkit-filter: none !important;
		box-shadow: none !important;
	}

	body:not(.cw-preloader-motion-override) #preloader.cw-preloader-exit img.preloader-logo,
	body:not(.cw-preloader-motion-override) #preloader.cw-preloader-exit .preloader-logo-text {
		opacity: 1 !important;
		-webkit-transform: none !important;
		transform: none !important;
	}
}