.fly-cat {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 45;
	width: clamp(7rem, 18vw, 14rem);
	pointer-events: none;
	opacity: 0;
	will-change: transform, opacity;
	transform-origin: center center;
}

.fly-cat.is-active {
	opacity: 1;
}

.fly-cat img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 24px rgba(4, 2, 2, 0.25));
}

/* Join section: flies L→R above bg, behind title / socials */
.join__fly {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.join .join__container {
	z-index: 3;
}

.join__fly-body {
	position: absolute;
	width: clamp(5.5rem, 13vw, 10.5rem);
	will-change: top, left, transform;
	animation: join-fly-path 22s linear infinite;
	animation-play-state: paused;
}

.join__fly-body img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 8px 18px rgba(4, 2, 2, 0.22));
	transform-origin: center center;
	animation:
		join-fly-wobble 0.85s ease-in-out infinite,
		join-fly-grow 22s ease-in-out infinite;
	animation-play-state: paused;
}

.join__fly-spark {
	position: absolute;
	z-index: 1;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: #fff8c8;
	box-shadow:
		0 0 6px 2px rgba(255, 235, 120, 0.9),
		0 0 14px 4px rgba(255, 200, 50, 0.45);
	animation: join-spark-blink 0.7s ease-in-out infinite;
	animation-play-state: paused;
}

.join__fly-spark--1 {
	right: 105%;
	top: 95%;
	animation-delay: 0s;
}

.join__fly-spark--2 {
	right: 145%;
	top: 118%;
	width: 0.35rem;
	height: 0.35rem;
	animation-delay: 0.18s;
}

.join__fly-spark--3 {
	right: 185%;
	top: 108%;
	width: 0.28rem;
	height: 0.28rem;
	animation-delay: 0.36s;
}

.join__fly-spark--4 {
	right: 225%;
	top: 130%;
	width: 0.22rem;
	height: 0.22rem;
	animation-delay: 0.52s;
}

.join__fly.is-running .join__fly-body,
.join__fly.is-running .join__fly-body img,
.join__fly.is-running .join__fly-spark {
	animation-play-state: running;
}

/* Ping-pong: out → flip → back → flip, varying heights */
@keyframes join-fly-path {
	0% {
		top: 90%;
		left: -20%;
		transform: translateY(-50%) scaleX(1) rotate(-16deg);
	}
	22% {
		top: -6%;
		left: 110%;
		transform: translateY(-50%) scaleX(1) rotate(8deg);
	}
	23% {
		top: 10%;
		left: 110%;
		transform: translateY(-50%) scaleX(-1) rotate(-8deg);
	}
	45% {
		top: 78%;
		left: -22%;
		transform: translateY(-50%) scaleX(-1) rotate(12deg);
	}
	46% {
		top: 62%;
		left: -22%;
		transform: translateY(-50%) scaleX(1) rotate(-10deg);
	}
	68% {
		top: 22%;
		left: 110%;
		transform: translateY(-50%) scaleX(1) rotate(6deg);
	}
	69% {
		top: 38%;
		left: 110%;
		transform: translateY(-50%) scaleX(-1) rotate(-6deg);
	}
	98% {
		top: 90%;
		left: -20%;
		transform: translateY(-50%) scaleX(-1) rotate(10deg);
	}
	100% {
		top: 90%;
		left: -20%;
		transform: translateY(-50%) scaleX(1) rotate(-16deg);
	}
}

@keyframes join-fly-grow {
	0%,
	100% {
		scale: 0.85;
	}
	12%,
	58% {
		scale: 1.2;
	}
	34%,
	80% {
		scale: 1;
	}
}

@keyframes join-fly-wobble {
	0% {
		transform: translate(0, 0) rotate(-3deg);
	}
	25% {
		transform: translate(2%, -3%) rotate(2.5deg);
	}
	50% {
		transform: translate(-1.5%, 2%) rotate(-2deg);
	}
	75% {
		transform: translate(1.5%, -1.5%) rotate(3deg);
	}
	100% {
		transform: translate(0, 0) rotate(-3deg);
	}
}

@keyframes join-spark-blink {
	0%,
	100% {
		opacity: 0.15;
		transform: scale(0.6);
	}
	40% {
		opacity: 1;
		transform: scale(1.25);
	}
	70% {
		opacity: 0.45;
		transform: scale(0.9);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fly-cat {
		display: none;
	}

	.join__fly {
		display: none;
	}
}