/**
 * BMRPH ambient butterfly field — large drifting Blue Morpho butterflies as the page
 * background. Uses the real logo butterfly (single vector path), no wing-flap — just a
 * slow float/drift. Pure CSS/SVG (no Lottie/runtime lib); honors prefers-reduced-motion.
 * Front-page only; sits BEHIND content (front-page Elementor sections made transparent).
 *
 * Two-layer transform split so drift + cursor-flee never fight: the outer .bmrph-bfly
 * runs the CSS "wander" drift; the inner .bmrph-bfly-inner gets the JS cursor-flee
 * translate (see bmrph-butterflies.js).
 */

.bmrph-butterfly-field {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.bmrph-bfly {
	position: absolute;
	will-change: transform;
	animation: bmrph-wander var(--dur, 22s) ease-in-out infinite;
}

/* Inner layer: carries the cursor-flee offset (JS-driven), sized to the outer. */
.bmrph-bfly-inner {
	width: 100%;
	height: 100%;
	will-change: transform;
}

.bmrph-bfly svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	filter: drop-shadow(0 0 7px rgba(0, 167, 157, 0.28));
}

/* Slow float/drift with a gentle tilt — no flapping. */
@keyframes bmrph-wander {
	0%   { transform: translate(0, 0) rotate(-8deg); }
	25%  { transform: translate(5vw, -4vh) rotate(7deg); }
	50%  { transform: translate(-4vw, 3vh) rotate(-6deg); }
	75%  { transform: translate(3vw, 4vh) rotate(8deg); }
	100% { transform: translate(0, 0) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
	.bmrph-bfly {
		animation: none !important;
	}
}

/* Front-page layering: butterflies behind, content above, dark sections transparent
   so the field shows through. The studio and products sections keep their own backgrounds. */
body.home {
	background-color: #000 !important;
}

body.home .site-header,
body.home .site-footer,
body.home .ehf-header,
body.home .ehf-footer,
body.home .site-main,
body.home main#content,
body.home .elementor {
	position: relative;
	z-index: 1;
}

body.home .elementor-section:not(#studio):not(#products) {
	background-color: transparent !important;
}