body {
	width: 100%;
	margin: 0;
	padding: 0;

	background-color: black;
	font-family: monospace;
	font-weight: 500;

	overflow-x: hidden;
	overflow-y: hidden;
}

* {
	cursor: none !important;
	font-family: 'Martian Mono', monospace;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

img{
	user-select: none;
	-webkit-user-drag: none;
}

.custom-cursor {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: rgba(255, 255, 255, 1);
	pointer-events: none;
	z-index: 400;
	transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
	transform: translate(-50%, -50%);

	&::after{
		content: '';
		position: absolute;
		inset: 4px;
		outline: 2px solid;
		outline-color: transparent;
		transition: outline-color 0.4s, inset 0.3s;
	}
}

.custom-cursor.morphing.fill {
	mix-blend-mode: normal;
	background-color: rgba(0, 0, 0, 0.42) !important;
	transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) background-color
		0s ease;
}
.custom-cursor.morphing:not(.fill) {
	mix-blend-mode: normal;
	background-color: rgba(0, 0, 0, 0.24) !important;
	transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) background-color
		0s ease;
	
	&::after{
		inset: -4px;
		outline-color: white;
	}
}

.cursor-hover {
	position: relative;
}

.cursor-hover {
	transition: all 0.4s ease;
}

.custom-cursor-helper {
	position: absolute;
	z-index: 9999;

	pointer-events: none;
	height: 10px;
	background: rgba(255, 255, 255, 1);

	transform: translate(-50%, -50%);
	opacity: 1;
	width: 10px;
}

.custom-cursor-helper {
	scale: 1;
	opacity: 1;

	transition: scale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-cursor-helper.hidden {
	opacity: 0;
	scale: 0;
}

a {
	color: inherit;
	text-decoration: none;
}
button {
	border: none;
	background-color: transparent;

	/* cursor: pointer; */
}

.content {
	opacity: 0;
	pointer-events: none;
}
.content.active {
	opacity: 1;
	transform: initial;
	pointer-events: initial;
}

#main-video {
	width: 100vw;
	height: 100vh;
}

#preview-image {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.3s ease-out;
	will-change: opacity;
	transform: translateZ(0);
}

