.bee-loader {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #F8F3E5;
	background-image: radial-gradient(ellipse at 50% 23%, rgb(255 255 255 / 58%) 0, transparent 42%), radial-gradient(ellipse at 50% 100%, rgb(161 119 66 / 12%) 0, transparent 46%);
	color: #24462e;
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease, visibility .5s ease;
}

.bee-loader-active .bee-loader { display: flex; }
.bee-loader--leaving { opacity: 0; visibility: hidden; }

.bee-loader__scene {
	position: relative;
	width: min(94vw, 1000px, calc(92vh * .710526));
	aspect-ratio: 540 / 760;
	isolation: isolate;
	flex: 0 0 auto;
}

.bee-loader__brand {
	position: absolute;
	z-index: 3;
	top: 3%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78%;
	height: 25%;
	transform: translateX(-50%);
}

.bee-loader__logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 5px 9px rgb(68 58 32 / 11%));
}

.bee-loader__site-name {
	color: #164b2d;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(24px, 5vw, 45px);
	font-weight: 700;
	line-height: 1.12;
	text-align: center;
	text-shadow: 0 2px 8px rgb(68 58 32 / 12%);
}

.bee-loader__landscape {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.bee-loader__stem {
	fill: none;
	stroke: #367e36;
	stroke-width: 9;
	stroke-linecap: round;
}

.bee-loader__leaf {
	fill: url(#bee-loader-leaf);
	stroke: #367335;
	stroke-width: 3;
}

.bee-loader__soil-back { fill: url(#bee-loader-soil); }
.bee-loader__soil-front { fill: #75401e; }
.bee-loader__soil-clods ellipse { fill: #824722; stroke: #643819; stroke-width: 2; }
.bee-loader__pebbles circle { fill: #a56a39; }

.bee-loader__bee {
	position: absolute;
	z-index: 4;
	left: calc(50% - 28px);
	width: clamp(42px, 8vw, 66px);
	height: auto;
	filter: drop-shadow(0 3px 3px rgb(36 40 26 / 19%));
	will-change: transform;
}

.bee-loader__bee--1 { top: 36%; animation: bee-loader-flight-one 3.1s ease-in-out infinite; }
.bee-loader__bee--2 { top: 40%; animation: bee-loader-flight-two 3.7s ease-in-out infinite; }
.bee-loader__bee--3 { top: 35%; animation: bee-loader-flight-three 3.4s ease-in-out infinite; }

.bee-loader__wing {
	fill: #fff;
	fill-opacity: .88;
	stroke: #9ebca3;
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	animation: bee-loader-wingbeat .13s ease-in-out infinite alternate;
}
.bee-loader__wing--front { animation-delay: .06s; }
.bee-loader__body { fill: #f2b834; stroke: #85551e; stroke-width: 1.5; }
.bee-loader__stripes { fill: none; stroke: #292a20; stroke-width: 5; stroke-linecap: round; }
.bee-loader__shine { fill: none; stroke: #fff0b4; stroke-width: 2; stroke-linecap: round; }
.bee-loader__head { fill: #292a20; }
.bee-loader__eye { fill: #fff; }
.bee-loader__antennae,
.bee-loader__legs,
.bee-loader__proboscis { fill: none; stroke: #292a20; stroke-width: 1.8; stroke-linecap: round; }

.bee-loader__worm {
	position: absolute;
	z-index: 3;
	bottom: 16%;
	width: 9%;
	height: 10%;
	overflow: hidden;
	clip-path: inset(0 0 28% 0);
	transform-origin: 50% 100%;
}
.bee-loader__worm--one { left: 39%; animation: bee-loader-worm-rise 2.9s ease-in-out infinite; }
.bee-loader__worm--two { left: 54%; animation: bee-loader-worm-rise 3.3s ease-in-out -.8s infinite; }
.bee-loader__worm svg { width: 100%; height: 100%; overflow: visible; }
.bee-loader__worm-body { fill: none; stroke: #e87482; stroke-width: 23; stroke-linecap: round; stroke-linejoin: round; }
.bee-loader__worm-segments { fill: none; stroke: #f39ba1; stroke-width: 4; stroke-linecap: round; }
.bee-loader__worm-head { fill: #f5838b; stroke: #d95e6e; stroke-width: 2; }
.bee-loader__worm-eye { fill: #fff; stroke: #6f3535; stroke-width: 1.5; }
.bee-loader__worm-pupil { fill: #302724; }
.bee-loader__worm-smile { fill: none; stroke: #8c3e45; stroke-width: 2; stroke-linecap: round; }

.bee-loader__caption {
	position: absolute;
	z-index: 5;
	right: 3%;
	bottom: 1%;
	left: 3%;
	padding: 12px 8px;
	border-radius: 48% 44% 42% 46%;
	background: rgb(220 233 194 / 76%);
	color: #3b702e;
	font-family: inherit;
	font-size: clamp(12px, 2.6vw, 20px);
	font-weight: 700;
	letter-spacing: .025em;
	text-align: center;
	text-shadow: 0 1px #f8f3e5;
}

@keyframes bee-loader-flight-one {
	0% { transform: translate(-100px, 20px) rotate(-12deg); }
	20% { transform: translate(-155px, -4px) rotate(12deg); }
	40% { transform: translate(-98px, -30px) rotate(-8deg); }
	60% { transform: translate(-42px, 7px) rotate(14deg); }
	80% { transform: translate(-124px, 32px) rotate(-13deg); }
	100% { transform: translate(-100px, 20px) rotate(-12deg); }
}
@keyframes bee-loader-flight-two {
	0% { transform: translate(24px, 7px) rotate(12deg); }
	20% { transform: translate(90px, -22px) rotate(-12deg); }
	40% { transform: translate(155px, 0) rotate(15deg); }
	60% { transform: translate(88px, 28px) rotate(-10deg); }
	80% { transform: translate(30px, -12px) rotate(13deg); }
	100% { transform: translate(24px, 7px) rotate(12deg); }
}
@keyframes bee-loader-flight-three {
	0% { transform: translate(104px, 28px) rotate(-9deg); }
	20% { transform: translate(164px, -4px) rotate(13deg); }
	40% { transform: translate(116px, -30px) rotate(-14deg); }
	60% { transform: translate(44px, 7px) rotate(10deg); }
	80% { transform: translate(136px, 39px) rotate(-12deg); }
	100% { transform: translate(104px, 28px) rotate(-9deg); }
}
@keyframes bee-loader-wingbeat { from { transform: scaleY(.45) rotate(-8deg); } to { transform: scaleY(1.08) rotate(8deg); } }
@keyframes bee-loader-worm-rise {
	0%, 8% { transform: translateY(70%) rotate(0deg); }
	34% { transform: translateY(22%) rotate(-3deg); }
	48% { transform: translateY(15%) rotate(2deg); }
	62% { transform: translateY(22%) rotate(-2deg); }
	76% { transform: translateY(15%) rotate(1deg); }
	100% { transform: translateY(70%) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.bee-loader,
	.bee-loader__bee,
	.bee-loader__wing,
	.bee-loader__worm { transition: none; animation: none; }
	.bee-loader__bee--1 { transform: translate(-100px, 20px); }
	.bee-loader__bee--2 { transform: translate(24px, 7px); }
	.bee-loader__bee--3 { transform: translate(104px, 28px); }
	.bee-loader__worm { transform: translateY(0); }
}
