/* ============================================================
   FONTS
============================================================ */

@font-face {
	font-family: 'Geist';
	src: url('assets/public/fonts/Geist.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Jetbrains';
	src: url('assets/public/fonts/JetBrains.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* ============================================================
   VARIABLES
============================================================ */

:root {
	/* Layout */
	--container-h: calc((100% - 1140px) / 2);
	--container-v: 136px;
	--container: var(--container-v) var(--container-h);

	/* Spacing multiplier */
	--gmultiplier: 1;

	/* Text tones */
	--t9: #030302;
	--t8: #171717;
	--t7: #2E2E2E;
	--t6: #424242;
	--t5: #5C5C5C;
	--t4: #696969;
	--t3: #878787;
	--t2: #9E9E9E;
	--t1: #B0B0B0;

	/* Fill */
	--fill-black: #0A0A0A;

	/* Spacing scale */
	--g120: round(calc(120px * var(--gmultiplier)), 1px);
	--g100: round(calc(100px * var(--gmultiplier)), 1px);
	--g80:  round(calc(80px  * var(--gmultiplier)), 1px);
	--g72:  round(calc(72px  * var(--gmultiplier)), 1px);
	--g60:  round(calc(60px  * var(--gmultiplier)), 1px);
	--g52:  round(calc(52px  * var(--gmultiplier)), 1px);
	--g40:  round(calc(40px  * var(--gmultiplier)), 1px);
	--g36:  round(calc(36px  * var(--gmultiplier)), 1px);
	--g32:  round(calc(32px  * var(--gmultiplier)), 1px);
	--g28:  round(calc(28px  * var(--gmultiplier)), 1px);
	--g24:  round(calc(24px  * var(--gmultiplier)), 1px);
	--g20:  round(calc(20px  * var(--gmultiplier)), 1px);
	--g16:  round(calc(16px  * var(--gmultiplier)), 1px);
	--g14:  round(calc(14px  * var(--gmultiplier)), 1px);
	--g12:  round(calc(12px  * var(--gmultiplier)), 1px);
	--g8:   round(calc(8px   * var(--gmultiplier)), 1px);
	--g4:   round(calc(4px   * var(--gmultiplier)), 1px);

	/* Easing */
	--cubic: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   RESET & BASE
============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-family: 'Geist';
}

body {
	background-color: white;
	font-optical-sizing: auto;
	font-kerning: normal;
	max-width: 100vw;
	overflow-x: hidden;
	font-synthesis: none;
	font-variant-ligatures: common-ligatures;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

a {
	text-decoration: none;
}

button {
	border: none;
	background-color: transparent;
	cursor: pointer;
}

img {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

main,
section {
	background-color: white;
	position: relative;
	z-index: 3;
}

ul {
	list-style: none;
}


/* ============================================================
   TRANSITIONS
============================================================ */

a,
a::before,
button,
.tra {
	transition: all 260ms var(--cubic);
}


/* ============================================================
   LAYOUT UTILITIES
============================================================ */

.container-h {
	padding-left:  var(--container-h) !important;
	padding-right: var(--container-h) !important;
}

.full-span {
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
}

.f-r {
	display: flex;
	align-items: center;
}

.f-c {
	display: flex;
	flex-direction: column;
}

.g8  { gap: var(--g8);  }
.g12 { gap: var(--g12); }
.g16 { gap: var(--g16); }
.g28 { gap: var(--g28); }


/* ============================================================
   TYPOGRAPHY UTILITIES
============================================================ */

.jetbrains {
	font-family: 'Jetbrains';
	letter-spacing: -.005em;
	text-transform: uppercase;
}


/* ============================================================
   COMPONENTS
============================================================ */

/* Arrow button */

.arrow-button {
	color: var(--t2);
	font-size: 12.5px;
	font-variation-settings: 'wght' 550;

	svg {
		width: 14px;
		transition: inherit;
	}
}

.arrow-button:hover {
	color: var(--t7);

	svg {
		transform: translateX(4px);
	}
}

/* Blog card */

.blog-card {
	.img-w {
		overflow: hidden;
		border-radius: 0.001px;

		img {
			opacity: .84;
		}
	}
}

.blog-card:hover {
	color: var(--t9) !important;

	img {
		scale: 1.08;
		opacity: 1;
	}
}

/* Pulse indicator */

.pulse {
	.pulse-dot {
		aspect-ratio: 1;
		background-color: #2EAB60;
		border-radius: 50px;
		height: 5px;
		position: relative;
	}

	.pulse-dot::before {
		animation: pulse 1900ms ease-in-out infinite;
		background-color: inherit;
		border-radius: 50%;
		content: '';
		height: 100%;
		opacity: 0;
		position: absolute;
		width: 100%;
	}

	span {
		font-variation-settings: 'wght' 550;
	}
}

@keyframes pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(2.6); opacity: 0;   }
}


/* ============================================================
   BREAKPOINTS
============================================================ */

/* 1380px */

@media (max-width: 1380px) {
	:root {
		--container-h: 7%;
		--container-v: 124px;
		--gmultiplier: .9;
	}

	.arrow-button {
		font-size: 12px;

		svg {
			width: 13px;
		}
	}
}

/* 1052px */

@media (max-width: 1052px) {
	:root {
		--container-h: 8%;
		--container-v: 114px;
	}
}

/* 768px */

@media (max-width: 768px) {
	:root {
		--container-h: 6%;
		--container-v: 108px;
		--gmultiplier: .8;
	}

	.arrow-button {
		font-size: 11.5px;

		svg {
			width: 12px;
		}
	}
}

/* 540px */

@media (max-width: 540px) {
	:root {
		--container-h: 5.5%;
		--container-v: 102px;
	}
}