@charset "utf-8";




/* -----------------------------------
	FONT
------------------------------------*/
@font-face {
  font-family: customFont;
  src: url("../fonts/Lato-Regular.ttf");
}

@font-face {
  font-family: qubeFont;
  src: url("../fonts/Abel-Regular.ttf");
}

@font-face {
  font-family: headerFont;
  src: url("../fonts/DMSans.ttf");
}





/* -----------------------------------
	BODY
------------------------------------*/
body, html {
	font-family: customFont;
	margin: 0px;
	color: #ffffff;
	font-size: 20px;
	width: 100%;
	height: 10000px;
	overflow-x: hidden;
	background-color:  #0c1314;
	background:  #0c1314;
}
*, *::before, *::after { box-sizing: border-box; }
















/* -----------------------------------
	LOADING
------------------------------------*/
/* page can scroll underneath but clicks are blocked while loading */
#preload {
position: fixed; inset: 0;
display: grid; place-items: center;
background: #07090a;
z-index: 99999;
transition: opacity .35s ease, visibility 0s linear .35s;
}
#preload.hide {
	opacity: 0;
	visibility: hidden; 
}
#preload .wrap { 
	position: relative;
	display: grid; 
	place-items: center;
	gap: 22px; 
}
#preload .logo {
	width: 160px; 
	height: auto; 
	opacity: .9; 
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)); 
}
#preload .ring {
	width: 50px; 
	height: 50px; 
	border-radius: 99%;
	background:	conic-gradient(from 0deg, rgba(255,255,255,.65) 0 25%, transparent 0 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 0);
	animation: spin 1.2s linear infinite;
	opacity: .8;
}

@keyframes spin { to { transform: rotate(1turn); } }

#preload .pct { 
	font: 500 12px/1 system-ui, sans-serif; 
	letter-spacing: .06em; 
	color: #cfe7f4; opacity:.9 
}


#poster {
  position:fixed; 
  inset:0; 
  z-index:10; 
  display:grid; 
  place-items:center;
  background: radial-gradient(120% 120% at 10% 0%,#0e1318 0,#0b0f12 60%,#0a0c0f 100%);
  transition: opacity .5s ease, visibility .5s ease; 
  will-change:opacity;
}

#poster::before {
  content:""; 
  position:absolute; 
  inset:0;
   opacity:.25;
  background: url(hero_poster.webp) center/cover no-repeat;
  filter: blur(2px);
}

#poster.hide { opacity:0; 
	visibility:hidden; 
	pointer-events:none;
	opacity:0;
 }

.poster__inner { text-align:center; 
	padding:24px 28px; 
	border-radius:5px;
	background: rgba(10, 13, 14, 0.04);
	border:1px solid rgba(19, 19, 19, 0.08);
	backdrop-filter: blur(8px) saturate(1.1);
}

#status { 
	margin:0 0 10px; 
	font:500 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
	letter-spacing:.02em; 
	opacity:.9;
 }
#bar { 
	width:min(320px,70vw); 
	height:2px; background:rgba(22, 22, 22, 0.12); 
	border-radius:999px; 
	overflow:hidden 
}
#bar > i { 
	display:block; 
	height:100%; 
	width:0%; 
	background:#7ad1ff; 
	transition:width .15s linear
 }








/* -----------------------------------
	CANVAS
------------------------------------*/
canvas {
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	background-color: transparent;
	canvas { pointer-events: none; }
}



/* -----------------------------------
	BLINKING ARROW
------------------------------------*/
.scroll-arrow {
  position: fixed;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.25rem;
  color: #ffffff;
  animation: blink 1.2s infinite;
  z-index: 5;
  pointer-events: none;
  text-align: center;
}

@keyframes blink {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.3; transform: translateX(-50%) translateY(10px); }
}




/* -----------------------------------
 MENU - TOP
------------------------------------*/
.top-menu {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100px;
	z-index: 100;
}

.menu-icon {
	position: absolute;
	right: 30px;
	z-index: 2000;
}


/* -----------------------------------
 MENU - TOP
------------------------------------*/
.menu {
	position: fixed;
	top: 100px;
	right: -310px;
	width: 300px;
	height: 100%;
	background-color:rgba(7, 11, 14, 0.99);
	z-index: 2000;
	transition: 1s;
	font-size: 12px;
}

.menu-link {
	text-decoration: none;
	color: #729bc2;
	transition: 0.5s;
}

.menu-link:hover{
	color: #FFF;
}

.table-container {
	width: 100%;
    display: table;
    border-collapse: collapse;
	z-index: 2000;
}

.table-header-row {
    display: table-row;
}

.table-row {
    display: table-row;
	color: #FFF;
}

.table-header-cell{
	display: table-cell;
    padding: 20px;
}
.table-cell {
    display: table-cell;
    padding: 20px;
}

