* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow: hidden;
	background: linear-gradient(to right, var(--sky-a) 0%, var(--sky-b) 51%, var(--sky-a) 100%);
	background-size: 200% 100%;
	animation: sky 16s ease-in-out infinite alternate;
}

.stage {
	position: relative;
	width: min(62%, 620px, 82vh);
}

.sky-orb {
	transform: translate(0, -220px);
}

.sky-balloon1 {
	transform: translate(-62px, -26px);
}

.sky-balloon {
	transform: translate(-292px, 206px);
}

.sky-plane {
	transform: translate(0, 88px);
}

.scene {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.banner-text {
	font: 700 9.6px system-ui, -apple-system, "Segoe UI", sans-serif;
	text-anchor: middle;
}

.orb {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.orb:focus:not(:focus-visible) {
	outline: none;
}

.spin,
.spin-back,
.piece,
.trolley,
.cable,
.load,
.spark,
.beacon,
.puff,
.flap,
.twinkle,
.wheel,
.balloon,
.shimmer,
.sip {
	transform-box: fill-box;
	transform-origin: center;
}

.sway,
.roll {
	transform-box: fill-box;
}

.sway {
	transform-origin: bottom;
	animation: sway 4s ease-in-out infinite alternate;
}

.roll {
	animation: roll 1.6s ease-in-out infinite alternate;
}

.shovel {
	transform-box: view-box;
	transform-origin: 800px 400px;
	animation: shovel 1.4s ease-in-out infinite alternate;
}

.flag {
	transform-box: view-box;
	transform-origin: 34px 458px;
	animation: flag 0.7s ease-in-out infinite alternate;
}

.mixer {
	transform-box: view-box;
	animation: drive-left 55s linear infinite;
}

.dig {
	transform-box: view-box;
	transform-origin: 274px 696px;
	animation: dig 3s ease-in-out infinite alternate;
}

.plane {
	transform-box: view-box;
	animation: drive-left 60s linear infinite;
}

.churn {
	animation: churn 1s linear infinite;
}

.hammer,
.cursor,
.cloud,
.flight,
.flight-back,
.truck {
	transform-box: view-box;
}

.spin {
	animation: spin 6s linear infinite;
}

.spin-back {
	animation: spin 4s linear infinite reverse;
}

.rays {
	transform-box: fill-box;
	transform-origin: center;
	animation: spin 30s linear infinite;
}

.piece {
	animation: build 8s ease-in-out infinite;
}

.trolley {
	animation: trolley 8s ease-in-out infinite;
}

.cable {
	transform-origin: top;
	animation: cable 8s ease-in-out infinite;
}

.load {
	animation: load 8s ease-in-out infinite;
}

.spark {
	animation: spark 1.2s ease-out infinite;
}

.cloud {
	animation: drift 140s linear infinite;
}

.flight {
	animation: drift 70s linear infinite;
}

.flight-back {
	animation: drive-left 85s linear infinite;
}

.truck {
	animation: drift 40s linear infinite;
}

.wheel {
	animation: spin 0.8s linear infinite;
}

.beacon {
	animation: blink 1s steps(2, jump-none) infinite;
}

.lit {
	animation: flicker 3s ease-in-out infinite alternate;
}

.balloon {
	animation: bob 6s ease-in-out infinite alternate;
}

.hammer {
	transform-origin: 229px 163px;
	animation: hammer 0.9s ease-in infinite;
}

.cursor {
	transform-origin: 0 0;
	animation: cursor 7s ease-in-out infinite;
}

.puff {
	opacity: 0;
	animation: puff 8s ease-out infinite;
}

.flap {
	animation: flap 0.5s ease-in-out infinite alternate;
}

.twinkle {
	animation: twinkle 2.4s ease-in-out infinite;
}

.flow {
	animation: flow 2s linear infinite;
}

.star {
	animation: glimmer 3s ease-in-out infinite alternate;
}

.shimmer {
	animation: shimmer 2.4s ease-in-out infinite alternate;
}

.stroll {
	transform-box: view-box;
	animation: drift 150s linear infinite;
}

.stride {
	transform-box: fill-box;
	transform-origin: top;
	animation: stride 0.45s ease-in-out infinite alternate;
}

.stroll-back {
	transform-box: view-box;
	animation: drive-left 170s linear infinite;
}

.jog {
	transform-box: view-box;
	animation: drift 60s linear infinite;
}

.sprint {
	transform-box: fill-box;
	transform-origin: top;
	animation: sprint 0.3s ease-in-out infinite alternate;
}

.bounce {
	animation: bounce 0.15s ease-in-out infinite alternate;
}

.graze,
.swish {
	transform-box: fill-box;
}

.graze {
	transform-origin: right top;
	animation: graze 4s ease-in-out infinite alternate;
}

.swish {
	transform-origin: top;
	animation: swish 2.6s ease-in-out infinite alternate;
}

.roam,
.nibble,
.drink,
.ear,
.tail {
	transform-box: fill-box;
}

.roam {
	transform-origin: center bottom;
	animation: roam 14s ease-in-out infinite;
}

.nibble {
	transform-origin: left bottom;
	animation: nibble 1.8s ease-in-out infinite;
}

.drink {
	transform-origin: right top;
	animation: drink 8s ease-in-out infinite;
}

.ear {
	transform-origin: left bottom;
	animation: flick 5s ease-in-out infinite;
}

.tail {
	transform-origin: left bottom;
	animation: flick 7s ease-in-out infinite;
}

.sip {
	opacity: 0;
	animation: sip 8s ease-out infinite;
}

.chop {
	animation: chop 0.7s ease-in-out infinite alternate;
}

@keyframes flow {
	to {
		transform: translateX(200px);
	}
}

@keyframes glimmer {
	from {
		opacity: 0.25;
	}
}

@keyframes shimmer {
	to {
		opacity: 0.55;
		transform: scaleX(0.85);
	}
}

@keyframes stride {
	from {
		transform: rotate(24deg);
	}
	to {
		transform: rotate(-24deg);
	}
}

@keyframes sprint {
	from {
		transform: rotate(38deg);
	}
	to {
		transform: rotate(-38deg);
	}
}

@keyframes bounce {
	to {
		transform: translateY(-1.5px);
	}
}

@keyframes graze {
	from {
		transform: rotate(-4deg);
	}
	to {
		transform: rotate(5deg);
	}
}

@keyframes swish {
	from {
		transform: rotate(-10deg);
	}
	to {
		transform: rotate(12deg);
	}
}

@keyframes roam {
	0%,
	30% {
		transform: none;
	}
	33% {
		transform: translate(8px, -9px);
	}
	36%,
	48% {
		transform: translate(16px, 0);
	}
	51% {
		transform: translate(24px, -9px);
	}
	54% {
		transform: translate(32px, 0);
	}
	69.9% {
		transform: translate(32px, 0);
	}
	70% {
		transform: translate(32px, 0) scaleX(-1);
	}
	73% {
		transform: translate(24px, -9px) scaleX(-1);
	}
	76%,
	85% {
		transform: translate(16px, 0) scaleX(-1);
	}
	88% {
		transform: translate(8px, -9px) scaleX(-1);
	}
	91%,
	99.9% {
		transform: scaleX(-1);
	}
	100% {
		transform: none;
	}
}

@keyframes nibble {
	0%,
	100% {
		transform: none;
	}
	50% {
		transform: rotate(10deg);
	}
}

@keyframes drink {
	0%,
	100% {
		transform: rotate(-22deg);
	}
	12%,
	86% {
		transform: none;
	}
}

@keyframes flick {
	0%,
	88%,
	96%,
	100% {
		transform: none;
	}
	92% {
		transform: rotate(-20deg);
	}
}

@keyframes sip {
	0%,
	15% {
		opacity: 0;
		transform: scale(0.3);
	}
	18% {
		opacity: 0.8;
	}
	42%,
	100% {
		opacity: 0;
		transform: scale(1.8);
	}
}

@keyframes chop {
	to {
		transform: translateY(-4px);
	}
}

@keyframes sway {
	from {
		transform: rotate(-2deg);
	}
	to {
		transform: rotate(2deg);
	}
}

@keyframes roll {
	to {
		transform: translateY(56px);
	}
}

@keyframes shovel {
	from {
		transform: rotate(-14deg);
	}
	to {
		transform: rotate(6deg);
	}
}

@keyframes flag {
	from {
		transform: rotate(-18deg);
	}
	to {
		transform: rotate(14deg);
	}
}

@keyframes drive-left {
	from {
		transform: translateX(2600px);
	}
	to {
		transform: translateX(-1800px);
	}
}

@keyframes churn {
	to {
		transform: translateX(-16px);
	}
}

@keyframes dig {
	from {
		transform: rotate(-10deg);
	}
	to {
		transform: rotate(8deg);
	}
}

@keyframes sky {
	to {
		background-position: 100% 0;
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes build {
	0%,
	5% {
		opacity: 0;
		transform: translateY(-24px) scale(0.9);
	}
	15%,
	85% {
		opacity: 1;
		transform: none;
	}
	95%,
	100% {
		opacity: 0;
		transform: none;
	}
}

@keyframes trolley {
	0%,
	10% {
		transform: none;
	}
	35%,
	65% {
		transform: translateX(-150px);
	}
	90%,
	100% {
		transform: none;
	}
}

@keyframes cable {
	0%,
	35% {
		transform: none;
	}
	45%,
	55% {
		transform: scaleY(1.7);
	}
	65%,
	100% {
		transform: none;
	}
}

@keyframes load {
	0%,
	35% {
		transform: none;
	}
	45%,
	55% {
		transform: translateY(14px);
	}
	65%,
	100% {
		transform: none;
	}
}

@keyframes spark {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(var(--x), var(--y)) scale(0.3);
	}
}

@keyframes drift {
	from {
		transform: translateX(-1800px);
	}
	to {
		transform: translateX(2600px);
	}
}

@keyframes blink {
	to {
		opacity: 0.2;
	}
}

@keyframes flicker {
	to {
		opacity: 0.15;
	}
}

@keyframes bob {
	to {
		transform: translate(12px, -14px);
	}
}

@keyframes hammer {
	0%,
	100% {
		transform: rotate(-40deg);
	}
	35% {
		transform: rotate(-50deg);
	}
	55% {
		transform: rotate(8deg);
	}
}

@keyframes cursor {
	0%,
	100% {
		transform: translate(470px, 220px);
	}
	20% {
		transform: translate(300px, 330px);
	}
	24% {
		transform: translate(300px, 330px) scale(0.8);
	}
	28%,
	45% {
		transform: translate(300px, 330px);
	}
	65% {
		transform: translate(490px, 330px);
	}
	69% {
		transform: translate(490px, 330px) scale(0.8);
	}
	73%,
	85% {
		transform: translate(490px, 330px);
	}
}

@keyframes puff {
	0%,
	44% {
		opacity: 0;
		transform: scale(0.3);
	}
	47% {
		opacity: 0.9;
	}
	58%,
	100% {
		opacity: 0;
		transform: translate(var(--x), -10px) scale(1.4);
	}
}

@keyframes flap {
	to {
		transform: scaleY(-0.6);
	}
}

@keyframes twinkle {
	0%,
	100% {
		opacity: 0.2;
		transform: scale(0.5) rotate(0deg);
	}
	50% {
		opacity: 1;
		transform: scale(1) rotate(45deg);
	}
}

@media (max-aspect-ratio: 3/4) {
	body {
		align-items: center;
		background: var(--ground);
	}

	body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 0;
		background:
			linear-gradient(to bottom, transparent 0%, transparent 65%, var(--ground) 92%) 0 0/100% 100%,
			linear-gradient(to right, var(--sky-a) 0%, var(--sky-b) 51%, var(--sky-a) 100%) 0 0/200% 100%;
		animation: sky 16s ease-in-out infinite alternate;
	}

	.stage {
		position: relative;
		z-index: 1;
		flex-shrink: 0;
		width: 100%;
		padding-top: 34px;
	}

	.sky-orb {
		transform: translate(0, -360px);
	}

	.sky-balloon1 {
		transform: translate(-62px, -166px);
	}

	.sky-balloon {
		transform: translate(-292px, 66px);
	}

	.sky-plane {
		transform: translate(0, -52px);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
	}
}