#he-effects-layer {
	position: fixed;
	inset: 0;
	z-index: 20;
	overflow: hidden;
	pointer-events: none;
	contain: layout style;
}

#he-effects-layer .he-bat,
#he-effects-layer .he-leaf,
#he-effects-layer .he-pumpkin,
#he-effects-layer .he-web,
#he-effects-layer .he-fog {
	position: absolute;
	display: block;
	line-height: 1;
}

#he-effects-layer .he-bat {
	top: var(--he-origin-y, 96px);
	left: var(--he-origin-x, 50%);
	width: var(--he-size, 48px);
	height: calc(var(--he-size, 48px) * .67);
	color: #17141a;
	opacity: 0;
	filter: drop-shadow(0 3px 3px rgba(0,0,0,.24));
	offset-path: var(--he-path);
	offset-anchor: 50% 50%;
	offset-rotate: auto 90deg;
	animation: he-bat-flight var(--he-duration, .6s) cubic-bezier(.1,.88,.2,1) var(--he-delay, 0s) forwards;
}

#he-effects-layer .he-bat svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
#he-effects-layer .he-bat-wing { transform-box: fill-box; }
#he-effects-layer .he-bat-wing-left { transform-origin: 100% 72%; animation: he-wing-flap .075s ease-in-out infinite alternate; }
#he-effects-layer .he-bat-wing-right { transform-origin: 0 72%; animation: he-wing-flap .075s ease-in-out infinite alternate-reverse; }
#he-effects-layer .he-bat-ribs { fill: none; stroke: rgba(0,0,0,.48); stroke-width: .55; stroke-linecap: round; }

@keyframes he-bat-flight {
	0% { opacity: 0; offset-distance: 0%; transform: scale(var(--he-scale-start, .5)); }
	12% { opacity: 1; }
	68% { opacity: 1; transform: scale(var(--he-scale-middle, 1)); }
	100% { opacity: 0; offset-distance: 100%; transform: scale(var(--he-scale-end, .74)); }
}

@keyframes he-wing-flap {
	from { transform: scaleY(.28) rotate(-4deg); }
	to { transform: scaleY(1) rotate(3deg); }
}

@supports not (offset-path: path("M 0 0 L 1 1")) {
	#he-effects-layer .he-bat { animation-name: he-bat-flight-fallback; }
	@keyframes he-bat-flight-fallback {
		0% { opacity: 0; transform: translate(0,0) scale(var(--he-scale-start, .5)) rotate(var(--he-angle, 90deg)); }
		12% { opacity: 1; }
		68% { opacity: 1; }
		100% { opacity: 0; transform: translate(var(--he-end-x, 0),var(--he-end-y, 140px)) scale(var(--he-scale-end, .74)) rotate(var(--he-angle, 90deg)); }
	}
}

#he-effects-layer .he-pumpkin {
	bottom: 12px;
	left: var(--he-left);
	width: clamp(30px, 5vw, 48px);
	height: auto;
	filter: drop-shadow(0 0 8px rgba(245, 91, 14, .46));
	transform-origin: 50% 80%;
	animation: he-pumpkin-dance 1.25s ease-in-out var(--he-delay) infinite alternate;
}
#he-effects-layer .he-pumpkin svg { display: block; width: 100%; height: auto; }
#he-effects-layer .he-pumpkin-body { fill: #e85b13; stroke: #7e250d; stroke-width: 1.5; }
#he-effects-layer .he-pumpkin-rib { fill: none; stroke: #a93b0d; stroke-width: 1.4; opacity: .8; }
#he-effects-layer .he-pumpkin-face { fill: #321614; }
#he-effects-layer .he-pumpkin-stem { fill: #493b20; }

@keyframes he-pumpkin-dance {
	from { transform: translateY(2px) rotate(-9deg); }
	to { transform: translateY(-9px) rotate(9deg); }
}

#he-effects-layer .he-web {
	top: -3px;
	width: clamp(54px, 10vw, 94px);
	height: clamp(54px, 10vw, 94px);
	color: rgba(55, 40, 48, .55);
}
#he-effects-layer .he-web-left { left: -3px; }
#he-effects-layer .he-web-right { right: -3px; transform: scaleX(-1); }
#he-effects-layer .he-web svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
#he-effects-layer .he-web-spider { position: absolute; top: 48px; left: 52px; width: 24px; height: 34px; animation: he-spider-swing 2.3s ease-in-out infinite alternate; transform-origin: top center; }
#he-effects-layer .he-web-spider svg { width: 100%; height: 100%; fill: #17141a; stroke: #17141a; stroke-width: 2; overflow: visible; }

@keyframes he-spider-swing {
	from { transform: translateY(0) rotate(-10deg); }
	to { transform: translateY(12px) rotate(10deg); }
}

#he-effects-layer .he-leaf {
	top: -40px;
	left: var(--he-left);
	font-size: 22px;
	opacity: 0;
	animation: he-leaf-fall var(--he-duration) linear var(--he-delay) infinite;
}

@keyframes he-leaf-fall {
	0% { opacity: 0; transform: translate3d(0,-10px,0) rotate(0); }
	10% { opacity: .9; }
	90% { opacity: .9; }
	100% { opacity: 0; transform: translate3d(var(--he-drift),110vh,0) rotate(480deg); }
}

#he-effects-layer .he-fog {
	left: -15%;
	width: 130%;
	bottom: -12vh;
	height: 34vh;
	border-radius: 50%;
	background: radial-gradient(ellipse at 20% 60%, rgba(101,103,113,.22), transparent 54%), radial-gradient(ellipse at 68% 52%, rgba(126,121,131,.2), transparent 58%);
	filter: blur(18px);
	opacity: .7;
	animation: he-fog-drift 19s ease-in-out infinite alternate;
}
#he-effects-layer .he-fog-two { bottom: -18vh; opacity: .45; animation-duration: 27s; animation-direction: alternate-reverse; }

@keyframes he-fog-drift {
	from { transform: translate3d(-4%,0,0) scale(1); }
	to { transform: translate3d(4%,-3vh,0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	#he-effects-layer { display: none !important; }
}