* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 38;
	--bg: hsl(var(--hue),90%,50%);
	--fg: hsl(var(--hue),90%,10%);
	--trans-dur: 0.3s;
	font-size: calc(14px + (56 - 14) * (100vw - 280px) / (3840 - 280));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font: 1em/1.5 sans-serif;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}

$debug: false;
$ease-in: cubic-bezier(0.33,0,0.67,0);
$ease-out: cubic-bezier(0.33,1,0.67,1);

.truck {
	@if $debug == true {
		outline: 1px solid;
	}
	--dur: 3s;
	display: block;
	width: 12em;
	height: auto;

	&__body,
	&__line,
	&__outside1,
	&__outside2,
	&__outside3,
	&__wheel,
	&__wheel-spin,
	&__window1,
	&__window2 {
		animation: truck-body var(--dur) linear infinite;
	}
	&__body {
		transform-origin: 17px 11px;
	}
	&__line {
		animation-name: truck-line;
	}
	&__outside1 {
		animation-name: truck-outside1;
	}
	&__outside2 {
		animation-name: truck-outside2;
	}
	&__outside3 {
		animation-name: truck-outside3;
	}
	&__wheel {
		animation-name: truck-wheel;

		&-spin {
			animation-name: truck-wheel-spin;
			transform-origin: 6.5px 17px;
		}
		&:nth-child(2) {
			animation-delay: calc(var(--dur) * 0.0625);
		}
		&:nth-child(2) &-spin {
			transform-origin: 27px 17px;
		}
	}
	&__window1 {
		animation-name: truck-window1;
	}
	&__window2 {
		animation-name: truck-window2;
	}
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,50%);
	}
}

/* Animations */
@keyframes truck-body {
	from,
	12.5%,
	25%,
	37.5%,
	50%,
	62.5%,
	75%,
	87.5%,
	to {
		animation-timing-function: $ease-in;
		transform: translate(0,0) rotate(0);
	}
	6.25%,
	18.75%,
	31.25%,
	43.75%,
	56.25%,
	68.75%,
	81.25%,
	93.75% {
		animation-timing-function: $ease-out;
		transform: translate(0,1px) rotate(-0.75deg);
	}
}
@keyframes truck-line {
	from {
		stroke-dashoffset: -18;
	}
	to {
		stroke-dashoffset: 78;
	}
}
@keyframes truck-outside1 {
	from {
		stroke-dashoffset: 105;
	}
	to {
		stroke-dashoffset: -105;
	}
}
@keyframes truck-outside2 {
	from {
		stroke-dashoffset: 168;
	}
	to {
		stroke-dashoffset: -42;
	}
}
@keyframes truck-outside3 {
	from {
		stroke-dashoffset: 192;
	}
	to {
		stroke-dashoffset: -18;
	}
}
@keyframes truck-wheel {
	from,
	12.5%,
	25%,
	37.5%,
	50%,
	62.5%,
	75%,
	87.5%,
	to {
		animation-timing-function: $ease-in;
		transform: translate(0,0);
	}
	6.25%,
	18.75%,
	31.25%,
	43.75%,
	56.25%,
	68.75%,
	81.25%,
	93.75% {
		animation-timing-function: $ease-out;
		transform: translate(0,-1px);
	}
}
@keyframes truck-wheel-spin {
	from {
		stroke-dashoffset: -15.71;
		transform: rotate(0);
	}
	to {
		stroke-dashoffset: 15.71;
		transform: rotate(-4turn);
	}
}
@keyframes truck-window1 {
	from {
		stroke-dashoffset: -21;
	}
	to {
		stroke-dashoffset: 189;
	}
}
@keyframes truck-window2 {
	from {
		stroke-dashoffset: -39;
	}
	to {
		stroke-dashoffset: 171;
	}
}