/* Jackpotz Halloween v1.1: one fixed overlay, nothing clickable, nothing tied to page scroll. */

#jpz-hw {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* Large-viewport height: the mobile address bar showing/hiding never resizes the layer. */
	height: 100vh;
	height: 100lvh;
	z-index: 9990;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
	-webkit-user-select: none;
	user-select: none;
	transform: translateZ(0);
}
#jpz-hw * { pointer-events: none !important; }

#jpz-hw canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Corner cobweb with a little spider */
.jpz-hw-web {
	position: absolute;
	top: 0;
	width: clamp(54px, 7vw, 110px);
	height: auto;
	opacity: .55;
	color: #e9e3f2;
}
.jpz-hw-web.is-left { left: 0; }
.jpz-hw-web.is-right { right: 0; transform: scaleX(-1); }
.jpz-hw-web.is-bottom-left { top: auto; bottom: 0; left: 0; transform: scaleY(-1); }
.jpz-hw-web.is-bottom-left .jpz-hw-spider { display: none; }
.jpz-hw-web svg { display: block; width: 100%; height: auto; overflow: visible; }
.jpz-hw-spider { animation: jpz-hw-dangle 5s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 60px 0; }
@keyframes jpz-hw-dangle {
	from { transform: translateY(0) rotate(-3deg); }
	to   { transform: translateY(14px) rotate(3deg); }
}

/* Spooky glow behind the Halloween logo: a soft orange and purple halo that
   follows the logo's shape and slowly breathes. Every page, while active. */
img[src*="/2026/10/69226"] {
	animation: jpz-hw-logo-glow 4.5s ease-in-out infinite;
	will-change: filter;
}
@keyframes jpz-hw-logo-glow {
	0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 123, 23, .35)) drop-shadow(0 0 9px rgba(138, 63, 209, .25)); }
	50%      { filter: drop-shadow(0 0 7px rgba(255, 123, 23, .6)) drop-shadow(0 0 18px rgba(138, 63, 209, .45)); }
}

/* Pumpkins resting along the bottom, clustered towards the right */
.jpz-hw-pumpkin {
	position: absolute;
	bottom: 4px;
	width: 40px;
	opacity: .6;
	animation: jpz-hw-rock 6.5s ease-in-out infinite alternate;
	transform-origin: 50% 100%;
}
.jpz-hw-pumpkin.is-b { right: 22%; width: 30px; animation-delay: -5s; }
.jpz-hw-pumpkin.is-c { right: 104px; width: 36px; animation-delay: -1s; }
.jpz-hw-pumpkin.is-d { right: 56px; width: 44px; animation-delay: -4s; }
.jpz-hw-pumpkin.is-e { right: 12px; width: 52px; animation-delay: -3s; }
.jpz-hw-pumpkin svg { display: block; width: 100%; height: auto; }
.jpz-hw-glow { animation: jpz-hw-flicker 2.4s ease-in-out infinite alternate; }
@keyframes jpz-hw-rock {
	from { transform: rotate(-4deg); }
	to   { transform: rotate(4deg); }
}
@keyframes jpz-hw-flicker {
	0%, 100% { opacity: 1; }
	45% { opacity: .6; }
}

@media (max-width: 767px) {
	.jpz-hw-web { width: 40px; opacity: .4; }
	.jpz-hw-pumpkin { bottom: 3px; opacity: .5; }
	.jpz-hw-pumpkin.is-b { display: none; }
	.jpz-hw-pumpkin.is-c { right: 66px; width: 24px; }
	.jpz-hw-pumpkin.is-d { right: 34px; width: 28px; }
	.jpz-hw-pumpkin.is-e { right: 4px; width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	#jpz-hw canvas, .jpz-hw-spider, .jpz-hw-pumpkin, .jpz-hw-glow, img[src*="/2026/10/69226"] { animation: none !important; }
}
@media print {
	#jpz-hw { display: none !important; }
}