/*
========================================
MOVING CONSTRUCTION TAPE
========================================
*/

.construction-tape {
	position: relative;
	z-index: 20;
	width: 110%;
	height: 72px;
	margin: 8px 0 0 -5%;
	overflow: hidden;
	background:
		repeating-linear-gradient(
			-45deg,
			var(--build-yellow) 0,
			var(--build-yellow) 34px,
			var(--build-black) 34px,
			var(--build-black) 68px
		);
	border-top: 5px solid var(--build-black);
	border-bottom: 5px solid var(--build-black);
	box-shadow: 0 8px 0 rgba(23, 23, 23, 0.18);
	transform: rotate(-1.2deg);
}

.construction-tape-track {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	width: max-content;
	height: 100%;
	animation: construction-tape-scroll 25s linear infinite;
}

.construction-tape-text {
	display: flex;
	flex: 0 0 auto;
	flex-flow: row nowrap;
	align-items: center;
	width: max-content;
	white-space: nowrap;
}

.construction-tape-text span {
	display: block;
	flex: 0 0 auto;
	margin-right: 55px;
	padding: 6px 13px;
	background: var(--build-yellow);
	color: var(--build-black);
	border: 3px solid var(--build-black);
	box-shadow: 4px 4px 0 var(--build-black);
	font-family: monospace;
	font-size: 16px;
	font-weight: 900;
	line-height: 1.2;
	white-space: nowrap;
}

.construction-tape:hover .construction-tape-track {
	animation-play-state: paused;
}

@keyframes construction-tape-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}


/*
========================================
HERO
========================================
*/

.build-hero {
	position: relative;
	min-height: 950px;
	max-width: none !important;
	padding: 115px 20px 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		radial-gradient(
			circle at 18% 35%,
			rgba(246, 201, 0, 0.36),
			transparent 23%
		),
		radial-gradient(
			circle at 82% 65%,
			rgba(228, 73, 50, 0.13),
			transparent 23%
		);
}

.build-hero::before {
	content: "";
	position: absolute;
	inset: 55px 5% 70px;
	border: 5px solid var(--build-black);
	transform: rotate(-1deg);
	pointer-events: none;
}

.build-hero::after {
	content: "KEEP OUT";
	position: absolute;
	right: 5%;
	bottom: 82px;
	padding: 8px 18px;
	background: var(--build-red);
	color: white;
	border: 4px solid var(--build-black);
	box-shadow: 7px 7px 0 var(--build-black);
	font-size: 22px;
	font-weight: 900;
	transform: rotate(-7deg);
}

.build-stamp {
	position: absolute;
	top: 92px;
	left: 8%;
	padding: 8px 14px;
	border: 3px solid var(--build-red);
	color: var(--build-red);
	font-family: monospace;
	font-weight: 900;
	transform: rotate(-6deg);
}

.build-title {
	position: relative;
	z-index: 2;
	margin: 0 !important;
	font-size: clamp(68px, 12vw, 150px) !important;
	line-height: 0.78 !important;
	letter-spacing: -6px;
	text-transform: uppercase;
}

.build-title span {
	display: block;
	font-size: 0.47em;
	letter-spacing: 14px;
	transform: rotate(-2deg);
}

.build-title strong {
	position: relative;
	display: inline-block;
	padding: 18px 28px 22px;
	background: var(--build-yellow);
	border: 7px solid var(--build-black);
	box-shadow: 14px 14px 0 var(--build-black);
	transform: rotate(1deg);
}

.build-title strong::before,
.build-title strong::after {
	content: "";
	position: absolute;
	width: 85px;
	height: 24px;
	background: rgba(225, 210, 162, 0.9);
	border: 1px solid rgba(23, 23, 23, 0.25);
}

.build-title strong::before {
	top: -20px;
	left: -45px;
	transform: rotate(-18deg);
}

.build-title strong::after {
	right: -48px;
	bottom: -20px;
	transform: rotate(15deg);
}

.build-lead {
	position: relative;
	z-index: 2;
	margin-top: 55px !important;
	font-size: clamp(25px, 4vw, 45px);
	font-weight: 900;
	line-height: 1.55;
}

.hero-warning {
	position: absolute;
	left: 8%;
	bottom: 92px;
	padding: 17px 22px;
	background: var(--build-white);
	border: 4px solid var(--build-black);
	box-shadow: 8px 8px 0 var(--build-black);
	font-family: monospace;
	font-weight: 900;
	transform: rotate(3deg);
}

.hero-warning span {
	color: var(--build-red);
	font-size: 26px;
}

.scroll-sign {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%) rotate(-2deg);
	text-align: center;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 2px;
}

.scroll-sign span {
	display: block;
	font-size: 24px;
	animation: build-bounce 1.2s infinite;
}

@keyframes build-bounce {
	50% {
		transform: translateY(8px);
	}
}


/*
========================================
WORKERS
========================================
*/

.build-workers {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(45px, 10vw, 150px);
	max-width: 920px;
	margin: 65px auto 55px;
}

.build-worker {
	position: relative;
	width: 260px;
	text-align: center;
}

.worker-character {
	position: relative;
	width: 165px;
	height: 190px;
	margin: 0 auto;
	animation: worker-bob 2.3s ease-in-out infinite;
}

.web-worker .worker-character {
	animation-delay: -0.6s;
}

