/**
 * Latitude Key — Home intro preloader.
 *
 * White full-screen overlay. The logo's outlines draw on (stroke), then the
 * brand colours bloom in — emblem first, wordmark second. Finally the veil
 * hands off to the page: the white backdrop melts to transparent while the
 * logo pales to white and flies up to its resting spot above the search bar
 * (the "#lk-hero-logo" element, injected by hero.js). The flight itself (the
 * translate/scale) and the colour→white cross-fade are driven from
 * preloader.js because they depend on the live measured target position.
 *
 * SEO/perf notes:
 * - The page content stays in the DOM the whole time (the overlay only sits on
 *   top), so it does not block indexing or delay the real content build.
 * - A JS failsafe removes the overlay after a few seconds even if animations
 *   never fire, so a visitor is never trapped on a white screen.
 * - prefers-reduced-motion and "already seen this session" skip it entirely
 *   (handled by an inline head script that adds .lk-pl-skip on <html>).
 *
 * The essential "cover the screen instantly, white" rules are inlined in the
 * document <head> to avoid any flash before this file loads; this file carries
 * the reveal choreography.
 */

/* Two brand colours, pulled straight from the logo artwork. */
.lk-preloader {
	--lk-pl-green: #84cba1;
	--lk-pl-blue:  #5581a2;
	--lk-pl-draw:  1.15s; /* outline draw duration */
	--lk-pl-fill:  0.55s; /* colour fill-in duration */
}

/* Logo box inside the overlay. */
.lk-preloader__logo {
	width: min(340px, 62vw);
	height: auto;
	overflow: visible;
	transform-origin: center center;
	will-change: transform;
}

/* Both paths start as invisible outlines that will "draw" on. */
.lk-preloader__logo path {
	fill: transparent;
	stroke-width: 1.1px;
	vector-effect: non-scaling-stroke; /* constant hairline whatever the scale */
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;   /* pathLength is normalised to 1 in the SVG */
	stroke-dashoffset: 1;  /* fully "undrawn" to begin with */
}

.lk-preloader__logo .lk-pl-emblem { stroke: var(--lk-pl-green); }
.lk-preloader__logo .lk-pl-text   { stroke: var(--lk-pl-blue); }

/* ---- Play: added by JS on the overlay once it decides to run ---- */

.lk-preloader.is-animating .lk-pl-emblem {
	animation:
		lk-pl-draw var(--lk-pl-draw) ease-in-out forwards,
		lk-pl-fill-green var(--lk-pl-fill) ease-out forwards;
	animation-delay: 0s, calc(var(--lk-pl-draw) - 0.15s);
}

.lk-preloader.is-animating .lk-pl-text {
	animation:
		lk-pl-draw var(--lk-pl-draw) ease-in-out forwards,
		lk-pl-fill-blue var(--lk-pl-fill) ease-out forwards;
	/* wordmark starts a touch after the emblem, and fills once it has drawn */
	animation-delay: 0.45s, calc(0.45s + var(--lk-pl-draw) - 0.15s);
}

@keyframes lk-pl-draw {
	to { stroke-dashoffset: 0; }
}

/* Bloom the fill in while softening the outline so the final mark reads clean. */
@keyframes lk-pl-fill-green {
	from { fill: rgba(132, 203, 161, 0); stroke-width: 1.1px; }
	to   { fill: rgba(132, 203, 161, 1); stroke-width: 0.4px; }
}
@keyframes lk-pl-fill-blue {
	from { fill: rgba(85, 129, 162, 0); stroke-width: 1.1px; }
	to   { fill: rgba(85, 129, 162, 1); stroke-width: 0.4px; }
}

/* A gentle settle on the whole logo for a bit of life (only during the draw;
   removed the instant the hand-off flight begins so it can't fight the FLIP). */
.lk-preloader.is-animating:not(.is-handoff) .lk-preloader__logo {
	animation: lk-pl-settle 1.6s ease-out both;
}
@keyframes lk-pl-settle {
	from { transform: scale(0.965); opacity: 0.85; }
	to   { transform: scale(1);     opacity: 1; }
}

/* ---- Hand-off ----
   The backdrop melts to transparent so the hero shows through. The logo's
   flight (translate + scale to the header position) and its colour→white
   cross-fade are set inline by preloader.js (they need the live target rect),
   so nothing here must fight them: during hand-off we drop the settle animation
   (above) and let JS own the logo's transform + fill. */
.lk-preloader.is-handoff {
	background-color: transparent !important;
	transition: background-color 0.85s ease;
	pointer-events: none;
}

/* Belt-and-braces fade path (used if there is no hand-off target to fly to). */
.lk-preloader.is-leaving {
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	pointer-events: none;
}

/* Respect reduced-motion: never animate; the head script also hides it, this
   is a belt-and-braces fallback for anything that still renders the overlay. */
@media (prefers-reduced-motion: reduce) {
	.lk-preloader { display: none !important; }
}