#halloween-logo-bats-layer {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
	z-index: 2147483646;
	contain: layout style;
}

.halloween-logo-bats-bat {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	will-change: transform, opacity;
	opacity: 0;
	transform-origin: center;
}

.halloween-logo-bats-bat svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.halloween-logo-bats-wing-left,
.halloween-logo-bats-wing-right {
	transform-box: fill-box;
	will-change: transform;
}

.halloween-logo-bats-wing-left {
	transform-origin: right center;
	animation: halloween-logo-bats-left var(--halloween-logo-bats-flap, 0.14s) ease-in-out infinite alternate;
}

.halloween-logo-bats-wing-right {
	transform-origin: left center;
	animation: halloween-logo-bats-right var(--halloween-logo-bats-flap, 0.14s) ease-in-out infinite alternate;
}

@keyframes halloween-logo-bats-left {
	from { transform: rotate(-38deg) scaleY(0.56); }
	to { transform: rotate(23deg) scaleY(1.14); }
}

@keyframes halloween-logo-bats-right {
	from { transform: rotate(38deg) scaleY(0.56); }
	to { transform: rotate(-23deg) scaleY(1.14); }
}

/* ---------- Floating corner icon ---------- */

.halloween-logo-bats-float {
	position: fixed;
	bottom: 22px;
	width: var(--halloween-logo-bats-size, 72px);
	height: var(--halloween-logo-bats-size, 72px);
	z-index: 2147483645;
	pointer-events: none;
	isolation: isolate;
}

.halloween-logo-bats-float--left {
	left: 22px;
}

.halloween-logo-bats-float--right {
	right: 22px;
}

.halloween-logo-bats-aura {
	position: absolute;
	inset: -38%;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255, 110, 0, 0.5) 0%, rgba(150, 20, 70, 0.25) 42%, rgba(20, 0, 30, 0) 70%);
	filter: blur(3px);
	animation: halloween-logo-bats-aura 3.4s ease-in-out infinite;
}

.halloween-logo-bats-float-btn {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	animation: halloween-logo-bats-bob 4.2s ease-in-out infinite;
}

.halloween-logo-bats-float-btn:focus {
	outline: none;
}

.halloween-logo-bats-float-btn:focus-visible {
	outline: 3px solid #ff8a1f;
	outline-offset: 4px;
}

.halloween-logo-bats-float-btn svg,
.halloween-logo-bats-float-btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 6px rgba(255, 130, 0, 0.85)) drop-shadow(0 0 18px rgba(255, 60, 0, 0.5));
	transition: transform 0.25s ease;
	animation: halloween-logo-bats-flicker 2.9s linear infinite;
}

.halloween-logo-bats-float-btn:hover svg,
.halloween-logo-bats-float-btn:hover img {
	transform: scale(1.08) rotate(-4deg);
}

.halloween-logo-bats-float-btn.is-erupting {
	animation: halloween-logo-bats-erupt 0.65s ease-out;
}

.halloween-logo-bats-face {
	animation: halloween-logo-bats-face 2.3s linear infinite;
}

.halloween-logo-bats-ambient {
	opacity: 0.92;
	top: 0;
	left: 0;
}

@keyframes halloween-logo-bats-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes halloween-logo-bats-flicker {
	0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 130, 0, 0.85)) drop-shadow(0 0 18px rgba(255, 60, 0, 0.5)); }
	18% { filter: drop-shadow(0 0 4px rgba(255, 130, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 60, 0, 0.3)); }
	20% { filter: drop-shadow(0 0 8px rgba(255, 150, 0, 0.95)) drop-shadow(0 0 22px rgba(255, 60, 0, 0.6)); }
	47% { filter: drop-shadow(0 0 5px rgba(255, 130, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 60, 0, 0.4)); }
	49% { filter: drop-shadow(0 0 2px rgba(255, 130, 0, 0.4)) drop-shadow(0 0 6px rgba(255, 60, 0, 0.2)); }
	52% { filter: drop-shadow(0 0 9px rgba(255, 160, 0, 1)) drop-shadow(0 0 26px rgba(255, 60, 0, 0.65)); }
	78% { filter: drop-shadow(0 0 6px rgba(255, 130, 0, 0.8)) drop-shadow(0 0 16px rgba(255, 60, 0, 0.45)); }
}

@keyframes halloween-logo-bats-face {
	0%, 100% { opacity: 1; }
	8% { opacity: 0.72; }
	10% { opacity: 1; }
	47% { opacity: 0.86; }
	49% { opacity: 0.55; }
	52% { opacity: 1; }
	80% { opacity: 0.9; }
}

@keyframes halloween-logo-bats-aura {
	0%, 100% { transform: scale(0.92); opacity: 0.7; }
	50% { transform: scale(1.08); opacity: 1; }
}

@keyframes halloween-logo-bats-erupt {
	0% { transform: scale(1) rotate(0deg); }
	18% { transform: scale(1.2) rotate(-9deg); }
	38% { transform: scale(0.9) rotate(7deg); }
	58% { transform: scale(1.1) rotate(-5deg); }
	78% { transform: scale(0.97) rotate(2deg); }
	100% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 600px) {
	.halloween-logo-bats-float {
		bottom: 14px;
		width: calc(var(--halloween-logo-bats-size, 72px) * 0.8);
		height: calc(var(--halloween-logo-bats-size, 72px) * 0.8);
	}

	.halloween-logo-bats-float--left {
		left: 14px;
	}

	.halloween-logo-bats-float--right {
		right: 14px;
	}
}

@media print {
	.halloween-logo-bats-float {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.halloween-logo-bats-float-btn,
	.halloween-logo-bats-float-btn svg,
	.halloween-logo-bats-float-btn img,
	.halloween-logo-bats-face,
	.halloween-logo-bats-aura {
		animation: none !important;
	}

	.halloween-logo-bats-wing-left,
	.halloween-logo-bats-wing-right {
		animation: none !important;
	}
}