/* конфетка на ниточке */
#candy {
	position: fixed;
	right: 40px;
	bottom: 60px;
	width: 96px;
	height: 70px;
	cursor: pointer;
	z-index: 5998;
	transition: transform .35s ease-out;
}

#candy.hide {
	display: none;
}

#candy .hang {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 96px;
	height: calc(200vh + 70px);
	transform-origin: 50% 0;
	animation: hw-sway 3.2s ease-in-out infinite;
	pointer-events: none;
}

#candy .thread {
	position: absolute;
	left: 47.3px;
	top: 0;
	bottom: 43px;
	width: 1.4px;
	background: rgba(70, 60, 60, .75);
}

body.dark #candy .thread {
	background: rgba(231, 231, 231, .5);
}

#candy .float {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 96px;
	transform-origin: 50% 22%;
	animation: hw-twist 2.4s ease-in-out infinite;
	filter: drop-shadow(0 0 8px rgba(255, 140, 0, .55));
}

#candy .float svg {
	display: block;
	width: 100%;
}

/* устала убегать — дрожит на месте */
#candy.tired .float {
	animation: hw-wob .12s infinite alternate;
}

@keyframes hw-sway {
	0%, 100% { transform: rotate(.6deg); }
	50% { transform: rotate(-.6deg); }
}

@keyframes hw-twist {
	0%, 100% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
}

@keyframes hw-wob {
	from { transform: rotate(-10deg); }
	to { transform: rotate(10deg); }
}

/* паук */
#spider {
	position: fixed;
	top: 0;
	left: 0;
	height: 120vh;
	pointer-events: none;
	z-index: 10000;
	display: none;
	filter: drop-shadow(0 30px 25px rgba(0, 0, 0, .45));
}

#spider.go {
	display: block;
	animation: hw-crawl .75s linear forwards;
}

@keyframes hw-crawl {
	from { transform: translate(var(--x0), var(--y0)) rotate(var(--rot)); }
	to { transform: translate(var(--x1), var(--y1)) rotate(var(--rot)); }
}

#spider .la,
#spider .lb {
	transform-box: view-box;
	transform-origin: 180px 150px;
	animation: hw-legs .05s infinite alternate;
}

#spider .lb {
	animation-direction: alternate-reverse;
}

@keyframes hw-legs {
	from { transform: rotate(-6deg); }
	to { transform: rotate(6deg); }
}

#spBody {
	transform-box: view-box;
	animation: hw-bob .05s infinite alternate;
}

@keyframes hw-bob {
	to { transform: translateY(3px); }
}

/* свечение глаз */
#spider .halo {
	animation: hw-glow .35s ease-in-out infinite alternate;
}

#spEyes {
	animation: hw-eyes .35s ease-in-out infinite alternate;
}

@keyframes hw-glow {
	from { opacity: .2; }
	to { opacity: .95; }
}

@keyframes hw-eyes {
	from { opacity: .75; }
	to { opacity: 1; }
}

/* тряска страницы */
body.shake > :not(#candy):not(#spider) {
	animation: hw-shake .1s infinite;
}

@keyframes hw-shake {
	0% { transform: translate(5px, -4px); }
	50% { transform: translate(-6px, 3px); }
	100% { transform: translate(4px, 5px); }
}

@media (prefers-reduced-motion: reduce) {
	body.shake > :not(#candy):not(#spider) {
		animation: none;
	}
}

@media (max-width: 640px) {
	#candy {
		right: 16px;
		bottom: 40px;
	}
}