@charset "UTF-8";

section#introdution {
	position: relative;
	width: 100%;
	height: var(--introdution-height, 350px);
	overflow: hidden;
	background-color: #000;

	+section.row {
		--shadow: 0px -10px 60px 30px rgba(0, 0, 0, 0.6);
		padding-top: 1rem;
		box-shadow: var(--shadow);
		-webkit-box-shadow: var(--shadow);
		-moz-box-shadow: var(--shadow);
	}

	>div.information {
		z-index: 200;
		position: fixed;
		width: 33rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: default;
		/* transform: perspective(35px) rotatex(1deg); */

		>span#label {
			--shadow: 0px 9px 8px 0px rgb(0 0 0 / 40%);
			margin-top: -2em;
			padding: 0.4em 0.8em 0.2em 1.2em;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 1em;
			font-size: 1.2rem;
			font-family: "Bahnschrift";
			font-weight: 400;
			border-radius: 1.125rem;
			color: #aeb629;
			border: 1px solid #e06a6a6e;
			border-bottom: unset;
			background-color: #472929a8;
			backdrop-filter: blur(1.3px);
			box-shadow: var(--shadow);
			-webkit-box-shadow: var(--shadow);
			-moz-box-shadow: var(--shadow);
			/* transform: perspective(25px) rotatex(-1deg); */

			>i.icon.code {
				margin-bottom: 3px;
			}
		}

		>h2#title {
			margin: unset;
			width: max-content;
			padding: 0.2em 0.5em 0em;
			font-family: Bahnschrift;
			font-size: 2.6rem;
			font-weight: 400;
			color: #fff;
			text-shadow:
				0px 0px 4px #ffffff85,
				0px 0px 9px #ffffff47;

			>span.kodorvan {
				color: #ffff00;
				text-shadow:
					0px 0px 4px #ffff00b5,
					0px 0px 11px #ffff008a
			}
		}

		>p#team {
			margin: unset;
			width: 100%;
			/* height: 70px; */
			box-sizing: border-box;
			padding: 0.6em 1em;
			text-align: center;
			font-size: 1.2rem;
			font-family: "Bahnschrift";
			font-weight: 400;
			border-radius: 0.75rem;
			background-color: #fff;

			>b {
				color: #152bcb;
			}

			>strong {
				color: #de1111;
			}
		}

		>span {
			position: absolute;
			display: flex;
			padding: 0.4em 0.8rem 0.3em;
			font-size: 1.2rem;
			font-family: "Bahnschrift";
			font-weight: 400;
			border-radius: 0.75rem;
			background-color: #fff;
		}
	}

	>div.background {
		z-index: 100;
		top: -5%;
		left: -5%;
		position: absolute;
		width: 110%;
		height: 110%;
		animation-name: appearance;
		animation-fill-mode: forwards;
		animation-duration: 0.2s;
		animation-delay: 1s;
		animation-timing-function: ease-in;
		filter: blur(1.8px) contrast(50);

		>div.dots {
			--dot-bg: black;
			--dot-color: #00ff00;
			--dot-size: 4px;
			--dot-space: 7px;
			z-index: -50;
			position: absolute;
			width: 100%;
			height: 100%;
			background:
				linear-gradient(90deg,
					var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
					transparent 1%) center / var(--dot-space) var(--dot-space),
				linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)),
					transparent 1%) center / var(--dot-space) var(--dot-space),
				var(--dot-color);
			mix-blend-mode: color-burn;
			filter: contrast(5);
		}

		>video:only-of-type {
			z-index: -100;
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			scale: 1.1;
			filter: blur(5px);
		}

		>canvas#introdution_animation {
			z-index: -100;
			position: absolute;
			width: 100%;
			scale: 1.2;
			filter: url(#blob) contrast(var(--contrast, 30));
		}
	}
}

@keyframes appearance {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