.worker-helmet {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 4;
	width: 118px;
	padding: 9px 6px 7px;
	background: var(--build-yellow);
	border: 4px solid var(--build-black);
	border-radius: 60px 60px 12px 12px;
	box-shadow: inset 0 -7px 0 rgba(23, 23, 23, 0.12);
	font-family: monospace;
	font-size: 15px;
	font-weight: 900;
	transform: translateX(-50%);
}

.worker-helmet::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	z-index: -1;
	width: 15px;
	height: 43px;
	background: var(--build-yellow);
	border: 3px solid var(--build-black);
	border-radius: 8px;
	transform: translateX(-50%);
}

.worker-face {
	position: absolute;
	top: 39px;
	left: 50%;
	z-index: 3;
	width: 93px;
	height: 78px;
	border: 4px solid var(--build-black);
	transform: translateX(-50%);
}

.robot-face {
	background: #d8dde0;
	border-radius: 17px;
}

.robot-eye {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 24px 8px 0;
	background: var(--build-black);
	border-radius: 50%;
	animation: worker-blink 4.8s infinite;
}

.robot-mouth {
	position: absolute;
	right: 28px;
	bottom: 15px;
	left: 28px;
	height: 5px;
	background: var(--build-black);
}

.human-face {
	background: #e4b185;
	border-radius: 50% 50% 44% 44%;
}

.human-glasses {
	display: block;
	margin-top: 20px;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: -4px;
}

.worker-body {
	position: absolute;
	top: 101px;
	left: 50%;
	z-index: 2;
	width: 115px;
	height: 82px;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--build-yellow);
	border: 4px solid var(--build-black);
	border-radius: 16px 16px 8px 8px;
	transform: translateX(-50%);
}

.worker-body span {
	font-size: 57px;
	line-height: 1;
}

.worker-tool {
	position: absolute;
	z-index: 5;
	transform-origin: 20% 80%;
}

.hammer {
	top: 103px;
	right: -4px;
	font-size: 47px;
	animation: worker-hammer 1.15s ease-in-out infinite;
}

.coffee {
	top: 117px;
	right: 2px;
	font-size: 40px;
	animation: coffee-break 3s ease-in-out infinite;
}

.worker-name {
	display: inline-block;
	padding: 7px 14px;
	background: var(--build-black);
	color: white;
	font-weight: 900;
	transform: rotate(-2deg);
}

.worker-comment {
	position: relative;
	margin-top: 17px;
	padding: 13px 15px;
	background: var(--build-white);
	border: 3px solid var(--build-black);
	box-shadow: 5px 5px 0 var(--build-black);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.65;
	transform: rotate(1deg);
}

.worker-comment::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 50%;
	border-right: 12px solid transparent;
	border-bottom: 16px solid var(--build-black);
	border-left: 12px solid transparent;
	transform: translateX(-50%);
}

.worker-comment::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	border-right: 9px solid transparent;
	border-bottom: 12px solid var(--build-white);
	border-left: 9px solid transparent;
	transform: translateX(-50%);
}

.worker-status {
	position: absolute;
	top: 15px;
	right: -7px;
	z-index: 10;
	padding: 6px 10px;
	background: var(--build-green);
	border: 3px solid var(--build-black);
	box-shadow: 3px 3px 0 var(--build-black);
	font-family: monospace;
	font-size: 12px;
	font-weight: 900;
	transform: rotate(8deg);
}

.worker-status-rest {
	background: var(--build-red);
	color: white;
}

.human-worker.is-working .worker-status-rest {
	background: var(--build-green);
	color: var(--build-black);
}

.human-worker.is-working .coffee {
	animation: worker-hammer 1.15s ease-in-out infinite;
}

.hero-board {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
	max-width: 800px;
	margin: 0 auto;
}

.hero-board-item {
	padding: 25px;
	background: var(--build-white);
	border: 4px solid var(--build-black);
	box-shadow: 7px 7px 0 var(--build-black);
	transform: rotate(-1deg);
}

.hero-board-item:nth-child(2) {
	transform: rotate(1deg);
}

.board-label {
	display: inline-block;
	margin-bottom: 15px;
	padding: 5px 10px;
	background: var(--build-black);
	color: white;
	font-family: monospace;
	font-weight: 900;
}

.hero-board ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-board li::before {
	content: "☐";
	margin-right: 8px;
	font-weight: 900;
}

.hero-board li.done::before {
	content: "☑";
}

.build-progress {
	height: 28px;
	overflow: hidden;
	background: white;
	border: 3px solid var(--build-black);
}

.build-progress-bar {
	width: 63%;
	height: 100%;
	background:
		repeating-linear-gradient(
			-45deg,
			var(--build-yellow) 0,
			var(--build-yellow) 12px,
			var(--build-black) 12px,
			var(--build-black) 24px
		);
	transition: width 0.5s ease;
}

.build-progress-number {
	display: block;
	margin-top: 8px;
	font-family: monospace;
	font-size: 28px;
}

.hero-board small {
	display: block;
	line-height: 1.5;
}

@keyframes worker-hammer {
	0%,
	55%,
	100% {
		transform: rotate(-18deg);
	}

	70% {
		transform: rotate(28deg);
	}
}

@keyframes worker-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

@keyframes worker-blink {
	0%,
	45%,
	49%,
	100% {
		transform: scaleY(1);
	}

	47% {
		transform: scaleY(0.12);
	}
}

@keyframes coffee-break {
	0%,
	100% {
		transform: rotate(-4deg) translateY(0);
	}

	50% {
		transform: rotate(9deg) translateY(-7px);
	}
}