.image {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 2;

	user-select: none;
	-webkit-user-drag: none;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.absolute {
		color: white;
		position: absolute;
	}
	.absolute.bottom {
		bottom: 0;
	}
	.absolute.top {
		top: 0;
	}
	.absolute.left {
		left: 0;
	}
	.absolute.center {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;

		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		/* cursor: pointer; */

		transition: background-color 0.3s;
	}
	.absolute.center.left {
		width: 10vw;
	}
	.absolute.center.right {
		align-items: flex-end;
		left: initial;
		right: 0;
		width: 10vw;
	}
	.absolute.center:hover {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.video-text {
		padding: 48px;

		mix-blend-mode: difference;
		font-size: 14px;

		transition: opacity 0.3s, transform 0.3s;
	}
	.video-text.hidden {
		opacity: 0;
		transform: translateX(-100%);
		pointer-events: none;
	}
}

.extend {
	position: fixed;
	z-index: 10;

	display: flex;
	align-items: center;

	top: 0;
	width: 16vw;
	height: 100vh;
	padding: 48px 64px;
	box-sizing: border-box;

	.info {
		position: relative;
		top: 0;

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;

		color: white;

		transition: transform 0.3s;
	}

	img {
		height: 68px;
		width: fit-content;
		object-fit: fill;
		transition: height 0.3s ease;
	}
}
.extend.left {
	left: 0;
	justify-content: flex-start;

	.info {
		transform: translateX(-300%);
		align-items: flex-start;
	}
}
.extend.right {
	right: 0;
	justify-content: flex-end;

	.info {
		transform: translateX(300%);
		align-items: flex-end;
	}
}
.extend.fill {
	width: 100%;
}
.extend:hover {
	.info {
		transform: translateX(0);
	}
}
.extend.hidden {
	opacity: 0;
	pointer-events: none;
}
.extend.invisible {
	opacity: 0 !important;
	z-index: 4 !important;
}

.absolute.fill {
	width: 100vw;
}
.absolute.invisible {
	opacity: 0 !important;
	z-index: 0;
}

header {
	position: fixed;
	top: 0;
	left: 0;

	z-index: 6;
	display: flex;
	align-items: center;

	padding: 0;
	margin: 48px;

	color: white;
	background-color: black;

	user-select: none;

	transition: opacity 0.5s ease, filter 0.5s ease;

	a {
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0.5;
		padding: 6px 8px;
		font-size: 16px;

		height: 100%;

		user-select: none;
	}
	a,
	button {
		transition: opacity 0.2s, background-color 0.2s, opacity 0.2s !important;
	}
	a.active {
		opacity: 1;
	}
	a:hover {
		opacity: 1;
		color: white;
	}
	a.active:hover,
	button:hover {
		background: white;
		color: black;
		img {
			filter: invert(1);
		}
	}
	button {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 32px;
		padding: 0;
		padding-left: 6px;
		padding-right: 6px;
	}
}

.image .extend:hover {
	opacity: 1;
}
video {
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	z-index: -1;

	object-fit: cover;
	transition: opacity 0.4s ease;
}
.video-img.hidden {
	opacity: 0;
	pointer-events: none;
}

.video-row {
	position: fixed;
	right: 0;
	z-index: 5;

	display: flex;
	align-items: flex-end;
	flex-direction: column;

	width: fit-content;
	min-height: 100vh;

	.video {
		z-index: 5;

		display: flex;
		align-items: center;

		padding-left: 24px;
		width: fit-content;
		height: 48px;

		font-size: 14px;

		color: white;
		background-color: black;

		span {
			display: flex;
			align-items: center;

			height: 48px;
			width: fit-content;
			padding-right: 640px;
		}
		span.num {
			padding-right: 40px;
			transition: padding 0.2s ease-in-out;
		}
	}
	.video.active {
		color: black;
		background-color: #c7c8c3;

		span.num {
			padding-right: 130px;
		}
	}
	.video.clear {
		pointer-events: none;
	}
}

.video-row {
	pointer-events: none;
}
.video-row.active {
	pointer-events: initial;
}

.video-row .video {
	transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1),
		opacity 0.6s cubic-bezier(0.77, 0, 0.18, 1), background-color 0.2s !important;
}

.video:focus,
.extend:focus {
	outline: 2px solid white;
	outline-offset: 2px;
}

.video:focus span.num {
	padding-right: 130px;
}

.video-info {
	pointer-events: none;

	align-items: flex-start;

	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;

	color: white;

	transition: transform 0.2s;

	.video {
		transform: translateX(-100vw);
	}

	.video:not(.clear) {
		background-color: #c7c8c3;
		color: black;

		span:not(.num) {
			padding-right: 80px;
			transition: padding-right 0.2s;
		}
	}
	.video:not(.clear):nth-child(odd) {
		background-color: #b7b8b3;
	}
	.video:not(.clear):hover {
		background-color: #c7c8c3;

		span:not(.num) {
			padding-right: 100px !important;
		}
	}
}

.video-ended {
	display: none !important;
}

.blur-out {
	filter: blur(0);
}
.blur-out.blurred {
	filter: blur(10px) !important;
	opacity: 0 !important;
}

.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}

.loading.hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s 0.2s ease;
}
.pixel {
	width: calc(100vw / 15);
	height: calc(100vh / 15);
	background-color: black;
	opacity: 1;
	transition: opacity 0.3s ease;
	flex-shrink: 0;
}

.pixel.fade-out {
	opacity: 0;
}

