/* FEF Group Reveal & Loader — Elementor container → Advanced.
 * Children of an enabled container stay hidden (but keep their layout) until the JS engine has seen everything load, then
 * they appear together. The loader mask is built by assets/js/fef-load-group.js; its look comes from the Elementor controls. */

:where(.fef-lg-on) { position: relative; }

/* Hidden until ready — not in the Elementor editor. The 12s animation is a no-JS safety net: the content can never stay hidden. */
body:not(.elementor-editor-active) .fef-lg-on:not(.fef-lg-ready) > *:not(.fef-lg__mask) {
	visibility: hidden;   /* no !important: a CSS animation (the failsafe below) cannot override an !important declaration */
	opacity: 0;
	animation: fef-lg-failsafe 0s linear 12s forwards;
}
@keyframes fef-lg-failsafe { to { visibility: visible; opacity: 1; } }

/* Reveal — "backwards" fill so nothing is left behind on the children once it has played. */
.fef-lg-on.fef-lg-ready > *:not(.fef-lg__mask) { animation-duration: var(--fef-lg-dur, 500ms); animation-timing-function: ease; animation-fill-mode: backwards; }
.fef-lg-reveal-fade.fef-lg-ready    > *:not(.fef-lg__mask) { animation-name: fef-lg-fade; }
.fef-lg-reveal-fade-up.fef-lg-ready > *:not(.fef-lg__mask) { animation-name: fef-lg-fade-up; }
.fef-lg-reveal-zoom.fef-lg-ready    > *:not(.fef-lg__mask) { animation-name: fef-lg-zoom; }
@keyframes fef-lg-fade    { from { opacity: 0; } }
@keyframes fef-lg-fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes fef-lg-zoom    { from { opacity: 0; transform: scale(.96); } }

/* ── Mask ─────────────────────────────────────────────────────────── */
.fef-lg__mask {
	display: flex;
	box-sizing: border-box;
	z-index: 99999;
	padding: 16px;
	background-color: #fff;
	opacity: 1;
	visibility: visible;
}
.fef-lg-cover-container { position: absolute; inset: 0; }
.fef-lg-cover-page      { position: fixed;    inset: 0; }
.fef-lg__mask.is-out {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--fef-lg-dur, 500ms) ease, visibility 0s linear var(--fef-lg-dur, 500ms);
}
.fef-lg__mask--preview { pointer-events: none; }   /* editor preview: clicks fall through to the container */

/* Loader position (presets) */
.fef-lg-pos-center       { align-items: center;     justify-content: center; }
.fef-lg-pos-top          { align-items: flex-start; justify-content: center; }
.fef-lg-pos-bottom       { align-items: flex-end;   justify-content: center; }
.fef-lg-pos-left         { align-items: center;     justify-content: flex-start; }
.fef-lg-pos-right        { align-items: center;     justify-content: flex-end; }
.fef-lg-pos-top-left     { align-items: flex-start; justify-content: flex-start; }
.fef-lg-pos-top-right    { align-items: flex-start; justify-content: flex-end; }
.fef-lg-pos-bottom-left  { align-items: flex-end;   justify-content: flex-start; }
.fef-lg-pos-bottom-right { align-items: flex-end;   justify-content: flex-end; }
.fef-lg-pos-custom       { display: block; }
.fef-lg-pos-custom > .fef-lg__loader { position: absolute; }

/* ── Loader box (spinner + label) ─────────────────────────────────── */
.fef-lg__loader {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	max-width: 100%;
}
.fef-lg__label {
	font-size: 14px;
	line-height: 1.3;
	color: #334155;
	text-align: center;
}

/* ── Spinners — size and colours come from the Elementor controls via custom properties ── */
.fef-lg__spin { --fef-lg-size: 44px; --fef-lg-c1: #2563eb; --fef-lg-c2: rgba(37, 99, 235, .18); display: block; flex: 0 0 auto; width: var(--fef-lg-size); height: var(--fef-lg-size); position: relative; }
.fef-lg__spin > i { display: none; }

.fef-lg-t-ring, .fef-lg-t-dual { border-radius: 50%; box-sizing: border-box; border: calc(var(--fef-lg-size) / 9) solid var(--fef-lg-c2); border-top-color: var(--fef-lg-c1); animation: fef-lg-spin .8s linear infinite; }
.fef-lg-t-dual { border-bottom-color: var(--fef-lg-c1); }

.fef-lg-t-dots { display: flex; align-items: center; justify-content: space-between; }
.fef-lg-t-dots > i:nth-child(-n+3) { display: block; width: calc(var(--fef-lg-size) / 4); height: calc(var(--fef-lg-size) / 4); border-radius: 50%; background: var(--fef-lg-c1); animation: fef-lg-dot 1s ease-in-out infinite both; }
.fef-lg-t-dots > i:nth-child(2) { animation-delay: .15s; }
.fef-lg-t-dots > i:nth-child(3) { animation-delay: .3s; }

.fef-lg-t-bars { display: flex; align-items: center; justify-content: space-between; }
.fef-lg-t-bars > i { display: block; width: calc(var(--fef-lg-size) / 9); height: 100%; border-radius: 2px; background: var(--fef-lg-c1); animation: fef-lg-bar 1s ease-in-out infinite; }
.fef-lg-t-bars > i:nth-child(2) { animation-delay: .1s; }
.fef-lg-t-bars > i:nth-child(3) { animation-delay: .2s; }
.fef-lg-t-bars > i:nth-child(4) { animation-delay: .3s; }
.fef-lg-t-bars > i:nth-child(5) { animation-delay: .4s; }

.fef-lg-t-pulse { border-radius: 50%; background: var(--fef-lg-c1); animation: fef-lg-pulse 1.1s ease-in-out infinite; }

@keyframes fef-lg-spin  { to { transform: rotate(360deg); } }
@keyframes fef-lg-dot   { 0%, 80%, 100% { transform: scale(.4); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
@keyframes fef-lg-bar   { 0%, 40%, 100% { transform: scaleY(.35); } 20% { transform: scaleY(1); } }
@keyframes fef-lg-pulse { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* A loader needs some motion to read as "loading" — reduced-motion just slows it down. */
@media (prefers-reduced-motion: reduce) {
	.fef-lg-t-ring, .fef-lg-t-dual, .fef-lg-t-pulse, .fef-lg-t-dots > i, .fef-lg-t-bars > i { animation-duration: 2.4s; }
	.fef-lg-on.fef-lg-ready > *:not(.fef-lg__mask) { animation: none; }
}