.hw-root {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	overflow: hidden;
}

.hw-web {
	position: absolute;
	top: 0;
	width: min(220px, 28vw);
	height: min(280px, 36vh);
	opacity: 0.72;
	background:
		radial-gradient(circle at 0 0, transparent 18%, rgba(220, 220, 230, 0.15) 19%, transparent 20%),
		repeating-conic-gradient(from 0deg at 0 0, transparent 0 8deg, rgba(230, 230, 240, 0.55) 8deg 9deg);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
}

.hw-web.left { left: 0; transform-origin: top left; }
.hw-web.right { right: 0; transform: scaleX(-1); transform-origin: top right; }
.hw-web.low-left { left: 0; bottom: 0; top: auto; transform: scaleY(-1); transform-origin: bottom left; }
.hw-web.low-right { right: 0; bottom: 0; top: auto; transform: scale(-1); transform-origin: bottom right; }

.hw-spider, .hw-pumpkin, .hw-bat {
	position: absolute;
	display: block;
}

.hw-spider { width: 42px; height: 42px; }
.hw-pumpkin { width: 54px; height: 48px; bottom: 8px; }
.hw-bat { width: 36px; height: 22px; opacity: 0.85; }

.hw-spider.s1 { left: 8px; top: 70px; animation: hw-crawl-l 9s ease-in-out infinite; }
.hw-spider.s2 { right: 18px; top: 120px; animation: hw-crawl-r 11s ease-in-out infinite; }
.hw-spider.s3 { left: 36px; bottom: 90px; animation: hw-dangle 4.5s ease-in-out infinite; }
.hw-spider.s4 { right: 48px; top: 40px; animation: hw-dangle 5.2s ease-in-out infinite reverse; }

.hw-pumpkin.p1 { left: 18px; animation: hw-bob 3.2s ease-in-out infinite; }
.hw-pumpkin.p2 { right: 22px; animation: hw-bob 3.6s ease-in-out infinite 0.4s; }
.hw-pumpkin.p3 { left: 78px; bottom: 4px; width: 36px; height: 32px; animation: hw-bob 4s ease-in-out infinite 0.8s; }
.hw-pumpkin.p4 { right: 84px; bottom: 6px; width: 40px; height: 36px; animation: hw-bob 3.8s ease-in-out infinite 0.2s; }

.hw-bat.b1 { left: 18%; top: 18%; animation: hw-fly 14s linear infinite; }
.hw-bat.b2 { right: 22%; top: 28%; animation: hw-fly 18s linear infinite reverse; }

@keyframes hw-crawl-l {
	0%, 100% { transform: translate(0, 0) rotate(12deg); }
	50% { transform: translate(28px, 90px) rotate(-8deg); }
}
@keyframes hw-crawl-r {
	0%, 100% { transform: translate(0, 0) rotate(-10deg); }
	50% { transform: translate(-24px, 110px) rotate(14deg); }
}
@keyframes hw-dangle {
	0%, 100% { transform: translateY(0) rotate(-6deg); }
	50% { transform: translateY(16px) rotate(8deg); }
}
@keyframes hw-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes hw-fly {
	0% { transform: translate(0, 0) scaleX(1); }
	25% { transform: translate(40px, 18px) scaleX(1); }
	50% { transform: translate(10px, 40px) scaleX(-1); }
	75% { transform: translate(-30px, 12px) scaleX(-1); }
	100% { transform: translate(0, 0) scaleX(1); }
}

@media (max-width: 700px) {
	.hw-web { width: 120px; height: 160px; opacity: 0.55; }
	.hw-pumpkin.p3, .hw-pumpkin.p4, .hw-bat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-spider, .hw-pumpkin, .hw-bat { animation: none !important; }
}