/* MOSQUITO — "The Sting" stage: hero composition, ambient layer, entrance start states. */

.mq-hero {
	position: relative;
	z-index: 5;
	margin: 0;
	padding: 0;
}

.mq-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 4svh 0;
	box-sizing: border-box;
}

.mq-label--hero {
	z-index: 2;
	transform-origin: 50% 0;
	will-change: transform;
	box-shadow: 0 40px 120px -40px rgba(255, 211, 0, 0.18);
	transition: opacity 0.25s linear;
}

.mq-label--hero.is-docked {
	box-shadow: none;
}

.mq-label--hero.is-gone {
	pointer-events: none;
}

/* ---------- Logo layers: transform hooks (artwork itself is untouched) ---------- */

.mq-art .mq-l,
.mq-art .mq-q,
.mq-art .mq-pin,
.mq-art .mq-bar,
.mq-art .mq-wipe {
	transform-box: fill-box;
}

.mq-art .mq-bar-l,
.mq-art .mq-wipe-l {
	transform-origin: 100% 50%;
}

.mq-art .mq-bar-r,
.mq-art .mq-wipe-r {
	transform-origin: 0 50%;
}

.mq-art .mq-sweep {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

/* Drop: scaled from its top (where it hangs off the stinger)… */
.mq-art .mq-drop {
	transform-box: view-box;
	transform-origin: 961.5px 2407px;
}

/* …and swings like a pendulum around the stinger tip. */
.mq-art .mq-drop-swing {
	transform-box: view-box;
	transform-origin: 951px 2301px;
}

/* ---------- Ambient layer ---------- */

.mq-ambient {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	opacity: clamp(0, calc(1 - var(--mq-p, 0) * 1.9), 1);
}

.mq-axis {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	margin-left: -0.5px;
	background: linear-gradient(to bottom, rgba(255, 211, 0, 0) 0, rgba(255, 211, 0, 0.24) 22%, rgba(255, 211, 0, 0.24) 78%, rgba(255, 211, 0, 0) 100%);
	transform-origin: 50% 0;
}

.mq-orbit {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(150vh, 230vw);
	aspect-ratio: 1;
	margin: calc(min(150vh, 230vw) / -2) 0 0 calc(min(150vh, 230vw) / -2);
	border: 1px solid rgba(255, 211, 0, 0.075);
	border-radius: 50%;
	transform: translate3d(var(--mq-ox, 0px), var(--mq-oy, 0px), 0);
}

.mq-glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 130vh;
	aspect-ratio: 1;
	margin: -65vh 0 0 -65vh;
	background: radial-gradient(closest-side, rgba(255, 211, 0, 0.12), rgba(255, 211, 0, 0.035) 48%, rgba(255, 211, 0, 0) 72%);
	transform: translate3d(var(--mq-gx, 0px), var(--mq-gy, 0px), 0);
}

/* ---------- Dock (back to top) ---------- */

.mq-dock {
	position: fixed;
	z-index: 20;
	top: var(--mq-dock-top);
	left: 50%;
	width: calc(var(--mq-dock-h) * 0.5683 + 16px);
	height: calc(var(--mq-dock-h) + 16px);
	margin: -8px 0 0 calc((var(--mq-dock-h) * 0.5683 + 16px) / -2);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.mq-dock[hidden] {
	display: none;
}

/* ---------- Order transition: the falling drop ---------- */

.mq-drip {
	position: absolute;
	z-index: 30;
	margin: 0;
	pointer-events: none;
	transform-origin: 50% 100%;
	will-change: transform;
}

.mq-ripple {
	position: absolute;
	z-index: 29;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	border: 1px solid rgba(255, 211, 0, 0.85);
	border-radius: 50%;
	pointer-events: none;
}

/* ---------- Entrance start states (html.mq-intro is set before first paint) ---------- */

.mq-intro .mq-label--hero {
	clip-path: inset(0 calc(50% - 0.75px) 100% calc(50% - 0.75px));
	box-shadow: none;
}

.mq-intro .mq-art .mq-l,
.mq-intro .mq-art .mq-q,
.mq-intro .mq-art .mq-pin,
.mq-intro .mq-art .mq-drop {
	opacity: 0;
}

.mq-intro .mq-art .mq-bar,
.mq-intro .mq-art .mq-wipe {
	transform: scaleX(0);
}

.mq-intro .mq-art .mq-sweep {
	stroke-dashoffset: 1;
}

.mq-intro .mq-label--hero .mq-label__inner .wp-block-button {
	clip-path: inset(0 50% 0 50% round 999px);
}

.mq-intro .mq-axis {
	transform: scaleY(0);
}

.mq-intro .mq-orbit,
.mq-intro .mq-glow {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mq-label--hero {
		will-change: auto;
	}

	.mq-ambient {
		opacity: 1;
		position: absolute;
	}
}