/* =========================================================
   Statistics Counters
   ========================================================= */

.statistics-counters {
	--stats-columns-desktop: 4;
	--stats-columns-tablet: 2;
	--stats-columns-mobile: 1;

	--statistics-ink: #171516;
	--statistics-label: #111111;
	--statistics-accent: #e7652a;
	--statistics-divider: rgba(35, 31, 32, 0.42);
	--statistics-paper: #ffffff;

	position: relative;

	width: 100%;

	margin-block:
		clamp(2rem, 5vw, 4rem);
}

/* =========================================================
   Grid and outer shadow
   ========================================================= */

.statistics-counters__grid {
	display: grid;

	grid-template-columns:
		repeat(
			var(--stats-columns-desktop),
			minmax(0, 1fr)
		);

	/*
	 * The one-pixel gap exposes the grid background and
	 * creates the exact divider lines between cards.
	 */
	gap: 1px;

	width: 100%;

	background-color:
		var(--statistics-divider);

	box-shadow:
		0 18px 42px
			rgba(35, 31, 32, 0.11),
		0 4px 12px
			rgba(35, 31, 32, 0.055);

	overflow: hidden;

	box-sizing: border-box;

	transition:
		box-shadow 400ms ease,
		transform 500ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}

/*
 * Give the entire panel a slight depth increase when a card
 * is being hovered.
 */
.statistics-counters__grid:hover {
	box-shadow:
		0 24px 54px
			rgba(35, 31, 32, 0.14),
		0 6px 16px
			rgba(35, 31, 32, 0.07);
}

/* =========================================================
   Statistic card
   ========================================================= */

.statistic-card {
	position: relative;
	isolation: isolate;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;

	min-width: 0;
	min-height: 240px;

	margin: 0;

	padding:
		clamp(2.25rem, 4vw, 2.8rem)
		clamp(1.5rem, 3vw, 2.25rem);

	color:
		var(--statistics-ink);

	background-color:
		var(--statistics-paper);

	overflow: hidden;

	box-sizing: border-box;

	/*
	 * Visible by default so the content remains accessible
	 * when JavaScript does not load.
	 */
	opacity: 1;
	transform:
		translateY(0)
		scale(1);

	transition:
		opacity 650ms ease,
		transform 750ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		background-color 300ms ease,
		box-shadow 350ms ease;

	transition-delay:
		var(--statistic-delay, 0ms);
}

/*
 * Soft decorative glow. It becomes slightly more visible on
 * hover without changing the white design.
 */
.statistic-card::before {
	content: "";

	position: absolute;
	z-index: -1;

	top: -65%;
	right: -55%;

	width: 125%;
	aspect-ratio: 1;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(231, 101, 42, 0.095)
				0%,
			rgba(231, 101, 42, 0)
				68%
		);

	opacity: 0;
	transform:
		translate3d(12%, -10%, 0)
		scale(0.8);

	pointer-events: none;

	transition:
		opacity 450ms ease,
		transform 700ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
}

/*
 * A very subtle sheen crossing the card on hover.
 */
.statistic-card::after {
	content: "";

	position: absolute;
	z-index: 2;

	top: 0;
	bottom: 0;
	left: -75%;

	width: 42%;

	background:
		linear-gradient(
			105deg,
			rgba(255, 255, 255, 0)
				0%,
			rgba(255, 255, 255, 0.3)
				48%,
			rgba(255, 255, 255, 0)
				100%
		);

	transform: skewX(-16deg);

	opacity: 0;

	pointer-events: none;
}

/* =========================================================
   Progressive entrance state
   ========================================================= */

.statistics-counters.has-counter-animation
	.statistic-card {
	opacity: 0;

	transform:
		translateY(30px)
		scale(0.985);
}

.statistics-counters.has-counter-animation.is-visible
	.statistic-card {
	opacity: 1;

	transform:
		translateY(0)
		scale(1);
}

/* =========================================================
   Card hover interaction
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
	.statistics-counters.is-visible
		.statistic-card:hover {
		z-index: 3;

		transform:
			translateY(-8px)
			scale(1.008);

		background-color: #ffffff;

		box-shadow:
			0 18px 36px
			rgba(35, 31, 32, 0.14);
	}

	.statistics-counters.is-visible
		.statistic-card:hover::before {
		opacity: 1;

		transform:
			translate3d(0, 0, 0)
			scale(1);
	}

	.statistics-counters.is-visible
		.statistic-card:hover::after {
		opacity: 1;

		animation:
			statistic-card-sheen
			850ms ease forwards;
	}
}

@keyframes statistic-card-sheen {
	from {
		left: -75%;
	}

	to {
		left: 140%;
	}
}

/* =========================================================
   Number
   ========================================================= */

