/* =========================================
   MACHINE VISUAL LAYER
========================================= */

.flat-machine--hero,
.flat-machine--side,
.physics-obstacle {
	display: none;
}

.machine-stage {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 1;
	height: calc(var(--app-height) * 3);
	pointer-events: none;
	overflow: hidden;
}

.machine-stage svg,
.machine-stage img,
.machine-stage span {
	position: absolute;
	display: block;
}

.machine-defs {
	width: 0;
	height: 0;
	overflow: hidden;
}

/* =========================================
   BACKGROUND PIPES
========================================= */

.machine-bg-pipe {
	height: calc(var(--app-height) * 1.08);
	width: clamp(92px, 8vw, 150px);
	opacity: 0.12;
	object-fit: fill;
}

.machine-bg-pipe--top {
	top: calc(var(--app-height) * -0.04);
}

.machine-bg-pipe--mid {
	top: calc(var(--app-height) * 0.96);
}

.machine-bg-pipe--low {
	top: calc(var(--app-height) * 1.96);
}

.machine-bg-pipe--left {
	left: clamp(-36px, -2.5vw, -14px);
}

.machine-bg-pipe--left.machine-bg-pipe--mid {
	left: clamp(-54px, -3.4vw, -22px);
}

.machine-bg-pipe--left.machine-bg-pipe--low {
	left: clamp(-26px, -1.8vw, -10px);
}

.machine-bg-pipe--right {
	right: clamp(-42px, -3vw, -18px);
}

.machine-bg-pipe--right.machine-bg-pipe--mid {
	right: clamp(-24px, -1.7vw, -8px);
}

.machine-bg-pipe--right.machine-bg-pipe--low {
	right: clamp(-58px, -3.8vw, -24px);
}

/* =========================================
   SECTION 2 RED PIPE
========================================= */

.machine-red-pipe {
	left: clamp(-18px, -1vw, -6px);
	top: calc(var(--app-height) * 1.08);
	width: clamp(210px, 24vw, 360px);
	height: clamp(118px, 16vh, 180px);
	overflow: visible;
}

.red-pipe-shadow,
.red-pipe-main,
.red-pipe-light {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.red-pipe-shadow {
	stroke: rgba(21, 21, 20, 0.2);
	stroke-width: 38;
}

.red-pipe-main {
	stroke: #b8322c;
	stroke-width: 28;
}

.red-pipe-light {
	stroke: rgba(255, 235, 218, 0.32);
	stroke-width: 6;
}

.red-pipe-joint,
.red-pipe-outlet,
.red-pipe-mouth {
	fill: #151514;
	stroke: #b8322c;
	stroke-width: 8;
}

.red-pipe-joint {
	fill: #2a1715;
}

.red-pipe-mouth {
	fill: #b8322c;
	stroke: #151514;
	stroke-width: 5;
}

/* =========================================
   GEAR CLUSTERS
========================================= */

.gear-cluster {
	overflow: visible;
	color: #8f8a7f;
	filter: none;
}

.gear-cluster--left {
	left: clamp(-126px, -6.5vw, -78px);
	top: calc(var(--app-height) * 1.44);
	width: clamp(330px, 35vw, 560px);
	filter: none;
}

.gear-cluster--right {
	right: clamp(-134px, -7vw, -82px);
	top: calc(var(--app-height) * 2.0);
	width: clamp(340px, 36vw, 580px);
	filter: drop-shadow(1px 4px 5px rgba(21, 21, 20, 0.47));
}

.gear {
	-webkit-mask-image: radial-gradient(circle at center, transparent 0 14%, #000 15%);
	mask-image: radial-gradient(circle at center, transparent 0 14%, #000 15%);
}

.gear-shell,
.gear-body {
	fill: currentColor;
}

.gear-body {
	stroke: rgba(248, 239, 225, 0.46);
	stroke-width: 5;
}

.gear-hole {
	fill: var(--cream);
	stroke: rgba(21, 21, 20, 0.34);
	stroke-width: 6;
}

.gear-spokes {
	fill: none;
	stroke: rgba(248, 239, 225, 0.70);
	stroke-width: 8;
	stroke-linecap: round;
}

.gear--mid,
.gear--small,
.gear--tiny {
	opacity: 0.96;
}

.gear--reverse {
	transform-box: fill-box;
	transform-origin: center;
}

/* =========================================
   SIMPLE VISUAL PLANKS
========================================= */

.machine-plank-lane {
	position: absolute;
	inset: 0;
}

.machine-plank {
	left: clamp(34px, 5vw, 96px);
	height: clamp(18px, 2vw, 28px);
	border-radius: 3px;
	background: #151514;
	box-shadow: 0 10px 0 rgba(21, 21, 20, 0.07);
	transform-origin: 0 50%;
}


@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	.machine-plank {
		left: calc(clamp(34px, 5vw, 96px) - 80px);
	}
}

.machine-plank::after {
	content: "";
	position: absolute;
	left: 9%;
	right: 9%;
	top: 45%;
	height: 2px;
	background: rgba(248, 239, 225, 0.16);
}

.machine-plank--one {
	display: none;
}

.machine-plank--two {
	top: calc(var(--app-height) * 1.98);
	width: clamp(300px, 34vw, 520px);
	transform: rotate(0deg);
}

.machine-plank--two::before {
	content: "";
	position: absolute;
	right: clamp(-15px, -1.2vw, -8px);
	top: clamp(-18px, -1.6vw, -10px);
	z-index: 2;
	width: clamp(24px, 2.2vw, 36px);
	height: clamp(18px, 1.8vw, 28px);
	border-radius: 999px 999px 5px 5px;
	background: #151514;
	box-shadow:
		inset 0 2px 0 rgba(248, 239, 225, 0.14),
		0 7px 10px rgba(21, 21, 20, 0.08);
}

.machine-plank--three {
	display: none;
}

/* =========================================
   TOUCH / TABLET
========================================= */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
	.machine-bg-pipe {
		width: clamp(70px, 14vw, 120px);
		opacity: 0.1;
	}

	.machine-red-pipe {
		top: calc(var(--app-height) * 1.08);
		width: clamp(210px, 50vw, 340px);
	}

	.gear-cluster--left {
		left: clamp(-112px, -21vw, -62px);
		width: clamp(275px, 72vw, 455px);
	}

	.gear-cluster--right {
		right: clamp(-122px, -24vw, -66px);
		width: clamp(285px, 74vw, 470px);
	}

	.machine-plank--two {
		left: clamp(18px, 5vw, 44px);
		top: calc(var(--app-height) * 1.99);
		width: clamp(240px, 74vw, 440px);
	}
	filter: none;
}


@media (max-width: 540px) {
	.machine-red-pipe {
		left: calc(clamp(-18px, -1vw, -6px) + 10vw);
	}

	.gear-cluster--left {
		top: calc(var(--app-height) * 1.64);
	}

	.machine-plank--two {
		left: clamp(64px, 17vw, 78px);
		top: calc(var(--app-height) * 1.79);
	}
}