#logo {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40vw;
	height: 40vh;
	z-index: 201;
	border-radius: 50%;
}
#logo.page-loaded {
	right: 48px;
	top: 48px;
	height: 56px;
	width: 56px;
	left: initial;
	transform: translate(0, 0);
	transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.video.inactive {
	opacity: 0.3 !important;
	transform: translateX(10vw) !important;
	pointer-events: none;
}
.video-info .video.inactive {
	transform: translateX(-10vw) !important;
}

.video {
	transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.relative{position:relative;}
.flex{display:flex;}
.justify-center{justify-content:center;}
.gap-4{gap:4px;}


.video-controls {
	display: flex;
	align-items: flex-end;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100vw;
	padding-bottom: 24px;
	height: min(120px, 10vh);
	box-sizing: border-box;
	transition: opacity 0.3s, transform 0.3s;

	&.hidden{
		opacity: 0;
		pointer-events: none;
		transform: translateY(100%);
	}

	&, & *{
		color: white;
		z-index: 20;
	}
	.control{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 32px;
		max-width: 480px;
		background-color: black;
		img{
			width: initial;
			height: initial;
			object-fit: fill;
		}
	}
	.control.time{
		padding: 8px;
		width: 100%;
	}
	.control.square{
		width: 32px;

	}
	.control.play-pause-btn{
		width: 54px;
	}
}

.options-popup {
	display: flex;
	align-items: center;
	height: 32px;
	width: fit-content;
	background-color: black;
	position: absolute;
	right: 0;
	bottom: calc(100% + 4px);
	transition: all 0.3s;

	.option{
		display: flex;
		align-items: center;
		height: 100%;
		padding: 6px;
		/* &:hover{
			background-color: #b7b8b3;
			color: black;
		} */
		&:not(.selected){
			opacity: 0.5;
		}
	}
}
.options-popup:not(.active){
	display: none;
	opacity: 0;
}
.options-popup.active {
	opacity: 1;
}



hr.small {
	padding-left: 4px;
	padding-right: 4px;
	width: fit-content;
	height: fit-content;
	opacity: 0.2;
	border: none;

	&::after {
		content: '|';
		display: block;
		width: 2px;

		background: #ffffff;
		color: transparent;
	}
}


.progress-bar {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	transition: background-color 0.2s ease;
	position: relative;
}

.loading-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: rgba(255, 255, 255, 0.4);
	z-index: 1;
}

.progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: rgba(255, 255, 255, 0.76);
	z-index: 2;
}

.progress-handle {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 16px;
	height: 16px;
	z-index: 3;
	background-color: white;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	z-index: 10;
}

.progress-bar:hover .progress-handle {
	opacity: 1;
}


.action-popups {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10;
	pointer-events: none;
}
.action-popup {
	position: fixed;
	top: 50%;
	left: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 120px;
	height: 54px;
	padding: 0 24px;
	font-size: 21px;

	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	transition: all 0.5s;

	img{
		height: 32px !important;
		width: fit-content !important;
	}

	&.action{
		height: 64px;
		width: 64px;
		pointer-events: all;
	}

	&.center{
		left: 50%;
		transform: translate(-50%, -50%);
	}
	&.right{
		left: initial;
		right: 0;
	}
	&.left{
		left: 0;
	}

	/* disspear */
	&:not(.active){
		pointer-events: none;
		opacity: 0;

		&.left{
			transform: translateX(-400px);
		}
		&.right{
			transform: translateX(400px);
		}
		&.center{
			transform: translate(-50%, -50%);
		}
	}

}

.video-js {
	background-color: transparent !important;
}

.contact-popup {
	position: absolute;
	top: 36px;
	left: 0;
	background-color: #000;
	transition: 0.2s;

	&:not(.active){
		opacity: 0;
		pointer-events: none;
		transform: translateX(-30px);
	}

	a {
		justify-content: flex-start;

		span {
			opacity: 0.5;
			margin-right: 12px;
		}
	}

	.contact-qoute {
		padding: 10px 36px;
		margin: 0;

		background-color: rgba(255, 255, 255, 0.12);
		span {
			width: fit-content;
			display: block;
			white-space: nowrap;
		}
	}
}