@font-face {
	font-family: "Helvetica Now";
	src: url("../Assets/Fonts/Helvetica\ Now\ Display\ Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Locomotive";
	src: url("../Assets/Fonts/Locomotive\ Light\ Font.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

::selection {
	background-color: var(--color-black);
	color: var(--color-white);
}

::-moz-selection {
	background-color: var(--color-black);
	color: var(--color-white);
}

:focus-visible {
	outline-color: black;
	outline-offset: 0.4rem;
}

html {
	text-rendering: optimizeSpeed;
}

html:focus-within {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow: hidden;

	font-family: "Helvetica Now", sans-serif;
	font-size: var(--9);
	line-height: 120%;

	@media (width <= 2400px) {
		font-size: var(--8);
	}

	@media (width <= 2000px) {
		font-size: calc(var(--7) + var(--0_5));
	}

	@media (width <= 1600px) {
		font-size: calc(var(--6) + var(--0_5));
	}

	@media (width <= 1024px) {
		font-size: var(--6);
	}

	@media (width <= 700px) {
		font-size: calc(var(--4) + var(--0_5));
	}
}

/* #region = COMPONENTS */

.c_loader {
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100svh;
	background-color: black;
	color: white;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.c_loader_logo svg {
	width: auto;
	height: 2.25rem;
	display: block;
	fill: white;
}

.c_loader_logo {
	opacity: 0;
	animation: fadeIn 2s cubic-bezier(0, 0, 0, 1) 0.5s forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* #endregion = COMPONENTS */

/* #region = OBJECTS */

.o_content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(2, 1fr);

	@media (width <= 2400px) {
		padding-inline: var(--12);
	}

	@media (width <= 1600px) {
		padding-inline: var(--10);
	}

	@media (width <= 1024px) {
		padding-inline: var(--5);
	}

	white-space: nowrap;
}

.o_content_top {
	grid-column: 5 / 13;
	grid-row: 1 / 2;
	align-self: end;

	& span {
		opacity: 0;
	}

	@media (width <= 1024px) {
		grid-column: 1 / 13;
	}
}

.o_content_bottom {
	grid-column: 6 / 13;
	grid-row: 2 / 3;
	align-self: start;

	& span {
		opacity: 0;
	}

	@media (width <= 1024px) {
		grid-column: 7 / 13;
	}

	@media (width <= 700px) {
		grid-column: 4 / 13;
	}
}

/* #endregion = OBJECTS */

/* #region = UTILITIES */

.u_no_hover:hover {
	text-decoration: none;
}

.u_screen_reader_text {
	position: absolute !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	margin: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	border: 0;
}

.u_kerning_normal {
	font-kerning: normal;
}

.u_blend_normal {
	mix-blend-mode: normal;
	color: var(--color-white);
	background-color: transparent;
}

.u_blend_difference {
	color: var(--color-white);
	mix-blend-mode: difference;
	background-color: transparent;
}

/* #endregion = UTILITIES */

/* #region = FONTS */

.f_decor {
	font-family: "Locomotive", serif;
	font-size: var(--24);
	line-height: 110%;
	font-feature-settings: "liga" 1;

	@media (width <= 2400px) {
		font-size: calc(var(--20) + var(--2));
	}

	@media (width <= 2000px) {
		font-size: var(--20);
	}

	@media (width <= 1600px) {
		font-size: calc(var(--16) + var(--2));
	}

	@media (width <= 1024px) {
		font-size: calc(var(--12) + var(--0_5));
	}

	@media (width <= 700px) {
		font-size: var(--9);
	}
}

.f_project_title {
	font-family: "Locomotive", serif;
	font-size: 7.5vw;
	line-height: 105%;

	@media (width <= 700px) {
		font-size: var(--10);
	}
}

.f_menu_mobile {
	font-family: "Locomotive", serif;
	font-size: min(12vw, calc(var(--16) + var(--2)));
	line-height: 140%;
}

/* #endregion = FONTS */

/* #region = LENIS SCROL */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
	overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

.lenis.lenis-autoToggle {
	transition-property: overflow;
	transition-duration: 1ms;
	transition-behavior: allow-discrete;
}
/* #endregion = LENIS SCROL */