/* preloader.css */

/* ---- overrides ---- */
/* ──── Preloader (homepage, cold load) ───────────────────────────────
     2×2 grid:
       Row 1: [orange — logo + status] [pattern fill — % progress]
       Row 2: [card-left shape illu]  [card-right shape-service illu]
     Animation: the bottom illustrations play forward/reverse → the pattern
     fills → the pattern pushes the orange cell left → the bottom cards slide
     DOWN on a stagger → the pattern block slides DOWN. The percentage reads
     READY at 100. */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 200;
	overflow: clip;
	/* The background is grey-700 hardcoded — the same colour as the pattern
	   crosses (see the .preloader__fill SVG). mapped-border-default is not used
	   here because it depends on the data-theme-section cascade, and the
	   preloader sits outside the themed sections. */
	background-color: var(--alias-grey-700);
	/* Do NOT add will-change/transform/filter here: it would stop
	   background-attachment:fixed on .preloader__fill being viewport-relative,
	   and the crosses would drift. */
}
.preloader__grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	/* A 1px gap between cells lets the dark background behind show through as a border line */
	gap: 1px;
}
.preloader__cell {
	position: relative;
	overflow: hidden;
	background-color: var(--mapped-surface-dark);
}
/* Top-left: the cell holding the logo. No chamfered corners.
   White, not the brand blue it used to be. The marks are blue-and-red artwork
   drawn for a white ground: composited over #164194, 39% of the AUTOVISION mark
   and 48% of the KTEO one fall below 1.5:1 against the cell and simply vanish.
   That is why the logo used to sit on its own white plate -- and that plate is
   the white rectangle the client asked to remove. Making the whole cell white
   removes the rectangle without costing the mark a single pixel of contrast. */
.preloader__orange {
	background-color: #fff;
	color: var(--alias-grey-900);
	/* padding-left identical to the cards — set through the CSS variable below */
	padding: var(--mapped-padding-md) var(--mapped-padding-sm);
	display: flex;
	flex-direction: column;
	/* The cell used to hold status lines under the mark, which is why its content
	   sat top-left. The mark is all that is left, so it is centred in the cell on
	   both axes -- justify-content is the vertical one here, the column being the
	   main axis. The padding stays as a floor, so the mark can never touch an
	   edge on a short window. */
	justify-content: center;
	align-items: center;
	/* z=2 so that during the reveal squeeze the orange cell travels over the pattern */
	z-index: 2;
}
/* ── The logo panel and the mark ──────────────────────────────────────────────
   Both are declared in their START state here, not set by GSAP.

   The intro used to open with a gsap.set(). That runs from startLogoIntro(),
   after first paint, so the browser painted the panel open and the mark
   finished, and only then did it snap shut and play. Declaring the from-state in
   CSS means the first frame the user sees is already the beginning of the
   animation. assets/js/components/preloader.js only animates the way OUT of it.
   ─────────────────────────────────────────────────────────────────────────── */
.preloader__logo {
	/* No background and no padding: the cell itself is white now, so a plate here
	   would only draw the rectangle we are trying to get rid of. */
	/* Still fit-content even though the cell now centres its content: without it
	   this box spans its parent and the clip-path wipe below would spend its first
	   frames sweeping empty space before it reached the mark. */
	width: fit-content;
	clip-path: inset(0 100% 0 0);
	will-change: clip-path;
}

.preloader__logo-img {
	display: block;
	width: auto;
	/* The loading screen has one job now that the status lines are gone, so the
	   mark takes the room they used. Capped against the cell so it cannot
	   overflow on a short or narrow window. */
	height: min(9em, 22vh);
	max-width: 100%;
	opacity: 0;
	transform: translateX(-6%) scale(1.18);
	will-change: transform, opacity;
}

@media screen and (max-width: 991px) {
	.preloader__logo-img {
		height: min(6.5em, 18vh);
	}
}

.preloader__status {
	margin-top: var(--mapped-padding-sm);
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	font-family: var(--brand-font-family);
	font-size: 0.875em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Top-right: pattern fill + % progress. */
.preloader__pattern {
	background-color: var(--mapped-surface-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
/* The crosses are STATIC: background-attachment:fixed anchors them to the
   viewport, and the fill uncovers them left to right. Their grey-700 colour is
   baked into the SVG. */
.preloader__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(var(--preloader-load, 0) * 100%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7h8v1H4zM7 4h1v8H7z' fill='%232f3032'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 16px 16px;
	background-attachment: fixed;
}
.preloader__progress {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--alias-grey-300);
	font-family: var(--brand-font-family);
	font-size: 2.5em;
	line-height: 1;
}
.preloader__square {
	width: 0.6em;
	height: 0.6em;
	background-color: var(--mapped-surface-action);
	animation: preloaderBlink 1.2s ease-in-out infinite;
}
/* The reveal-phase overlay — a separate layer above the grid. It starts exactly
   over the top-right pattern cell and grows during the squeeze to fill the
   viewport. The grid cells underneath never move; the overlay simply covers
   them. */
.preloader__overlay {
	position: absolute;
	z-index: 5;
	display: none; /* JS enables it at startReveal */
	align-items: center;
	justify-content: center;
	background-color: var(--mapped-surface-dark);
	overflow: hidden;
}
.preloader__overlay-fill {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7h8v1H4zM7 4h1v8H7z' fill='%232f3032'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 16px 16px;
	background-attachment: fixed;
}

/* Row 2 cards: dark cells with an annotation on top and a shape illustration. */
.preloader__card {
	background-color: var(--mapped-surface-dark);
	padding: var(--mapped-padding-md) var(--mapped-padding-sm);
	display: flex;
	flex-direction: column;
	/* The cell used to hold status lines under the mark, which is why its content
	   sat top-left. The mark is all that is left, so it is centred in the cell on
	   both axes -- justify-content is the vertical one here, the column being the
	   main axis. The padding stays as a floor, so the mark can never touch an
	   edge on a short window. */
	justify-content: center;
	align-items: center;
	gap: var(--mapped-padding-md);
	color: var(--alias-grey-300);
	align-items: flex-start; /* all content sits against the left edge */
}
.preloader__card .card_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mapped-padding-sm);
}
.preloader__card .card_head-left {
	display: flex;
	align-items: center;
	gap: var(--mapped-padding-sm);
}
.preloader__card .card_illustration-wrap {
	flex: 1;
	margin: 0; /* no auto-centring — the illustration stays left */
}
/* Mobile (≤767): split vertically — the pattern and percentage on top, the rest hidden. */
@media screen and (max-width: 767px) {
	.preloader__grid {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.preloader__orange,
	.preloader__card {
		display: none;
	}
}
/* Reduced motion → the preloader is not shown (JS performs an instant reveal). */
@media (prefers-reduced-motion: reduce) {
	.preloader {
		display: none;
	}
}

/* The two marks occupy one grid cell, so the white panel takes the width of the
   wider of them and neither moves as they cross-fade. The from-state above
   (opacity 0, offset and scaled up) applies to both: the incoming mark arrives
   the same way the first one did. */
.preloader__logo-stack {
	display: grid;
	align-items: center;
}

.preloader__logo-stack > .preloader__logo-img {
	grid-area: 1 / 1;
	justify-self: center;
}