.statistic-card__number {
	position: relative;
	z-index: 1;

	display: block;

	margin: 0 0 1.25rem;
	padding: 0 0 1rem;

	color:
		var(--statistics-ink);

	font-family:
		"Libre Baskerville",
		Georgia,
		serif;

	font-size:
		clamp(3.8rem, 6vw, 5rem);

	font-weight: 700;
	line-height: 0.88;
	letter-spacing: -0.055em;

	font-variant-numeric:
		tabular-nums lining-nums;

	transform: translateY(0);
	filter: blur(0);

	transition:
		color 300ms ease,
		transform 600ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		filter 500ms ease;
}

/*
 * Orange line under the number.
 */
.statistic-card__number::after {
	content: "";

	position: absolute;

	bottom: 0;
	left: 0;

	width: 60px;
	height: 2px;

	background-color:
		var(--statistics-accent);

	transform: scaleX(1);
	transform-origin: left center;

	transition:
		transform 700ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
		width 300ms ease;

	transition-delay:
		calc(
			var(--statistic-delay, 0ms) +
			180ms
		);
}

/*
 * Initial number and underline state.
 */
.statistics-counters.has-counter-animation
	.statistic-card__number {
	transform: translateY(12px);
	filter: blur(4px);
}

.statistics-counters.has-counter-animation
	.statistic-card__number::after {
	transform: scaleX(0);
}

.statistics-counters.has-counter-animation.is-visible
	.statistic-card__number {
	transform: translateY(0);
	filter: blur(0);
}

.statistics-counters.has-counter-animation.is-visible
	.statistic-card__number::after {
	transform: scaleX(1);
}

/*
 * Counter is actively changing.
 */
.statistic-card__number.is-counting {
	color:
		var(--statistics-ink);
}

/*
 * Small completion animation after the final value appears.
 */
.statistic-card__number.is-counted {
	animation:
		statistic-number-settle
		480ms
		cubic-bezier(
			0.34,
			1.56,
			0.64,
			1
		);
}

@keyframes statistic-number-settle {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.045);
	}

	100% {
		transform: scale(1);
	}
}

@media (hover: hover) and (pointer: fine) {
	.statistic-card:hover
		.statistic-card__number {
		color:
			var(--statistics-accent);
	}

	.statistic-card:hover
		.statistic-card__number::after {
		width: 76px;
	}
}

/* =========================================================
   Label
   ========================================================= */

.statistic-card__label {
	position: relative;
	z-index: 1;

	margin: 0;

	color:
		var(--statistics-label);

	font-family:
		"Montserrat",
		Arial,
		sans-serif;

	font-size:
		clamp(1rem, 1.8vw, 1.1rem);

	font-weight: 700;
	line-height: 1.18;

	opacity: 1;
	transform: translateY(0);

	transition:
		color 300ms ease,
		opacity 600ms ease,
		transform 700ms
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);

	transition-delay:
		calc(
			var(--statistic-delay, 0ms) +
			160ms
		);
}

.statistics-counters.has-counter-animation
	.statistic-card__label {
	opacity: 0;
	transform: translateY(12px);
}

.statistics-counters.has-counter-animation.is-visible
	.statistic-card__label {
	opacity: 1;
	transform: translateY(0);
}

.statistic-card__label br {
	display: block;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991px) {
	.statistics-counters__grid {
		grid-template-columns:
			repeat(
				var(--stats-columns-tablet),
				minmax(0, 1fr)
			);
	}

	.statistic-card {
		min-height: 220px;
	}
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 639px) {
	.statistics-counters__grid {
		grid-template-columns:
			repeat(
				var(--stats-columns-mobile),
				minmax(0, 1fr)
			);
	}

	.statistic-card {
		min-height: auto;

		padding:
			2rem 1.5rem;
	}

	.statistic-card__number {
		font-size:
			clamp(3.1rem, 14vw, 4.5rem);
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.statistics-counters,
	.statistics-counters *,
	.statistics-counters *::before,
	.statistics-counters *::after {
		animation: none !important;

		transition: none !important;
	}

	.statistics-counters
		.statistic-card,
	.statistics-counters
		.statistic-card__number,
	.statistics-counters
		.statistic-card__label,
	.statistics-counters
		.statistic-card__number::after {
		opacity: 1 !important;

		transform: none !important;

		filter: none !important;
	}
}