/*!
 * CorporatePreloader — full-screen brand intro that docks into the real header logo
 * =============================================================================
 * A restrained, "corporate" splash sequence:
 *
 *   1. HOLD — a solid-color, full-screen overlay appears instantly (no
 *      flash of the real page — see preloader.js for how). A clone of the
 *      site's own header logo fades/scales in at the center, with a thin
 *      loading bar beneath it so it reads as "something is loading", not
 *      just a static splash.
 *   2. DOCK — the cloned logo animates (FLIP technique, driven by JS since
 *      the target position depends on the real header's live layout) from
 *      the center of the screen to the EXACT position/size of the real
 *      header logo underneath. The overlay's solid background is still
 *      fully covering the page at this point.
 *   3. EXIT — the solid background splits into two panels (top slides up,
 *      bottom slides down) revealing the real page beneath. The cloned
 *      logo fades out a beat into that reveal, right as it lands exactly
 *      on top of the real header logo, so the hand-off is invisible.
 *
 * All timings/colors are configurable from PHP (see loader.php) via
 * `window.rgPreloaderConfig` and the `--rg-pl-bg` custom property; only
 * the two class toggles (`is-docking` / `is-exiting`) and the one-time
 * intro keyframe live here.
 */

#rg-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
}

.rg-preloader__curtain {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	background: var(--rg-pl-bg, #0d1526);
	transition: transform 600ms cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}
.rg-preloader__curtain--top {
	top: 0;
}
.rg-preloader__curtain--bottom {
	bottom: 0;
}
#rg-preloader.is-exiting .rg-preloader__curtain--top {
	transform: translateY(-100%);
}
#rg-preloader.is-exiting .rg-preloader__curtain--bottom {
	transform: translateY(100%);
}

.rg-preloader__stage {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	transition: opacity 300ms ease;
}
#rg-preloader.is-docking .rg-preloader__stage,
#rg-preloader.is-exiting .rg-preloader__stage {
	/* The loading bar and the stage's own centering are no longer relevant
	   once the logo has switched to a fixed, JS-driven position for its
	   trip to the header — fade the rest of the stage chrome out. */
	opacity: 0;
	pointer-events: none;
}

.rg-preloader__logo-wrap {
	position: relative;
	display: inline-flex;
}

.rg-preloader__logo {
	display: block;
	max-width: min(220px, 40vw);
	height: auto;
	width: auto;
	opacity: 0;
	transform: scale(0.85);
	animation: rgpl-intro 700ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes rgpl-intro {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Keep the logo visible through the dock (its position/size are being
   driven directly by inline styles from JS at this point); only start
   fading it once the curtains are well into their exit, so it hands off
   invisibly to the real header logo sitting in the same spot underneath. */
#rg-preloader.is-docking .rg-preloader__logo {
	opacity: 1;
}
#rg-preloader.is-exiting .rg-preloader__logo {
	transition: opacity 300ms ease 300ms;
	opacity: 0;
}

.rg-preloader__bar {
	width: 130px;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}
.rg-preloader__bar span {
	display: block;
	height: 100%;
	width: 35%;
	border-radius: 2px;
	background: #fff;
	animation: rgpl-bar 1.3s ease-in-out infinite;
}
@keyframes rgpl-bar {
	0% {
		transform: translateX(-140%);
	}
	100% {
		transform: translateX(380%);
	}
}

@media (prefers-reduced-motion: reduce) {
	#rg-preloader * {
		animation: none !important;
		transition: none !important;
	}
}

/* ---- Lightweight variant for repeat internal navigation --------------- */
/* No logo, no docking — just the solid brand color with an ambient
   drifting glow and a soft diagonal sheen, faded out as a whole once the
   page underneath is ready. See runTransition() in preloader.js. */

#rg-preloader.rg-preloader--transition {
	transition: opacity 300ms ease;
}
#rg-preloader.rg-preloader--transition.is-exiting {
	opacity: 0;
}

.rg-preloader__ambient {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--rg-pl-bg, #0d1526);
}

.rg-preloader__glow {
	position: absolute;
	width: 60vmax;
	height: 60vmax;
	left: 50%;
	top: 50%;
	background: radial-gradient(circle, rgba(0, 173, 196, 0.35) 0%, rgba(0, 173, 196, 0) 70%);
	filter: blur(10px);
	animation: rgpl-drift 3.5s ease-in-out infinite;
}
@keyframes rgpl-drift {
	0%,
	100% {
		transform: translate(-55%, -55%) scale(1);
	}
	50% {
		transform: translate(-45%, -45%) scale(1.15);
	}
}

.rg-preloader__sheen {
	position: absolute;
	top: -20%;
	left: -60%;
	width: 55%;
	height: 140%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.12) 50%,
		rgba(255, 255, 255, 0) 70%
	);
	animation: rgpl-sheen 1.6s ease-in-out infinite;
}
@keyframes rgpl-sheen {
	0% {
		left: -60%;
	}
	100% {
		left: 120%;
	}
}