.purchase{
	position: absolute;
	right: 10px;
	color: #FFF;
	text-decoration: none;
	display:flex;
	padding: 15px;
	background-color: #2c3f52;
	border-radius: 20px;
	width: 200px;
	min-width: 200px;
	transition: 0.5s;
}

.purchase:hover{
	background-color: #2970b8;
}





/* -----------------------------------
 CONTACT
------------------------------------*/
#contactLink {
	color: #fff;
	text-decoration: none;
	transition: 0.5s;
}

#contactLink:hover{
	color:#74aabb;
}



/* -----------------------------------
	QUBESHIFT
------------------------------------*/
.qubeshift{
	text-align: center;
	margin: auto;	
	font-family: customFont;
	font-size: 1.5em;
}



/* -----------------------------------
	TEXT (FX)
------------------------------------*/
.text{
  font-size: 3em;
  position: relative;
  height: 60px; 
  overflow: hidden;
  z-index: 5;
}

.text-inside{
  position: absolute;
  bottom: 0;
  transform: translateY(0) rotate(0);
  opacity: 1;
  will-change: transform, opacity;
}

.par{
	font-size: 1em;
	position: relative;
	opacity: 1;
	z-index: 5;
	line-height: 1.45;
	max-width: 60ch;
	margin-top: 12px;
}

@supports (animation-timeline: view()) {
  .text{
    view-timeline-name: --line;
    view-timeline-axis: block;
  }
  .text-inside{
    animation-name: drop-after-center;
    animation-timeline: --line;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-range: entry 50% to exit 50%;
  }
  @keyframes drop-after-center{
    0%,49%   { transform: translateY(0);   opacity: 1; }
    100%     { transform: translateY(110%); opacity: 0; }
    80%    { transform: translateY(85%) rotate(-6deg); opacity: .6; }
  }
  @keyframes fade-after-center{
    0%,49%   { opacity: 1; }
    100%     { opacity: 0; }
  }
}

@supports (animation-timeline: view()) {
  .par{
    view-timeline-name: --par;
    view-timeline-axis: block;
    animation-name: fade-after-center;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timeline: --par;
    animation-range: entry 50% to exit 50%;
  }

  @keyframes fade-after-center{
    0%,49% { opacity: 1; }
    100%   { opacity: 0; }
  }
}






/* -----------------------------------
	TOP
------------------------------------*/
.top{
	position: absolute;
	top: 0px;
	width: 100%;
	height: 4000px;
	margin: 0;
	align-content: flex-end;
	z-index: 2;
	padding: 2%;
}

.top-statement{
	position: absolute;
	top: 400px;
	font-family: headerFont;
	font-weight: 400;
}

.next-statement{
	position: absolute;
	top: 1200px;
	font-family: headerFont;
	font-weight: 400;
}

.last-statement{
	position: absolute;
	top: 1800px;
	font-family: headerFont;
	font-weight: 400;
}

.pass-statement{
	position: absolute;
	top: 5500px;
	font-family: headerFont;
	font-weight: 400;
}


.middle-top{
	position: absolute;
	width: 100%;
	height: 2400px;
	margin: 0;
	align-content: flex-end;
	z-index: 2;
	padding: 2%;
}

.products {
	position: absolute;
	top: 3000px;
	font-family: headerFont;
	font-weight: 400;
}

.middle-bottom{
	position: absolute;
	top: 4000px;
	width: 100%;
	height: 4000px;
	margin: 0;
	align-content: flex-end;
	z-index: 2;
	padding: 4%;
	background:
    linear-gradient(to top,  rgb(23, 27, 29,1),  rgba(52, 60, 65, 0.05) ,rgba(52, 60, 65, 0),rgba(52, 60, 65, 0),rgba(52, 60, 65, 0),rgba(52, 60, 65, 0));
}

.middle-bottom img{
	margin: 15px;;
}

.footer{
	color: #74aabb;
	position: fixed;
	font-size: 0.7em;
	width: 100%;
	height: 25px;
	bottom: 0px;
	right: 15px;
	z-index: 999;
	text-align: right;
}




/* -----------------------------------
	MOBILE
------------------------------------*/
@media screen and (max-width: 720px) {
	body, html{
		font-size: 16px;
	}

	/* -----------------------------------
		TEXT (FX)
	------------------------------------*/
	.text{
		font-size: 2.5em;
		position: relative;
		height: 40px;
		color: #ffffff;;
		z-index: 5;
		pointer-events: none;
		overflow: hidden;
	}

	.text-inside {
		position: absolute;
		font-size: 0.65em;
		height: 40px;
		bottom: 0px;
	}
	
	.top{
		padding: 10%;
	}

	.middle-bottom img{
		width: 250px;
		height: 50px;
	}

}