/* ==========================================================================
   HOMEPAGE ABOUT SECTION
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.home-about.section {
	position: relative;

	/*
	 * Keep the About section close to the technology section.
	 * We will handle tablet/mobile spacing later.
	 */
	padding: var(--space-3) var(--space-2) var(--space-7);

	overflow: hidden;
}


/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */

.home-about__container {
	display: grid;

	grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.8fr);

	align-items: center;

	gap: var(--space-5);
}


/* ==========================================================================
   LEFT CONTENT
   ========================================================================== */

.home-about__content {
	max-width: 500px;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.home-about__eyebrow {
	margin: 0 0 var(--space-2);

	font-family: var(--font-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.2;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	color: var(--color-primary);
}


/* ==========================================================================
   HEADING
   ========================================================================== */

.home-about__heading {
	max-width: 500px;

	margin: 0;

	font-family: var(--font-primary);
	font-size: 2.5rem;
	font-weight: var(--fw-bold);
	line-height: 1.08;

	letter-spacing: -0.055em;

	color: var(--color-text);
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.home-about__description {
	max-width: 500px;

	margin: var(--space-3) 0 0;

	font-family: var(--font-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);

	color: var(--color-text);
}


/* ==========================================================================
   MORE ABOUT ME
   ========================================================================== */

.home-about__link {
	display: inline-flex;
	align-items: center;

	gap: var(--space-1);

	margin-top: var(--space-3);

	font-family: var(--font-primary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 1;

	color: var(--color-text);

	text-decoration: none;

	transition:
		color var(--transition-fast),
		gap var(--transition-fast);
}

.home-about__link:hover {
	gap: 0.75rem;

	color: var(--color-primary);
}


/* ==========================================================================
   LINK ARROW
   ========================================================================== */

.home-about__link-arrow {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 22px;
	height: 22px;

	font-size: var(--fs-base);
	line-height: 1;

	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);

	transition:
		transform var(--transition-fast),
		border-color var(--transition-fast);
}

.home-about__link:hover .home-about__link-arrow {
	transform: translate(2px, -2px);

	border-color: var(--color-primary);
}

/* ==========================================================================
   STATISTICS GRID
   ========================================================================== */

.home-about__stats {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: var(--space-1);

	min-width: 0;
}


/* ==========================================================================
   STATISTIC CARD
   ========================================================================== */

.home-about__stat {
	position: relative;

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

	padding: var(--space-3);

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	background: var(--color-background);

	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);

	box-shadow: var(--shadow-sm);

	overflow: hidden;

	transition:
		transform var(--transition-base),
		border-color var(--transition-base),
		box-shadow var(--transition-base);
}


/* ==========================================================================
   ICON
   ========================================================================== */

.home-about__stat-icon {
	width: 36px;
	height: 36px;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	flex-shrink: 0;
}

.home-about__stat-icon img {
	display: block;

	width: 34px;
	height: 34px;

	object-fit: contain;

	filter:
		invert(24%)
		sepia(31%)
		saturate(1125%)
		hue-rotate(91deg)
		brightness(82%)
		contrast(90%);
}


/* ==========================================================================
   STAT CONTENT
   ========================================================================== */

.home-about__stat-value {
	margin: auto 0 0;

	font-family: var(--font-primary);
	font-size: 2.35rem;
	font-weight: var(--fw-bold);
	line-height: 1;

	letter-spacing: -0.055em;

	color: var(--color-text);

	white-space: nowrap;
}


/* ==========================================================================
   STAT LABEL
   ========================================================================== */

.home-about__stat-label {

    /* max-width: 150px; */
	margin: var(--space-1) 0 0;

	font-family: var(--font-primary);
	/* font-size: var(--fs-xs); */
    font-size: .80rem;
	font-weight: var(--fw-regular);
	line-height: 1.45;

	color: var(--color-text-light); 
}


/* ==========================================================================
   FREELANCE CARD
   ========================================================================== */

.home-about__stat:last-child .home-about__stat-value {
	font-size: 2rem;
	letter-spacing: -0.05em;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

.home-about__stat:hover {
	transform: translateY(-4px);

	border-color: rgba(20, 83, 45, 0.3);

	box-shadow: var(--shadow-md);
}

/* ==========================================================================
   STAT CARD DECORATION
   ========================================================================== */

.home-about__stat-decoration {
	position: absolute;
	top: 0;
	right: 0;

	width: 55%;
	height: 65%;

	pointer-events: none;

	overflow: hidden;

	z-index: 0;
}


/* ==========================================================================
   SOFT EMERALD BLOB
   ========================================================================== */

.home-about__stat-blob {
	position: absolute;

	top: -35px;
	right: -35px;

	width: 150px;
	height: 150px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(34, 197, 94, 0.14) 0%,
			rgba(20, 83, 45, 0.07) 45%,
			rgba(20, 83, 45, 0) 72%
		);

	filter: blur(2px);

	transform:
		translate3d(
			calc(var(--card-mx, 0) * 1px),
			calc(var(--card-my, 0) * 1px),
			0
		)
		scale(var(--card-scale, 1));

	transition:
		transform 0.7s cubic-bezier(.22, 1, .36, 1);

	will-change: transform;
}


/* ==========================================================================
   DOT GRID
   ========================================================================== */

.home-about__stat-grid {
	position: absolute;

	top: 18px;
	right: 18px;

	width: 105px;
	height: 105px;

	background-image:
		radial-gradient(
			circle,
			rgba(20, 83, 45, 0.28) 1.2px,
			transparent 1.2px
		);

	background-size: 12px 12px;

	opacity: 0.55;

	transform:
		translate3d(
			calc(var(--grid-mx, 0) * 1px),
			calc(var(--grid-my, 0) * 1px),
			0
		)
		skew(
			calc(var(--grid-skew-x, 0) * 1deg),
			calc(var(--grid-skew-y, 0) * 1deg)
		);

	transition:
		transform 0.55s cubic-bezier(.22, 1, .36, 1),
		opacity 0.4s ease;

	will-change: transform;
}


/* ==========================================================================
   DECORATION ABOVE CARD CONTENT
   ========================================================================== */

.home-about__stat > *:not(.home-about__stat-decoration) {
	position: relative;
	z-index: 2;
}


/* ==========================================================================
   CARD HOVER
   ========================================================================== */

.home-about__stat:hover .home-about__stat-blob {
	opacity: 1;

	transition-duration: 0.3s;
}

.home-about__stat:hover .home-about__stat-grid {
	opacity: 0.8;
}


/* ==========================================================================
   DIFFERENT DECORATION POSITIONS
   ========================================================================== */

/*
 * Card 2
 */

.home-about__stat:nth-child(2) .home-about__stat-blob {
	top: -45px;
	right: -50px;

	width: 145px;
	height: 145px;
}


/*
 * Card 3
 */

.home-about__stat:nth-child(3) .home-about__stat-blob {
	top: -55px;
	right: -35px;

	width: 155px;
	height: 155px;
}


/*
 * Card 4
 */

.home-about__stat:nth-child(4) .home-about__stat-blob {
	top: -40px;
	right: -55px;

	width: 160px;
	height: 160px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.home-about__link,
	.home-about__link-arrow,
	.home-about__stat {
		transition: none;
	}

	.home-about__stat:hover {
		transform: none;
	}

	.home-about__link:hover {
		gap: var(--space-1);
	}

	.home-about__link:hover .home-about__link-arrow {
		transform: none;
	}

}