/************************
* GENERAL
************************/
@font-face {
	font-family: 'Manrope';
	src: url('../corporate-design/font/Manrope-Light.ttf');
	font-display: fallback;
}
* {
	user-select: none;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: linear-gradient(135deg, #000000, #050505, #0a0a0a, #2a2a2a, #0a0a0a, #050505, #000000);
	background-size: 400% 400%;
	animation: gradientShift 24s ease-in-out 0.5s infinite;
	color: #fff;
	font-family: 'Manrope', serif;
	position: relative;	
}

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	5% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	55% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}




/************************
* DATENSTROM CSS
************************/
.datastream-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10;
	overflow: hidden;
	pointer-events: none;
}

.datastream-lane {
	position: absolute;
	left: 0;
	width: max-content;
	white-space: nowrap;
	font-size: 14px;
	color: rgb(102, 102, 102);
	text-shadow: 0 0 6px rgba(102, 102, 102, 0.35);
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.datastream-lane span {
	display: inline-block;
	padding: 0 120px; /* Smaller space between names */
}

/* Animations for different lanes */
.datastream-lane.direction-right {
	animation: marqueeRight 120s linear infinite;
}

.datastream-lane.direction-left {
	animation: marqueeLeft 90s linear infinite;
}

/* Seamless marquee animations (no gap at loop) */
@keyframes marqueeLeft {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes marqueeRight {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
	.datastream-lane {
		animation: none !important;
	}
}




/************************
* TEXT: FADER
************************/
#diamond-member-1 {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#diamond-member-1 img {
	display: block;
	height: 17vh;
	max-width: 90%;
	width: auto;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
}
#diamond-member-1 #diamond-member-1_img1 {
	opacity: 1;
}
#diamond-member-1 #diamond-member-1_img2 {
	opacity: 0;
}





/************************
* TEXT: BAR FADE IN
************************/
.diamond-member {
	position: relative;
	z-index: 100;
}
.diamond-member .txt,
.diamond-member .txt2 {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
}
.diamond-member .txt2 {
	position: absolute;
	opacity: 0;
}
.diamond-member img {
	display: inline-block;
	height: 7vh;
	padding: 1vh;
	cursor: pointer;
}


.diamond-row1 {
	display: grid;
	grid-template-columns: 30% 30% 30%;  /* grid-template-columns: 30% 30%; */
	justify-content: space-evenly;
	position: absolute;
	top: 10vh;
	width: 100%;
}
.diamond-row2 {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	justify-content: space-evenly;
	position: absolute;
	top: 80vh;
	width: 100%;
}



/************************
* MEMBER OVERLAY
************************/
#member-overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1000;
	display: grid;
	grid-template-columns: 85%;
	justify-content: center;
	align-items: center;
	overflow: hidden;

	opacity: 0;
	transition: 0.5s opacity;
	
	background: rgba(0,0,0,0.9);
	color: #fff;
	
}
#member-overlay #member-overlay-wrap {
	width: 100%;
	box-sizing: border-box;
	background: rgba(40,40,40,1);
	overflow: hidden;
	position: relative;
}
#member-overlay #member-logo-wrap {
	width: 100%;
	padding: 1vh 0 1.4vh 0;
	box-sizing: border-box;
}
#member-overlay #member-logo-wrap img {
	height: 4vh;
	max-width: 100%;
	box-sizing: border-box;
	display: block;
	margin: 0 0 0 3vh;
}
#member-overlay #member-progress {
	width: 0%;
	height: 0vh;
	background: rgb(55,63,81);
	background: linear-gradient(90deg, rgba(55,63,81,1) 70%, rgba(114,126,154,1) 100%);
}
#member-overlay #member-ad-wrap {
	width: 100%;
	box-sizing: border-box;
}
#member-overlay #member-ad-wrap img {
	width: 100%;
	display: block;
	margin: 0 auto;
}
#member-overlay #member-ad-wrap video {
	width: 100%;
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 200vh;
}
#member-overlay #member-close {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 1.8vh;
	right: 3vh;
	cursor: pointer;
}
#member-overlay #member-close span:nth-child(1) {
	padding-right: 1vh;
	font-size: 1.8vh;
	letter-spacing: 0.2vh;
}
#member-overlay #member-close span:nth-child(2) {
	font-size: 2.2vh;
}



/************************
* TOUCH ICON
************************/
#touchicon {
	position: absolute;
	bottom: 1.5vh;
	left: 1.5vh;
	z-index: 100;
	/* display: flex; */
	display: none;
	align-items: center;
	opacity: 0.5;
	transform: scale(1);
	animation: heartbeat 8s ease-in-out 0s infinite;
}
#touchicon img {
	width: 2.6vw;
	height: 2.6vw;
	display: inline-block;
}
#touchicon span {
	padding-left: 0.5vh;
	font-size: 1.6vh;
	letter-spacing: 0.2vh;
}
@keyframes heartbeat {
	from {
		opacity: 0.5;
		transform: scale(1);
		transform-origin: center center;
		animation-timing-function: ease-out;
	}
	3% {
		transform: scale(1.1);
		opacity: 0.9;
		animation-timing-function: ease-in;
	}
	6% {
		opacity: 1;
		transform: scale(1.02);
		animation-timing-function: ease-out;
	}
	9% {
		opacity: 0.9;
		transform: scale(1.12);
		animation-timing-function: ease-in;
	}
	12% {
		opacity: 0.5;
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}




/************************
* MOBILE NOTICE
************************/
#mobile-notice {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -9999;
	background: rgba(0,0,0,0.9);
	color: #fff;
	justify-content: center;
	align-items: center;
}
#mobile-notice div {
	width: 80%;
	text-align: center;
	font-size: 2em;
	letter-spacing: 0.2em;
}
@media (max-width: 768px) {
	#mobile-notice {
		display: flex;
		z-index: 9999;

	}
}