/* Systical — greeting preloader */

.sys-greet {
	--greet-accent: #9afd0d;
	--greet-bg: #070707;
	position: fixed;
	inset: 0;
	/* Above the header, which sits at 9999. */
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--greet-bg);
	transition:
		opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 620ms;
	will-change: opacity;
}

.sys-greet.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sys-greet__inner {
	display: flex;
	align-items: center;
	gap: 22px;
}

.sys-greet__word {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(44px, 7vw, 96px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	/* Scripts with taller glyphs (Hindi, Japanese) would otherwise shunt the
	   dot up and down as the word changes. */
	display: inline-block;
	white-space: nowrap;
}

.sys-greet__dot {
	flex: 0 0 auto;
	width: clamp(10px, 1.1vw, 16px);
	height: clamp(10px, 1.1vw, 16px);
	border-radius: 3px;
	background-color: var(--greet-accent);
}

/* Each greeting is swapped in by JS, which re-triggers this.

   Must stay shorter than the step between greetings, or every word is replaced
   before it has finished arriving and the whole thing reads as a blur. */
.sys-greet__word.is-in {
	animation: sys-greet-in 110ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sys-greet-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* The dot keeps its own pulse so the pause between greetings does not read as
   the page having stalled. */
.sys-greet__dot {
	animation: sys-greet-pulse 1.4s ease-in-out infinite;
}

@keyframes sys-greet-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.45;
		transform: scale(0.82);
	}
}

/* Nothing behind the overlay should scroll while it is up. */
html.sys-greet-lock,
html.sys-greet-lock body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.sys-greet__word.is-in {
		animation: none;
	}

	.sys-greet__dot {
		animation: none;
	}

	.sys-greet {
		transition: opacity 200ms linear, visibility 0s linear 200ms;
	}
}