/* First-visit loading screen: a bar fills across the middle while a counter
   runs up at the bottom left, then the bar draws itself in to a dot — the same
   dot the pointer carries once the site takes over. */

.fcg-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483600; /* over everything, under the cursor itself */
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.fcg-loader.is-gone {
	opacity: 0;
	pointer-events: none;
}

/* the bar: a dim track with a white fill running across it */
.fcg-loader-bar {
	position: relative;
	width: var(--bar-w, 190px);
	height: 3px;
	border-radius: 999px;
	background: #3a3a3a;
	overflow: hidden;
	transition: width 0.62s cubic-bezier(0.65, 0, 0.35, 1),
		height 0.62s cubic-bezier(0.65, 0, 0.35, 1),
		background-color 0.4s ease;
}
.fcg-loader-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: #fff;
	border-radius: inherit;
}

/* the bar closes into the dot the cursor takes over */
.fcg-loader.is-dot .fcg-loader-bar {
	width: var(--dot, 13px);
	height: var(--dot, 13px);
	background: #fff;
}
.fcg-loader.is-dot .fcg-loader-fill {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* the count, bottom left, large — the same figure the bar is filling to */
.fcg-loader-count {
	position: absolute;
	left: clamp(18px, 2.4vw, 40px);
	bottom: clamp(10px, 1.6vw, 28px);
	margin: 0;
	color: #fff;
	font-family: stolzl, sans-serif;
	font-weight: 300;
	font-size: clamp(46px, 11vh, 120px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.45s ease;
}
/* it goes as the bar closes into the dot */
.fcg-loader.is-dot .fcg-loader-count {
	opacity: 0;
}

/* While it runs, the pointer's own ball stays out of the way. The two pieces
   are hidden rather than their wrapper: the wrapper draws no box of its own, so
   an opacity set on it would have nothing to apply to. */
html.fcg-loading .fcg-cursor-dot,
html.fcg-loading .fcg-cursor-badge {
	opacity: 0 !important;
}
