@font-face {
    font-family: 'Onest';
    src: url('/fonts/Onest/Onest-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('/fonts/Onest/Onest-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('/fonts/Onest/Onest-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Lenis */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

:root {
    --radius: 10px;
    --white: oklch(98.54% 0.0106 285.97);
    --white-hover: oklch(100% 0 0 / 0.467);
    --black: oklch(8.37% 0.0118 255.89);
    --grey: oklch(78.26% 0 0);
    --black-grey: oklch(24.81% 0.0129 243.41);
    --darker-grey: oklch(64.34% 0 0);
    --darkest-grey: oklch(45.13% 0.0096 253.93);
    --light-grey: oklch(94.12% 0.0069 247.9);
    --accent: oklch(71.16% 0.1812 22.84);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scrollbar-gutter: stable;
}

body {
    width: 100%;
    font-family: 'Onest', Helvetica, Arial;
    font-weight: 400;
    position: relative;
    z-index: 0;
    background: var(--black);
    overflow-x: hidden;
}

.hideMobile {
    display: none;
}
@media (width <= 768px) {
    .hideMobile {
        display: block;
    }
}

p {
    line-height: 1.6;
}

/* Preloader */
.preloader {
    font-family: Helvetica, Arial;
	position: fixed;
	inset: 0;
	background: oklch(12.28% 0.0029 285.97);
	z-index: 80;
	height: 100vh;
	width: 100vw;
    font-weight: 100;
	line-height: unset;
    container-type: inline-size;
    container-name: preloader-container;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.preloader.fade-out {
    opacity: 0;
}
.flip {
	height: clamp(40px, 10cqi, 100px);
	text-align: center;
	overflow: hidden;
	width: Xu;
	height: Yu;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--white);
	text-transform: uppercase;
	font-size: clamp(2rem, 4.5cqi, 5.8rem);
    font-weight: 500;
}
.flip > div > div {
	color: oklch(60.46% 0.2129 6.78);
	display: inline-block;
}
.flip div:first-child {
	animation: show 7s linear 1;
}
@keyframes show {
	0% {
		transform: translateY(-600%);
	}
	12% {
		transform: translateY(-500%);
	}
	24% {
		transform: translateY(-400%);
	}
	36% {
		transform: translateY(-300%);
	}
	48% {
		transform: translateY(-200%);
	}
	60% {
		transform: translateY(-100%);
	}
	72% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(0%);
	}
}
/* EOF Preloader */