header
{
	display:none;
		
}

/*#burger
{
	position:absolute;
	top:2rem;right:10%;height:23px;width:48px;
	cursor:pointer;
	transition:.3s all 1.2s;
	z-index:10;
	opacity:0;

	&:hover span{background:var(--gold);box-shadow:0 0 4px var(--gold)}
}
	#burger span{position:absolute;height:3px;background:white;width:100%;transition:.3s all}
		#burger span:first-child{top:0}
		#burger span:nth-child(2){top:50%;transform:translateY(-50%)}
		#burger span:last-child{bottom:0}*/

#hero
{
	position:absolute;inset:0;

	--logo-width:25vw;
}
	#hero h1
	{
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	#hero:not(.go) {pointer-events: none}
	#hero:not(.go) * {transition-delay: 0s !important;}



	.hero-logo
	{
		display:inline-block;
		position:absolute;
		top:45%;left:25%;
		transform:translate(-50%, -50%);
		width:var(--logo-width);

		opacity:1;
		transition:1s all 0.5s;

		&.s4
		{
			opacity:0;
		}

		canvas
		{
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			transform: scale(-1);
			transition:.5s all;
		}
	}
	.intro-right
	{
		position:absolute;
		top:45%;
		left:calc(25% + 0.5*var(--logo-width));
		right:10%;
		transform:translate(0, -50%);
		padding-left:5vw;
	}
		.hero-logo-back
		{
			position:absolute;
			inset:0;
			border-radius:50%;
			background:linear-gradient(to right, var(--blue) 0, var(--blue) 49.9%, var(--gold) 50%, var(--gold) 100%);
			filter:blur(64px);
			opacity:0.6;
			transition:2s all;
		}
		.hero-logo .hero-logo-img1
		{
			position:relative;
			transition:1s all;
			width:100%;
		}
		.hero-logo .hero-logo-img2
		{
			position:absolute;inset:0;width:100%;
			transition:1s all;
		}

		
		.hero-logo .hero-logo-back{opacity:0;}
		.hero-logo.s1 .hero-logo-back{opacity:0;}
		.hero-logo.s2 .hero-logo-back{opacity:0.6;}
		.hero-logo.s3 .hero-logo-back{opacity:0.6;}

		.hero-logo .hero-logo-img1{opacity:0;}
		.hero-logo.s1 .hero-logo-img1{opacity:1;}
		.hero-logo.s2 .hero-logo-img1{opacity:1;}
		.hero-logo.s3 .hero-logo-img1{opacity:1;}

		.hero-logo .hero-logo-img2{opacity:0;}
		.hero-logo.s1 .hero-logo-img2{opacity:0;}
		.hero-logo.s2 .hero-logo-img2{opacity:0;transform:translateY(0.5rem)}
		.hero-logo.s3 .hero-logo-img2{opacity:1;transform:translateY(0)}

		.hero-logo canvas{opacity:0;}
		.hero-logo.s1 canvas{opacity:0;}
		.hero-logo.s2 canvas{opacity:0;}
		.hero-logo.s3 canvas{opacity:1;}
		


	#hero .t
	{
		font-size:3.75rem;font-family:Space Grotesk;color:white;
		transform:translateX(-1rem);
		line-height:1;
		opacity:0;
		transition:.8s all;
		max-width:0;
		overflow:hidden;
		white-space:nowrap;
	}
		@media(max-width:1500px)
		{
			#hero .t{font-size:3rem}
		}
		@media(max-width:1280px)
		{
			#hero .t{font-size:2.6rem}
		}
		@media(max-width:1024px)
		{
			#hero .t{font-size:2.4rem}
		}

	#hero .p
	{
		font-size:1.1rem;
		padding-block:2.5rem 0;
		transform:translateX(-1rem);
		opacity:0;
		transition:.8s all .2s;
		overflow:hidden;
		white-space:nowrap;
	}
	#hero .sp
	{
		font-size:1rem;
		padding-block:1.5rem 0;
		transform:translateX(-1rem);
		opacity:0;
		transition:.8s all .4s;
		overflow:hidden;
	}

	#hero a
	{
		font-family: Space Grotesk;
		font-size: 2rem;
		font-weight: 400;
		letter-spacing: 8px;
		display: block;
		cursor: pointer;
		text-transform: uppercase;
		opacity:0;
		margin-top:4rem;
		text-align:left;


		transition: .5s all, .8s opacity 1s;
		color:var(--gold);

		&:hover
		{
			color:white;
			text-shadow: 0 0 16px var(--gold);
		}
	}



	#hero.go .t, #hero.go .p, #hero.go .sp, #hero.go a{transform:translateX(0);opacity:1;max-width:100%}


.c
{
	padding:5rem 0 1rem;
	font-size:0.7rem;

	a
	{
		cursor:pointer;
		transition:.3s all;
		
		&:hover{color:white}
	}
}




	@media(max-width:900px)
	{
		.hero-logo
		{
			top: 10%;
			left: 50%;
			transform: translate(-50%, 0%);
			width:50%;
			max-width:320px;
		}
		.intro-right
		{
			top:55%;
			left:0;right:0;padding-inline:5vw;
			text-align:center;transform:none;
		}
			.app-button{text-align:center !important}
	}














#slider
{
	position:absolute;
	inset:10%;
}
		#slider:not(:has(.go)), .slide:not(.go) {pointer-events: none}
		.slide:not(.go) *{transition-delay: 0s !important; }


			.slide-logo, .slide-t, .slide-tags, .intro-t, .slide-intro p, .slide-cta, .slide-back, .slide-next
			{
				transform:translateX(-0.25rem);
				opacity:0;
			}
			.slide-right
			{
				transform:translateX(0.25rem);
				opacity:0;
			}
			.slide-main .text-content, .pillier-item
			{
				transform:translateY(-0.25rem);
				opacity:0;
			}
			.c
			{
				opacity:0;
			}


			.slide-logo{transition:.5s all .0s}
			.slide-t{transition:.5s all .1s, 0s font-size 0s}
			.slide-tags{transition:.5s all .2s}
			.slide-intro .intro-t{transition:.5s all .3s}
			.slide-intro p{transition:.5s all .4s}
			.slide-cta{transition:.5s all .5s}
			.slide-back{transition: .5s all, .5s opacity .6s, .5s transform .6s;}
			.slide-next{transition: .5s all, .5s opacity .7s, .5s transform .7s;}
			.slide-right{transition:.8s opacity .6s, .8s transform .6s}
			.slide-main .text-content{transition:.7s all 1s}
			.pillier-item:nth-child(1){transition:.5s all 1.4s}
			.pillier-item:nth-child(2){transition:.5s all 1.5s}
			.pillier-item:nth-child(3){transition:.5s all 1.6s}
			.c{transition:.3s all 2s}

			.go 
			{
				.slide-logo, .slide-t, .slide-tags, .intro-t, .slide-intro p, .slide-cta, .slide-back, .slide-next, .slide-right, .slide-main .text-content, .pillier-item, .c
				{
					transform:none !important;
					opacity:1 !important;
				}
			}











	.slide
	{
		position:absolute;
		inset:0;
	}
	.slide-content
	{
		position:relative;
	}


		.slide-left, .slide-right
		{
			display:inline-block;
			
			vertical-align: top;
		}

			.slide-left
			{
				width:50%;
				--logo-size:6rem;
				position:relative;
			}
				.slide-nav
					{
						margin-bottom:1rem;
					}
						.slide-back, .slide-next
						{
							font-family: Space Grotesk;
							font-size: 1.4rem;
							font-weight: 400;
							letter-spacing: 6px;
							display: inline-block;
							cursor: pointer;
							text-transform: uppercase;
							
							text-align:left;


							color:var(--gold);

							&:hover
							{
								color:white;
								text-shadow: 0 0 12px var(--gold);
							}

							&.disabled
							{
								color:var(--gray);
								text-shadow: 0 0 8px var(--gray);
								pointer-events:none;
								filter:opacity(0.8);
							}
						}

						.slide-next{margin-left:2rem}
							.slide-back:before
							{
								content:"< ";
							}
							.slide-next:after
							{
								content: " >";
							}


				.slide-logo, .slide-head
				{
					display:inline-block;
					vertical-align:top;
				}
					.slide-logo{width:var(--logo-size);}
						.slide-logo img{width:100%;}
					.slide-head
					{
						width:calc(100% - var(--logo-size));
						padding-left:1rem;
					}	

					.slide-tags
					{
						margin-inline:-0.5rem;
					}
						
						.slide-release, .slide-tag
						{
							display:inline-block;
							border:1px solid var(--blue);
							border-radius:4px;
							font-size:0.75rem;
							text-transform:uppercase;
							color:var(--blue);
							padding:0.35rem 0.8rem 0.31rem;
							margin:0 0.5rem 0.5rem;
							background:black;
						}
							.slide-tag
							{
								color:var(--gray);
								border-color:var(--gray);
									
							}
					.slide-t
					{
						color:white;
						font-size:3.75rem;
						font-family:Space Grotesk;
						white-space:nowrap;
						display:inline-block;
					}

				.slide-intro
				{

				}
					.intro-t
					{
						font-size:1.6rem;
						padding:1.5rem 0 1rem;
						color:white;
					}
					.slide-intro p
					{
						font-size:1.1rem;
						padding-bottom:1.5rem;
					}
					.slide-cta
					{
						position:static;
						left:0;bottom:5rem;
						display:block;
						width:50%;
						max-width:200px;
						margin-block:4rem;
					}
						.slide-cta img{width:100%}



					
							


			.slide-right
			{
				width:50%;
			}
				ui-gallery
				{
					display: block;
				}
					.slide-gallery-main
					{
						aspect-ratio:4/5;
						position:relative;
					}
						.slide-gallery-main-current, .slide-gallery-main-next
						{
							position:absolute;inset:0;
						}
						.slide-gallery-main img:first-child,.slide-gallery-main video:first-child
						{
							position:absolute;inset:0;
							object-fit:cover;
							width:100%;height:100%;
							filter:blur(24px) opacity(0.6);
							transition:1s all;
						}
						.slide-gallery-main img:last-child,.slide-gallery-main video:last-child
						{
							position:absolute;inset:0;
							object-fit:contain;
							width:100%;height:100%;
							transition:1s all;
						}

							.slide-gallery-main-current img.loaded,.slide-gallery-main-current video.loaded
							{
								opacity:1;transform:scale(0.9995);
							}
							.slide-gallery-main-current img,.slide-gallery-main-current video
							{
								opacity:0;transform:scale(0.99);
							}
						

							

					.slide-gallery-panel
					{
						margin:0 -0.5rem;
						text-align:center;
					}
						.slide-gallery-panel img,.slide-gallery-panel video
						{
							height:4rem;margin:1rem 0.5rem 0;
							cursor:pointer;
						}



		@media(max-width:1400px)
		{
			.slide-left
			{
				display:block;width:100%;margin-bottom:4rem;
				min-height:0 !important;
			}
				.slide-intro p
				{
					display:inline-block;
				}
					.slide-intro p{width:75%}

				.slide-cta
				{
					margin-block:2rem;
				}
				
			.slide-right
			{
				display:block;width:100%;
			}
		}
		@media(max-width:768px)
		{
			#slider{inset:2rem 1.5rem}
			.slide-intro p
			{
				display:block;
			}
				.slide-intro p{width:100%}
				
		}


@media(max-width:640px)
		{
			#slider{inset:1.5rem 1rem}

}









	.slide-main
	{
		
	}
		
		
		.slide-main p.slide-cols
		{
			font-size:1rem;
			margin-block:3.5rem 0;

			span
			{
				display:inline-block;
				vertical-align: middle;
				width:calc(50% - 1px);

				padding-inline:0 2rem;
				border-right:1px solid var(--gold);

				& + span
				{
					position:relative;
					left:-1px;
					padding-inline: 2rem 0;
					border-left:1px solid var(--gold);
					border-right:0;
				}
			}
		}

		.slide-pilliers
		{
			width:100%;
			margin:0 auto;
			max-width:1024px;
			overflow:hidden;
			counter-reset: section;

			--gutter:2rem;

			margin:3rem calc(var(--gutter) * -1) 0;
		}
			.pillier-item
			{
				counter-increment: section;
				display:inline-block;
				vertical-align: top;
				width:calc(100%/3);
				padding-inline:var(--gutter);
			}
				.pillier-content
				{
					border:1px solid var(--gray);
					box-shadow:0 0 40px #0066ff0a, 0 0 40px #ffb84d0a;
					background:black;
					border-radius:16px;

					padding:1.5rem 1.8rem 1.4rem;
				}
				.pillier-t
				{
					color:white;
					font-family:Space Grotesk;
					font-weight: 700;
					font-size:1.25rem;
				}
					.pillier-t:before
					{
						 content: counter(section, decimal-leading-zero) " ";
						 display:block;
						 font-size:0.75rem;
						 color:var(--gray);
						 margin-bottom:1rem;
					}
				.pillier-p
				{
					padding-top:1.5rem;
					font-size:1rem;
				}


	@media(max-width:640px)
	{
		.slide-main
		{
			margin-top:5rem;
		}

		.pillier-item
		{
			display:block;
			width:auto;
			margin-bottom:1rem;
		}
			.pillier-content{height:auto}		

	}





#legal
{
	position:fixed;
	inset:0;
	backdrop-filter:blur(24px);
	opacity:0;
	pointer-events:none;
	transition:.5s all;

	&.open{opacity:1;pointer-events: initial}
}

	.legal-content
	{
		border:1px solid var(--gray);
		box-shadow:0 0 40px #0066ff0a, 0 0 40px #ffb84d0a;
		background:black;
		border-radius:16px;

		padding:1.5rem 1.8rem 1.4rem;
		position:absolute;
		top:2rem;left:50%;
		transform:translate(-50%, 0);
		width:calc(100% - 4rem);
		max-width:1024px;
	}
			.legal-close
			{
				position:absolute;
				top:1rem;right:2rem;font-size:3rem;
				font-weight:700;
				font-family:Space Grotesk;
				color:white;
				cursor:pointer;
				transition:.3s all;

				&:hover{color:var(--gold)}
			}












.text-content
{

	.heading
	{
		margin-bottom:1.5em;
		font-weight:700;
		font-family:Space Grotesk;
		color:white;
	}
	.heading-1{font-size:2.8rem}
	.heading-2{font-size:1.8rem}
	.heading-3{}
	.heading-4{font-family:Inter;font-size:1.15rem;font-weight:500}

	.heading + .heading{margin-top:-1.5em}
	p
	{
		font-size:1.1rem;
		margin-block:1.6rem;
		line-height:1.4;
	}
}