/* ==========================================================================
   Preloader — once per browser visit (inc/preloader.php)
   --------------------------------------------------------------------------
   The first page of a visit opens behind a dark screen: the logo builds,
   then the screen lifts away like a curtain while the page's entrance
   plays. Home gets the full version (counter + line, ~4.1s), every other
   page a short one (logo + curtain, ~2.2s). Later pages: none.
   Markup: template-parts/shared/preloader.php; behaviour:
   assets/js/preloader.js. Its orange is #ff7a3b (the logo's dot).
   1. The full preloader
   2. The short preloader (inner pages)
   3. Headings wait for the reveal
   ========================================================================== */


/* 1. The full preloader (the first page of a visit, if it's the home page)
   ==========================================================================
   Only on with html.has-loader (set by the decision script in the <head> —
   never with JavaScript off or animations turned off). Timeline: the logo
   builds (0–1.6s) while the counter runs (0.2–2.8s); the centre drifts up,
   the screen lifts away (3.05s) and the page's entrance plays behind it. Its orange is
   the Test page's (#ff7a3b — the same as the logo's dot), not the site's
   --color-orange. */

.home-loader {
	--loader-orange: #ff7a3b;
	--ease-exit: cubic-bezier(0.76, 0, 0.24, 1);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	overflow: hidden;
	border-bottom: 6px solid var(--loader-orange);
	background-color: var(--color-night);
	font-family: var(--font-sans);
	text-align: left;
	pointer-events: none;
}

.has-loader .home-loader {
	display: block;
	animation: hl-curtain-up 1.1s var(--ease-exit) 3.05s both;
}

/* The page under it stays still while it's up. */
html.is-loading,
html.is-loading body {
	overflow: hidden;
}

/* The kept scrollbar space (the scrollbar is hidden while the page is
   still) shows the body's background: dark like the loader until the
   curtain has mostly lifted (it starts at 3.05s), then back to normal. */
.has-loader body {
	animation: hl-gutter 0.45s ease-out 3.6s backwards;
}

@keyframes hl-gutter {
	from {
		background-color: var(--color-night);
	}
}

.home-loader__centre {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 80px;
	animation: hl-drift-up 0.5s cubic-bezier(0.7, 0, 0.84, 0) 2.85s both;
}

.home-loader__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-m);
}

.home-loader .site-logo__mark {
	width: clamp(90px, 12vw, 150px);
	height: auto;
	overflow: visible;
}

.home-loader .logo-mark__stem,
.home-loader .logo-mark__bowl,
.home-loader .logo-mark__dot {
	transform-box: fill-box;
	transform-origin: center;
}

/* Dark parts of the mark turn light; the dot stays orange and glows. */
.home-loader .logo-mark__bowl,
.home-loader .logo-mark__stem path {
	fill: var(--color-paper);
}

.home-loader .logo-mark__dot {
	filter: drop-shadow(0 0 18px rgba(255, 122, 59, 0.45));
	animation: hl-dot-bounce 0.7s linear 0.7s both;
}

.home-loader .logo-mark__stem {
	animation: hl-stem-drop 0.6s var(--ease-out) 0s both;
}

.home-loader .logo-mark__bowl {
	animation: hl-bowl-turn 0.7s var(--ease-out) 0.25s both;
}

.home-loader__name {
	display: flex;
	overflow: hidden;
	color: var(--color-paper);
	font-size: clamp(18px, 2.2vw, 28px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.home-loader__char {
	display: inline-block;
	animation: hl-rise 0.5s var(--ease-out) calc(1.1s + var(--n) * 0.04s) both;
}

.home-loader__bottom {
	position: absolute;
	right: var(--gutter);
	bottom: var(--space-xl);
	left: var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

.home-loader__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.home-loader__hint {
	padding-bottom: 0.6em;
	color: var(--color-paper);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.5;
}

.home-loader__number {
	color: var(--color-paper);
	font-size: clamp(48px, 7vw, 110px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	line-height: 0.85;
}

.home-loader__percent {
	color: var(--loader-orange);
	font-size: 0.4em;
	vertical-align: top;
}

.home-loader__line {
	display: block;
	height: 2px;
	background-color: var(--color-line-light);
}

.home-loader__fill {
	display: block;
	height: 100%;
	background-color: var(--loader-orange);
	transform: scaleX(0);
	transform-origin: left;
	animation: hl-fill 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
}

@keyframes hl-stem-drop {
	from {
		opacity: 0;
		transform: translateY(-120%);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hl-bowl-turn {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(0.6);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hl-dot-bounce {
	0% {
		opacity: 0;
		transform: translateY(-260%);
	}

	45% {
		opacity: 1;
		transform: translateY(0) scale(1.15, 0.85);
	}

	65% {
		transform: translateY(-35%) scale(0.95, 1.05);
	}

	82% {
		transform: translateY(0) scale(1.05, 0.95);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes hl-rise {
	from {
		transform: translateY(110%);
	}

	to {
		transform: none;
	}
}

@keyframes hl-fill {
	to {
		transform: scaleX(1);
	}
}

@keyframes hl-drift-up {
	to {
		opacity: 0;
		transform: translateY(-40px);
	}
}

@keyframes hl-curtain-up {
	to {
		translate: 0 calc(-100% - 6px);
	}
}

@media (max-width: 810px) {
	.home-loader__centre {
		padding-bottom: 160px;
	}
}


/* 2. The short preloader (inner pages)
   ==========================================================================
   Same logo build and curtain, faster, without the counter and line:
   logo 0–1s, drifts up at 1.2s, the curtain lifts at 1.35s (0.9s). */

.has-loader--short .home-loader {
	animation: hl-curtain-up 0.9s var(--ease-exit) 1.35s both;
}

.has-loader--short .home-loader__bottom {
	display: none;
}

.has-loader--short .home-loader__centre {
	padding-bottom: 0;
	animation: hl-drift-up 0.4s cubic-bezier(0.7, 0, 0.84, 0) 1.2s both;
}

.has-loader--short .home-loader .logo-mark__stem {
	animation-duration: 0.45s;
}

.has-loader--short .home-loader .logo-mark__bowl {
	animation: hl-bowl-turn 0.5s var(--ease-out) 0.12s both;
}

.has-loader--short .home-loader .logo-mark__dot {
	animation: hl-dot-bounce 0.55s linear 0.35s both;
}

.has-loader--short .home-loader__char {
	animation: hl-rise 0.4s var(--ease-out) calc(0.45s + var(--n) * 0.025s) both;
}

/* The scrollbar gutter stays dark until the curtain has mostly lifted. */
.has-loader--short body {
	animation: hl-gutter 0.45s ease-out 1.75s backwards;
}


/* 3. Headings wait for the reveal
   ==========================================================================
   The words' blur-in (main.js) is held while the preloader is up, so it
   plays as the curtain lifts instead of hidden underneath it. */

html.is-loading .reveal-word {
	animation-play-state: paused;
}