/**
 * Pea Screen Loaders — front end
 * Colours and sizes come from custom properties set on #wpea-screen-loader
 * (see PSL_Renderer::css). Class names from Wpea Screen Loaders are kept.
 */

/* ---------- Overlay ---------- */
.wpea-screen-loader-overlay {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--psl-bg, #fff);
	color: var(--psl-text, #333);
	font-family: var(--psl-font, inherit);
	opacity: 1;
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	transform-origin: center;
	box-sizing: border-box;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}
.wpea-screen-loader-overlay *,
.wpea-screen-loader-overlay *::before,
.wpea-screen-loader-overlay *::after { box-sizing: border-box; }

.psl-loader.psl-exiting {
	transition-property: opacity, transform, clip-path, -webkit-clip-path;
	transition-duration: var(--psl-exit, 500ms);
	transition-timing-function: cubic-bezier(.65, 0, .35, 1);
	pointer-events: none;
}

/* ---------- Classic layout ---------- */
.wpea-screen-loader-content {
	position: relative;
	z-index: 1;
	text-align: center;
	width: 80%;
	max-width: 500px;
	transition: opacity .4s ease, transform .4s ease;
}
.wpea-screen-loader-logo { text-align: center; margin-bottom: 20px; line-height: 0; }
.wpea-screen-loader-logo img {
	display: inline-block;
	width: var(--psl-logo-w, 200px);
	height: var(--psl-logo-h, auto);
	max-width: var(--psl-logo-max, 100%);
	object-fit: contain;
}
.wpea-screen-loader-logo .psl-mask { display: inline-block; }
.wpea-screen-loader-text {
	margin-top: 15px;
	font-family: var(--psl-font, inherit);
	font-size: var(--psl-size, 16px);
	font-weight: var(--psl-weight, 500);
	color: var(--psl-text, #333);
	line-height: 1.4;
}
.wpea-screen-loader-percentage { font-variant-numeric: tabular-nums; }
.wpea-screen-loader-animation { margin: 20px auto; display: flex; justify-content: center; }
.wpea-screen-loader-custom-html { margin: 32px auto 0; max-width: 90%; font-size: 14px; line-height: 1.5; color: var(--psl-text, #333); }
.wpea-screen-loader-custom-html img { max-width: 100%; height: auto; }
.wpea-screen-loader-custom-html > :first-child { margin-top: 0; }
.wpea-screen-loader-custom-html > :last-child { margin-bottom: 0; }

/* Progress bar (also the Custom GIF fallback) */
.wpea-screen-loader-progress-container {
	width: var(--psl-bar-w, 100%);
	height: var(--psl-bar-h, 8px);
	background-color: var(--psl-bar-bg, #f0f0f0);
	border-radius: var(--psl-bar-r, 4px);
	overflow: hidden;
	margin: 0 auto;
}
.wpea-screen-loader-progress-container .wpea-screen-loader-bar {
	height: 100%;
	width: 0;
	background-color: var(--psl-bar, #333);
	border-radius: inherit;
}

/* Modern spinner */
.wpea-modern-spinner {
	display: inline-block;
	position: relative;
	width: var(--psl-spin, 80px);
	height: var(--psl-spin, 80px);
	max-width: 70vw;
	max-height: 70vw;
	color: var(--psl-spin-c, #333);
}
.wpea-modern-spinner div {
	position: absolute;
	width: var(--psl-spin-in, 64px);
	height: var(--psl-spin-in, 64px);
	margin: var(--psl-spin-m, 8px);
	border: var(--psl-spin-b, 8px) solid currentColor;
	border-color: currentColor transparent transparent transparent;
	border-radius: 50%;
	animation: wpea-modern-spinner 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
}
.wpea-modern-spinner div:nth-child(1) { animation-delay: -.45s; }
.wpea-modern-spinner div:nth-child(2) { animation-delay: -.3s; }
.wpea-modern-spinner div:nth-child(3) { animation-delay: -.15s; }
@keyframes wpea-modern-spinner { to { transform: rotate(360deg); } }

/* Bouncing dots */
.wpea-screen-loader-dots { display: flex; justify-content: center; align-items: center; }
.wpea-screen-loader-dot {
	display: inline-block;
	width: var(--psl-dot, 12px);
	height: var(--psl-dot, 12px);
	margin: 0 var(--psl-dot-gap, 6px);
	background-color: var(--psl-dot-c, #333);
	border-radius: 50%;
	animation: wpea-bounce 1.4s infinite ease-in-out both;
}
.wpea-screen-loader-dot:nth-child(1) { animation-delay: -.32s; }
.wpea-screen-loader-dot:nth-child(2) { animation-delay: -.16s; }
@keyframes wpea-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* Pulsing circle */
.wpea-screen-loader-pulse {
	width: var(--psl-pulse, 40px);
	height: var(--psl-pulse, 40px);
	background-color: var(--psl-pulse-c, #333);
	border-radius: 50%;
	margin: 0 auto;
	animation: wpea-pulse 1.2s infinite cubic-bezier(.215, .61, .355, 1);
}
@keyframes wpea-pulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* Typewriter (text is typed by the script, so any font works) */
.wpea-typewriter { display: flex; justify-content: center; align-items: center; min-height: 1.5em; flex-wrap: wrap; }
.wpea-typewriter-text {
	font-family: var(--psl-tw-font, monospace);
	font-size: var(--psl-tw-size, 18px);
	font-weight: var(--psl-tw-weight, 500);
	color: var(--psl-tw-c, #333);
	line-height: var(--psl-tw-lh, 1.5);
	letter-spacing: .04em;
	white-space: pre;
}
.wpea-typewriter-text::after {
	content: '';
	display: inline-block;
	width: .08em;
	min-width: 2px;
	height: 1.05em;
	margin-left: .08em;
	vertical-align: -.15em;
	background: var(--psl-tw-cursor, currentColor);
	animation: psl-caret .8s step-end infinite;
}
.wpea-typewriter-percentage {
	font-family: var(--psl-tw-font, monospace);
	font-size: calc(var(--psl-tw-size, 18px) * .8);
	color: var(--psl-tw-c, #333);
	margin-left: .6em;
	font-variant-numeric: tabular-nums;
	opacity: .7;
}
@keyframes psl-caret { 50% { opacity: 0; } }

/* Circular progress */
.wpea-circular-progress {
	position: relative;
	width: var(--psl-circ, 100px);
	height: var(--psl-circ, 100px);
	max-width: 70vw;
	max-height: 70vw;
	margin: 0 auto;
}
.wpea-circular-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.wpea-circular-track { stroke: var(--psl-circ-bg, #f0f0f0); stroke-width: var(--psl-circ-sw, 8); }
.wpea-progress-circle { stroke: var(--psl-circ-c, #333); stroke-width: var(--psl-circ-sw, 8); stroke-linecap: round; }
.wpea-circular-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--psl-font, inherit);
	font-size: var(--psl-circ-fs, 16px);
	font-weight: 700;
	color: var(--psl-circ-t, #333);
	font-variant-numeric: tabular-nums;
}

/* Flipping squares */
.wpea-flip-container { display: flex; justify-content: center; align-items: center; gap: var(--psl-sq-gap, 8px); }
.wpea-flip-square {
	width: var(--psl-sq-w, 20px);
	height: var(--psl-sq-h, 20px);
	background-color: var(--psl-sq-c, #333);
	animation: wpea-flip 1.8s infinite ease-in-out;
}
.wpea-flip-square:nth-child(1) { animation-delay: -.3s; }
.wpea-flip-square:nth-child(2) { animation-delay: -.2s; }
.wpea-flip-square:nth-child(3) { animation-delay: -.1s; }
@keyframes wpea-flip { 0%, 80%, 100% { transform: scale(0) rotate(0deg); } 40% { transform: scale(1) rotate(90deg); } }

/* Custom GIF */
.wpea-custom-gif { width: var(--psl-gif, 100px); max-width: 80vw; margin: 0 auto; }
.wpea-custom-gif img { width: 100%; height: auto; display: block; }

/* Animated SVG (the line drawing is run by the script) */
.psl-svg { width: var(--psl-svg-w, 240px); max-width: 80vw; margin: 0 auto; color: var(--psl-svg-stroke, currentColor); line-height: 0; }
.psl-svg svg, .psl-svg img { display: block; width: 100%; height: auto; max-height: 60vh; overflow: visible; }
.psl-svg--draw:not(.is-ready) svg,
.psl-svg--draw-fill:not(.is-ready) svg { opacity: 0; }
.psl-svg--reveal svg, .psl-svg--reveal img { animation: psl-svg-reveal var(--psl-svg-time, 1800ms) cubic-bezier(.65, 0, .35, 1) both; }
.psl-svg--pulse svg, .psl-svg--pulse img { animation: psl-svg-in .7s ease both, psl-svg-pulse 1.6s .7s ease-in-out infinite; }
@keyframes psl-svg-reveal { from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: .2; } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes psl-svg-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes psl-svg-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .75; } }

/* Text under an Animated SVG */
.psl-svgtext.wpea-screen-loader-text { margin-top: clamp(16px, 3vh, 30px); letter-spacing: var(--psl-text-ls, .02em); }
.psl-svgtext.is-upper { text-transform: uppercase; }
.psl-svgtext--rise .psl-mask > * { display: inline-block; animation: psl-rise .9s cubic-bezier(.2, .75, .15, 1) var(--psl-text-delay, 1200ms) backwards; }
.psl-svgtext--fade { animation: psl-fade-up .9s ease var(--psl-text-delay, 1200ms) backwards; }
.psl-ch { display: inline-block; white-space: pre; animation: psl-ch .6s cubic-bezier(.2, .75, .15, 1) calc(var(--psl-text-delay, 1200ms) + var(--i, 0) * 45ms) backwards; }
.psl-ch--space { animation: none; }
@keyframes psl-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes psl-ch { from { opacity: 0; transform: translateY(.7em); } to { opacity: 1; transform: none; } }

/* ---------- Brand Intro ---------- */
.psl-intro {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8vh 6vw;
	color: var(--psl-text, #fff);
	text-align: center;
}
.psl-intro__main { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 28px); max-width: 100%; }
.psl-intro--left .psl-intro { align-items: flex-start; justify-content: flex-end; text-align: left; padding-bottom: 12vh; }
.psl-intro--left .psl-intro__main { align-items: flex-start; }
.psl-intro .wpea-screen-loader-logo { margin: 0; }
.psl-intro .wpea-screen-loader-logo img { max-height: 40vh; }
.psl-intro__text.wpea-screen-loader-text {
	margin: 0;
	font-size: clamp(20px, 6vw, var(--psl-intro-size, 44px));
	font-weight: var(--psl-intro-weight, 500);
	line-height: 1.08;
	letter-spacing: -.02em;
	max-width: 18ch;
}
.psl-intro--left .psl-intro__text.wpea-screen-loader-text { max-width: 22ch; }
.psl-intro__words {
	font-family: var(--psl-font, inherit);
	font-size: clamp(14px, 2.6vw, calc(var(--psl-intro-size, 44px) * .45));
	font-weight: var(--psl-weight, 500);
	color: var(--psl-accent, currentColor);
	letter-spacing: .02em;
	line-height: 1.2;
}
.psl-word { display: inline-block; transition: transform .45s cubic-bezier(.7, 0, .3, 1), opacity .45s; }
.psl-word.is-out { transform: translateY(-110%); opacity: 0; }
.psl-word.is-below { transform: translateY(110%); opacity: 0; transition: none; }
.psl-intro__line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(127, 127, 127, .18); }
.psl-intro__line .wpea-screen-loader-bar { display: block; height: 100%; width: 0; background: var(--psl-accent, currentColor); }
.psl-intro__counter {
	font-family: var(--psl-font, inherit);
	font-size: min(var(--psl-count-size, 140px), 24vw);
	font-weight: var(--psl-count-weight, 300);
	line-height: .8;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
	color: var(--psl-text, #fff);
	white-space: nowrap;
}
.psl-count__unit { font-size: .32em; vertical-align: top; margin-left: .06em; letter-spacing: 0; opacity: .6; }
.psl-counter--bottom-right { position: absolute; right: 5vw; bottom: 6vh; }
.psl-counter--bottom-left { position: absolute; left: 5vw; bottom: 6vh; }
.psl-counter--top-right { position: absolute; right: 5vw; top: 6vh; }
.psl-counter--center { margin-top: clamp(16px, 4vh, 40px); }
.psl-intro--left .psl-counter--bottom-left { bottom: auto; top: 6vh; }

/* Mask reveals: each line rises out of its own clip box */
.psl-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .1em; margin: -.06em -.02em -.1em; }
.psl-type-brand-intro .psl-mask > * { display: inline-block; animation: psl-rise 1s cubic-bezier(.2, .75, .15, 1) backwards; }
.psl-type-brand-intro .psl-intro__logo .psl-mask > img { animation-delay: .1s; }
.psl-type-brand-intro .psl-intro__text .psl-mask > * { animation-delay: .22s; }
.psl-type-brand-intro .psl-intro__words .psl-mask > * { animation-delay: .38s; }
.psl-type-brand-intro .psl-intro__counter .psl-mask > * { animation-delay: .15s; }
.psl-type-brand-intro.psl-logo--fade .psl-intro__logo .psl-mask > img { animation-name: psl-fade; }
.psl-type-brand-intro.psl-logo--scale .psl-intro__logo .psl-mask > img { animation-name: psl-scale; }
.psl-type-brand-intro.psl-logo--none .psl-intro__logo .psl-mask > img { animation: none; }
.psl-type-brand-intro .psl-intro__line { animation: psl-fade .8s .3s ease backwards; }
@keyframes psl-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes psl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes psl-scale { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* ---------- Leaving: content goes first ---------- */
.psl-leaving .wpea-screen-loader-content { opacity: 0; transform: translateY(-16px); }
.psl-leaving.psl-type-brand-intro .psl-mask > * { animation: none; transition: transform .5s cubic-bezier(.7, 0, .3, 1), opacity .5s; transform: translateY(-108%); }
.psl-leaving .psl-intro__line { transition: opacity .3s; opacity: 0; }
.psl-leaving .wpea-screen-loader-custom-html { transition: opacity .3s; opacity: 0; }

/* ---------- Panel exits (panels are added by the script) ---------- */
.psl-panels { position: absolute; inset: 0; z-index: 0; display: flex; pointer-events: none; }
.psl-panel {
	flex: 1 1 0;
	background: var(--psl-bg, #fff);
	transition: transform var(--psl-exit, 600ms) cubic-bezier(.77, 0, .175, 1);
	will-change: transform;
}
.psl-panels--shutters-up .psl-panel,
.psl-panels--split-h .psl-panel { margin-right: -1px; }
.psl-panels--blinds-h,
.psl-panels--split-v { flex-direction: column; }
.psl-panels--blinds-h .psl-panel,
.psl-panels--split-v .psl-panel { margin-bottom: -1px; }
.psl-panels--blinds-h .psl-panel { transform-origin: top; }
.psl-panels--layered-up .psl-panel { position: absolute; inset: 0; }
.psl-panels.is-out.psl-panels--shutters-up .psl-panel,
.psl-panels.is-out.psl-panels--layered-up .psl-panel { transform: translateY(-101%); }
.psl-panels.is-out.psl-panels--blinds-h .psl-panel { transform: scaleY(0); }
.psl-panels.is-out.psl-panels--split-v .psl-panel:first-child { transform: translateY(-101%); }
.psl-panels.is-out.psl-panels--split-v .psl-panel:last-child { transform: translateY(101%); }
.psl-panels.is-out.psl-panels--split-h .psl-panel:first-child { transform: translateX(-101%); }
.psl-panels.is-out.psl-panels--split-h .psl-panel:last-child { transform: translateX(101%); }

/* ---------- Classic exits ---------- */
.wpea-exit-fade { opacity: 0; }
.wpea-exit-slide-up { transform: translateY(-100%); }
.wpea-exit-slide-down { transform: translateY(100%); }
.wpea-exit-slide-left { transform: translateX(-100%); }
.wpea-exit-slide-right { transform: translateX(100%); }
.wpea-exit-zoom-out { transform: scale(2); opacity: 0; }
.wpea-exit-zoom-in { transform: scale(0); opacity: 0; }
.wpea-exit-curtain-h { -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); }
.wpea-exit-curtain-v { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
.wpea-exit-curtain-left { transform-origin: left; transform: perspective(1200px) rotateY(90deg); }
.wpea-exit-curtain-right { transform-origin: right; transform: perspective(1200px) rotateY(-90deg); }
.wpea-exit-flip { transform: perspective(1200px) rotateY(90deg); opacity: 0; }
.wpea-exit-circle { -webkit-clip-path: circle(0% at 50% 50%) !important; clip-path: circle(0% at 50% 50%) !important; }

/* ---------- Page transition cover ---------- */
.psl-cover { position: fixed; inset: 0; pointer-events: all; }
.psl-cover i { position: absolute; inset: 0; transform: translateY(101%); transition: transform .6s cubic-bezier(.77, 0, .175, 1); }
.psl-cover i + i { transition-delay: .12s; }
.psl-cover.is-in i { transform: none; }

/* ---------- Small screens & reduced motion ---------- */
@media screen and (max-width: 480px) {
	.wpea-screen-loader-content { width: 90%; }
	.wpea-screen-loader-logo img { max-height: 90px; width: auto; }
	.psl-intro .wpea-screen-loader-logo img { max-height: 28vh; }
}
@media (prefers-reduced-motion: reduce) {
	.psl-svg svg, .psl-svg img, .psl-svgtext, .psl-svgtext *,
	.psl-type-brand-intro .psl-mask > *,
	.psl-type-brand-intro .psl-intro__line { animation: none !important; }
	.psl-panel, .psl-word, .psl-cover i { transition-duration: .01ms !important; }
}
@supports not ((clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))) {
	.wpea-exit-curtain-h, .wpea-exit-curtain-v, .wpea-exit-circle { opacity: 0; }
}