@property --wipe-position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

@property --laserPosition {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

:root {
	--lightblue: #57a7bb;
}
html {
	scroll-padding-top: 0 !important;
}

.mainStage:has(.allDisabled) {
	display: grid;
	align-items: center;
}

.allDisabled {
	.editorHtml {
		color: white;
	}
}

body.page-trainee-game {
	padding: 0;
	margin: 0;
	background-color: black;

	@supports (scrollbar-width: auto) {
		.scroller {
			scrollbar-width: thin;
		}
	}

	main {
		display: grid;
		place-items: center;
		width: 100vw;
		height: 100vh;
	}

	.navigationContainer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 20px;
		margin-bottom: 40px;
		margin-inline: 20px;

		button {
			height: 92px;

			&.select {
				min-width: max(200px, 80%);
				grid-row: 1;
				grid-column: span 2;
				width: 100%;

				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			&.prev {
				justify-self: start;
			}

			&.next {
				justify-self: end;
			}

			.name {
				min-height: 1lh;
			}

			.action {
				font-size: 1rem;
				display: inline-block;
			}
		}
	}

	main .mainStage > :not(.applicationStage) button {
		font-size: 1.5rem;
		font-family: 'eurostile-extended', 'sans-sarif';
		font-weight: 700;
		color: white;
		background: linear-gradient(135deg, rgb(from var(--lightblue) r g b / 10%) 0%, var(--lightblue) 100%);
		box-shadow: 0 0 12px var(--lightblue);
		padding: 1rem 2rem;
		border: 2px solid white;
		border-radius: 10px;
		cursor: pointer;
		text-transform: uppercase;

		&:disabled {
			opacity: 0.3;
		}
	}

	progress {
		width: 100%;
		height: 30px;
		border-radius: 100vw;
		box-shadow: 0 0 12px var(--lightblue);
		appearance: none;
		-webkit-appearance: none;

		container-type: inline-size;
	}

	progress::-webkit-progress-bar {
		background: #e0e0e0;
		border-radius: 100vw;
		overflow: hidden;
	}

	progress::-webkit-progress-value {
		background: linear-gradient(135deg, rgb(from var(--lightblue) r g b / 10%) 0%, var(--lightblue) 100%);
		background-size: 100cqi;
		border-radius: 100vw;
	}

	progress::-moz-progress-bar {
		background: linear-gradient(135deg, rgb(from var(--lightblue) r g b / 10%) 0%, var(--lightblue) 100%);
		background-size: 100cqi;
		border-radius: 15px;
	}

	.preload {
		position: absolute;
		inset: 0;
		background-color: black;
		z-index: 10;
		text-align: center;
		display: grid;
		place-content: center;
		gap: 30px;
		z-index: 100;

		&.hide {
			display: none;
			z-index: -1;
		}

		.loading {
			color: white;
			margin-bottom: 50px;
		}
	}

	.wipe {
		--wipe-position: 100%;
		--gradient-length: 20%;
		-webkit-mask-image: linear-gradient(
			to bottom right,
			black var(--wipe-position),
			transparent calc(var(--wipe-position) + var(--gradient-length)),
			transparent
		);
		mask-image: linear-gradient(
			to bottom right,
			black var(--wipe-position),
			transparent calc(var(--wipe-position) + var(--gradient-length)),
			transparent
		);
		transition: --wipe-position 600ms cubic-bezier(0, 0.55, 0.45, 1);

		&.hiding {
			--wipe-position: calc(-1 * var(--gradient-length));

			& *:is(.leftHalf,.rightHalf) > *,
			& *:is(.profile,.benefits) > .content {
				backdrop-filter: none !important;
			}
		}
	}

	.scanMask {
		--wipe-position: 100%;
		--gradient-length: 1%;
		--laserPosition: 0%;
		position: relative;

		--webkit-mask-image: linear-gradient(
			to top,
			black var(--wipe-position),
			transparent calc(var(--wipe-position) + var(--gradient-length)),
			transparent
		);
		mask-image: linear-gradient(
			to top,
			black var(--wipe-position),
			transparent calc(var(--wipe-position) + var(--gradient-length)),
			transparent
		);
		transition-property: --wipe-position, --laserPosition;
		transition-duration: 2000ms;
		transition-timing-function: ease-in-out;

		&::after {
			content: '';
			position: absolute;
			top: var(--laserPosition);
			left: 0;
			width: 100%;
			height: 5px;
			background-color: var(--lightblue);
			box-shadow: 50px 50px 50px red;
			display: none;
		}

		&.hiding {
			--laserPosition: 100%;
			--wipe-position: calc(-1 * var(--gradient-length));

			&::after {
				display: block;
			}
		}
	}

	.radialBackground {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background: radial-gradient(#2693aa, #0f4662);
			opacity: 0.95;
			z-index: -1;
		}
	}

	.mainStage {
		width: 100vw;
		height: 100vh;
		max-width: 2000px;
	}

	.stageContainer {
		position: relative;
	}

	.stage {
		--transition-duration-slideOut: 0.5s;
		--transition-delay-slideOut: 0s;

		background: var(--stageBackground) center center no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		gap: 50px;
		overflow: clip;

		position: absolute;
		inset: 0;
		z-index: 10;

		&.hide {
			display: none;
			z-index: -1;
		}

		& >:nth-child(1) {
			flex-grow: 1;
			display: flex;
		}

		.video {
			width: 40%;
			height: 100%;
			position: absolute;
			top: 20px;
			left: 20px;
			display: grid;
			place-items: center center;
			overflow: clip;

			video {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: top center;

				transform-origin: center center;

				transition-property: all;
				transition-duration: var(--transition-duration-slideOut);
				transition-timing-function: ease;
			}
		}
	}

	.stage *:is(.leftHalf,.rightHalf) {
		height: 100%;
		width: 50%;
		position: absolute;
	}

	.stage .rightHalf {
		right: 0px;
	}

	.stage.loaded *:is(.leftHalf,.rightHalf) > * {
		position: absolute;
		border-radius: 18px;
		border-width: 1px;
		border-color: var(--borderColor);
		box-shadow:
			0 0 4px var(--borderColor),
			inset 0 0 4px var(--borderColor);

		background: rgba(0, 0, 0, 0.01);
		backdrop-filter: blur(11.2px);
		-webkit-backdrop-filter: blur(11.2px);

		transition-property: left, right, transform;
		transition-duration: var(--transition-duration-slideOut);
		transition-timing-function: cubic-bezier(0.3, 0.69, 0.6, 1.25);
		transition-delay: calc((var(--siblingIndex) - 1) * var(--transition-delay-slideOut));

		&[disabled] {
			filter: grayscale(100%);
		}

		&::after {
			content: '';
			position: absolute;
			inset: 12px;
			border-radius: 10px;
			border-width: 1px;
			border-color: var(--borderColor);
			box-shadow:
				0 0 8px var(--borderColor),
				inset 0 0 8px var(--borderColor);
			z-index: 1;
		}

		.content {
			position: absolute;
			inset: 30px;
			border-radius: 5px;
			box-shadow: 0 0 3px var(--borderColor);
			background-position: top center;
			background-size: cover;
			display: grid;
			z-index: 2;

			&:not(:has(.nameContainer)) {
				display: block;
			}

			.nameContainer {
				padding: 15px 10px;
				border-radius: 5px;
				border: 1px solid var(--borderColor);
				align-self: end;
				display: grid;
				place-items: center;
				background-color: rgba(9,35,48,0.85);
			}
			.name {
				color: white;
				text-align: center;
				font-size: 1.2rem;
				font-weight: 900;
				font-family: 'eurostile-extended','sans-serif';
				text-transform: uppercase;
			}

			.jobTitle {
				margin-top: 2px;
				color: white;
				text-align: center;
				font-size: 16px;
				font-weight: 400;
				font-family: 'eurostile-extended','sans-serif';
			}
		}
	}
	.stage.loaded.slideElementsIn *:is(.leftHalf,.rightHalf) > * {
		transition-delay: calc((3 - var(--siblingIndex)) * var(--transition-delay-slideOut));
	}

	.rightHalf .element1 {
		height: 100%;
	}

	.element1 {
		--siblingIndex: 1;
		--borderColor: oklch(0.6588 0.2763 29.23);
		z-index: 3;
	}
	.element2 {
		display: none;
		--siblingIndex: 2;
		--borderColor: oklch(0.7853 0.1677 230.82);
		z-index: 2;
	}
	.element3 {
		display: none;
		--siblingIndex: 3;
		--borderColor: oklch(0.7853 0.1677 230.82);
		z-index: 1;
	}

	*:is(.element2, .element3):not([disabled]) {
		cursor: pointer;
	}

	.leftHalf > * {
		height: 60%;
		width: 40%;
		position: absolute;
		top: 20%;
		left: 10px;
	}

	.leftHalf .element1 {
		display: none;
	}

	.leftHalf .element2 {
		left: 22%;
		scale: .85;
	}

	.leftHalf .element3 {
		left: 40%;
		scale: .7;
	}

	.rightHalf > * {
		height: 60%;
		width: 40%;
		position: absolute;
		top: 20%;
		right: 10px;
	}

	.rightHalf .element1 {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 20px;
		right: 20px;
		display: block;
		color: white;
	}

	.rightHalf .element2 {
		right: 22%;
		scale: .85;
	}

	.rightHalf .element3 {
		right: 40%;
		scale: .7;
	}

	.stage.slideElementsOut .leftHalf > * {
		left: -100px;
		transform: translateX(-100%);
	}

	.stage.slideElementsOut .rightHalf > * {
		right: -100px;
		transform: translateX(100%);
	}

	.stage.slideElementsOut .video video {
		width: 0;
		height: 0;
	}

	.skillContainer {
		height: 100%;
	}

	.scroller {
		overflow-y: scroll;
	}

	.headline {
		font-size: 1.25rem;
		padding: 10px 20px;
		font-weight: 700;
		text-align: center;
		border: 1px solid var(--borderColor);
		font-family: "eurostile-extended", 'sans-serif';
	}

	.skills {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 20px;

		.title {
			font-size: 1rem;
			word-break: break-word;
			font-family: "eurostile-extended", 'sans-serif';
		}
		.level {
			border: 1px solid white;
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 5px;
			background-color: transparent;
		}
		&.animate .levels .level.filled {
			transition-property: background-color;
			transition-duration: 0.1s;
			transition-delay: calc(sibling-index()*0.15s);
			transition-timing-function: ease;
			background-color: white;
		}
	}

	.benefitStage {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 9;
		background-color: black;
		isolation: isolate;
		overflow: clip;

		&.loaded {
			display: block;
		}

		&.hide {
			display: none;
			z-index: -1;
		}

		.video {
			width: 100%;
			height: 100%;
		}

		video {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center center;
		}
	}

	.profile,
	.benefits {
		--labelWidth: 40px;
		--contentWidth: min(80%,70ch);

		position: absolute;
		top: 0px;
		height: 100%;
		display: flex;
		width: var(--contentWidth);
		transition: all 600ms ease;
		z-index: 1;

		.label {
			position: absolute;
			top: 100px;
			width: var(--labelWidth);
			padding-inline: 20px;
			background-color: white;
			color: #2693aa;
			display: grid;
			place-items: center;
			cursor: pointer;
		}

		.content {
			padding: 20px;
			width: var(--contentWidth);
			flex-grow: 1;
			overflow: clip;
			overflow-y: scroll;
			color: white;
		}

		.jobInfo {
			display: none;

			&.active {
				display: block;
			}
		}
	}
	.profile {
		left: 0;
		transform: translateX(calc((100% - var(--labelWidth) + 1px) * -1));

		&.opened {
			transform: translateX(0);
		}

		.label {
			right: 0px;
			writing-mode: sideways-rl;
			border-radius: 0 10px 10px 0;
		}
		.content {
			margin-inline-end: var(--labelWidth);
			border-right: 10px solid white;
		}
	}

	.benefits {
		right: 0;
		transform: translateX(calc((100% - var(--labelWidth) + 1px)));

		&.opened {
			transform: translateX(0);
		}

		.label {
			left: 0px;
			writing-mode: sideways-lr;
			border-radius: 10px 0 0 10px;
		}
		.content {
			margin-inline-start: var(--labelWidth);
			border-left: 10px solid white;
		}
	}

	#OpenApplication,
	#ContinueVideo {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		animation: 2s 0.5s infinite pulse;
		white-space: nowrap;
	}

	.applicationStage {
		display: none;
		position: absolute;
		inset: 0;
		z-index: 8;
		background-color: white;
		isolation: isolate;
		overflow: clip;
		overflow-y: scroll;
		padding: 40px;

		&.loaded {
			display: block;
		}
	}

	.editorRedBackgroundText {
		--backgroundSpaceTop: 0.25em;
		--backgroundSpaceBottom: 0px;
		--textBackgroundColor: #BD012B;

		color: white;

		background: var(--textBackgroundColor);
	}

	@media ((width >= 1400px) and (height>=800px)) {
		.mainStage {
			/* Keep a 16:9 box that fits inside the viewport both horizontally and vertically */
			aspect-ratio: 16/9;
			width: min(95vw, calc(95vh * (16/9)));
			height: auto;
			max-width: 2000px;
			position: relative;
		}

		.stage {
			--transition-delay-slideOut: 0.25s;
			gap: 0px;
			display: block;

			.video {
				top: auto;
				bottom: 0px;
				left: 50%;
				transform: translateX(-50%);
				width: 25%;
				height: 95%;
			}
		}

		.stageContainer {
			height:100%;
		}

		.leftHalf .element1 {
			display: block;
		}

		.element2,
		.element3 {
			display: block;
		}

		.rightHalf .element1 {
			height: 60%;
			width: 40%;
			position: absolute;
			top: 20%;
			right: 10px;
		}

		.navigationContainer {

			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			margin-bottom: 0px;

			grid-template-columns: auto auto auto auto;
			grid-template-rows: 1fr;

			button.select {
				min-width: 400px;
				margin-inline: 0;
				grid-row: auto;
				grid-column: auto;
			}

			button.prev,
			button.next {
				margin-inline: 0;
			}
		}

		.benefitStage {
			position: absolute;
			inset: 0;

			.video {
				width: 100%;
				height: 100%;
				display: block;

				video {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center center;
				}
			}
		}
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 var(--lightblue);
	}

	70% {
		box-shadow: 0 0 0 20px rgba(0, 123, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
	}
}