/**
 * HighPony Halloween — layers, motion and the two CSS-only bits (cobwebs on
 * product cards and in the cart drawer). Nothing here applies unless the gate
 * in <head> set html.hp-hw; everything is pointer-events: none.
 */

html:not(.hp-hw) .hw-layer,
html:not(.hp-hw) .hw-defs { display: none !important; }

.hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* z-index 9000: over the page, under the cart drawer (999 991), the cookie
   banner (99 999), the chat button (99 990), the age gate and the preloader.
   NO overflow property on the zero-height layers: shipping Safari (iOS 18, macOS 26) applies `overflow-x: clip` to the Y axis too,
   which cut everything in a height-0 box away — corner webs, the top spider and the footer pumpkins were invisible on a real iPhone
   while every emulator (Chromium, Playwright's trunk WebKit) drew them. Their children stay inside the page width instead. */
.hw-top, .hw-doc, .hw-foot, .hw-bot {
	position: absolute; left: 0; top: 0; width: 100%; height: 0;
	z-index: 9000; pointer-events: none;
}
.hw-doc { overflow: hidden; }
.hw-fixed {
	position: fixed; left: 0; top: 0; width: 100%; height: 100%;
	z-index: 8999; pointer-events: none; overflow: hidden;
}

/* ------------------------------------------------------------- cobwebs */
.hw-web { position: absolute; top: 0; pointer-events: none; }
.hw-web-l { left: 0; }
.hw-web-r { right: 0; transform: scaleX(-1); }
.hw-web svg { display: block; }
.hw-web-halo { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: 3.2; stroke-linecap: round; }
.hw-web-line { fill: none; stroke: #2d1b4e; stroke-opacity: .85; stroke-width: 1.4; }

.hw-web-bl { left: 0; top: 0; transform: scaleY(-1); }
.hw-web-br { right: 0; top: 0; transform: scale(-1, -1); }
.hw-sweb { position: absolute; pointer-events: none; }
.hw-sweb svg { display: block; }
.hw-sweb-right { transform: scaleX(-1); }

/* -------------------------------------------------------------- spider */
.hw-spider-clip { position: absolute; width: 90px; height: 240px; overflow: hidden; pointer-events: none; }
.hw-swing { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.hw-spider { position: absolute; left: -26px; top: 0; width: 52px; will-change: transform; }
.hw-spider svg { display: block; width: 52px; height: auto; filter: drop-shadow(0 2px 3px rgba(20, 8, 40, .4)); }
.hw-thread {
	position: absolute; left: 50%; bottom: calc(100% - 16px); width: 2px; margin-left: -1px; height: 420px;
	background: #2a1a4a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .32);
}
.hw-legs { transform-box: view-box; transform-origin: 32px 38px; }
.hw-legs-l { animation: hw-legl 1.1s ease-in-out infinite alternate; }
.hw-legs-r { animation: hw-legr 1.1s ease-in-out infinite alternate; }
@keyframes hw-legl { from { transform: rotate(-5deg); } to { transform: rotate(3deg); } }
@keyframes hw-legr { from { transform: rotate(5deg); } to { transform: rotate(-3deg); } }

/* ------------------------------------------------------------ pumpkins */
.hw-pumpkin {
	position: absolute; bottom: -14px; width: var(--w);
	transform: rotate(var(--rot)); transform-origin: 50% 100%;
}
.hw-pumpkin svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.hw-pumpkin::before {
	content: ""; position: absolute; left: -30%; top: -26%; width: 160%; height: 150%;
	background: radial-gradient(closest-side, rgba(255, 176, 50, .5), rgba(255, 110, 10, .16) 55%, rgba(255, 110, 10, 0) 74%);
	animation: hw-flick var(--fd, 3.2s) linear infinite; animation-delay: var(--dl, 0s);
}
.hw-pumpkin::after {
	content: ""; position: absolute; left: 6%; right: 6%; bottom: -5px; height: 12px;
	background: radial-gradient(closest-side, rgba(20, 8, 40, .38), rgba(20, 8, 40, 0));
}
.hw-face { animation: hw-faceflick var(--fd, 3.2s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes hw-flick {
	0%, 100% { opacity: .82; } 7% { opacity: .5; } 12% { opacity: .95; } 27% { opacity: .68; }
	41% { opacity: 1; } 58% { opacity: .6; } 73% { opacity: .92; } 88% { opacity: .7; }
}
@keyframes hw-faceflick {
	0%, 100% { opacity: .92; } 7% { opacity: .74; } 12% { opacity: 1; } 27% { opacity: .82; }
	41% { opacity: 1; } 58% { opacity: .78; } 73% { opacity: .96; } 88% { opacity: .84; }
}
.hw-paused, .hw-paused::before, .hw-paused .hw-face, .hw-paused .hw-hthread, .hw-paused .hw-legs { animation-play-state: paused; }

/* pumpkins that float in from the screen edges down the page */
.hw-fp { bottom: auto; animation: hw-bob var(--bd, 5s) ease-in-out infinite alternate; }
@keyframes hw-bob { from { translate: 0 -7px; } to { translate: 0 9px; } }

/* small spiders on a thread: they swing, and slowly lower themselves */
.hw-hang {
	position: absolute; width: 26px; display: flex; flex-direction: column; align-items: center;
	transform-origin: 50% 0; animation: hw-hswing var(--sd, 4s) ease-in-out infinite alternate;
}
.hw-hthread {
	display: block; width: 2px; height: var(--len, 60px); background: #2a1a4a; box-shadow: 0 0 0 1px rgba(255, 255, 255, .32);
	animation: hw-hlen var(--ld, 6s) ease-in-out infinite alternate;
}
.hw-hang svg { display: block; width: var(--sw, 34px); height: auto; margin-top: -10px; flex: none; }
@keyframes hw-hswing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
/* the small ones do not need to wiggle their legs */
.hw-hang .hw-legs { animation: none; }
@keyframes hw-hlen { from { height: var(--len, 60px); } to { height: calc(var(--len, 60px) + 34px); } }

/* ---------------------------------------------------------------- bats */
.hw-bat {
	position: absolute; left: 0; width: 84px; height: 36px;
	animation: hw-fly linear forwards; will-change: transform;
}
.hw-bat-w { width: 84px; height: 36px; animation: hw-wobble 1.8s ease-in-out infinite alternate; }
.hw-bat svg { display: block; width: 84px; height: 36px; filter: drop-shadow(0 2px 3px rgba(20, 8, 40, .3)); }
@keyframes hw-fly { from { transform: translate3d(var(--x0), 0, 0); } to { transform: translate3d(var(--x1), 0, 0); } }
@keyframes hw-wobble {
	from { transform: translateY(-14px) scale(var(--s, 1)) rotate(calc(var(--dir, 1) * 6deg)); }
	to   { transform: translateY(14px)  scale(var(--s, 1)) rotate(calc(var(--dir, 1) * -3deg)); }
}
.hw-wing { transform-box: view-box; animation: hw-flap .3s ease-in-out infinite alternate; }
.hw-wing-l { transform-origin: 38px 20px; }
.hw-wing-r { transform-origin: 46px 20px; }
@keyframes hw-flap { from { transform: scaleY(1) translateY(0); } to { transform: scaleY(.38) translateY(3px); } }

/* ------------------------------------------------- glow + fog (bottom edge) */
.hw-glow {
	position: absolute; left: 0; right: 0; bottom: 0; height: 36vh;
	background: linear-gradient(to top, rgba(255, 112, 16, .56), rgba(255, 112, 16, .28) 30%, rgba(255, 112, 16, .1) 62%, rgba(255, 112, 16, 0));
	animation: hw-gpulse 5.5s ease-in-out infinite alternate;
}
@keyframes hw-gpulse { from { opacity: .72; } to { opacity: 1; } }
.hw-fog {
	position: absolute; left: 0; right: 0; bottom: 0; height: 40vh;
	-webkit-mask-image: linear-gradient(to top, #000 28%, transparent);
	mask-image: linear-gradient(to top, #000 28%, transparent);
}
.hw-fog i {
	position: absolute; bottom: -50px; left: -30%; width: 80%; height: 100%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 128, 24, .62), rgba(255, 128, 24, 0) 72%);
	animation: hw-drift 34s ease-in-out infinite alternate; will-change: transform;
}
.hw-fog i:nth-child(2) {
	left: 14%; background: radial-gradient(closest-side, rgba(176, 100, 255, .42), rgba(176, 100, 255, 0) 72%);
	animation-duration: 44s; animation-direction: alternate-reverse;
}
.hw-fog i:nth-child(3) { left: 40%; animation-duration: 50s; }
.hw-fog i:nth-child(4) {
	left: 66%; background: radial-gradient(closest-side, rgba(176, 100, 255, .38), rgba(176, 100, 255, 0) 72%);
	animation-duration: 40s; animation-direction: alternate-reverse;
}
@keyframes hw-drift { from { transform: translateX(-14%); } to { transform: translateX(20%); } }

/* ------------------------------------- cobwebs on cards and in the drawer */
html.hp-hw.hwf-cards li.product::after {
	content: ""; position: absolute; pointer-events: none; z-index: 3;
	background: var(--hw-web) no-repeat 0 0 / 100% 100%;
}
html.hp-hw.hwf-cards li.product:nth-child(3n+1)::after { top: 0; left: 0; right: auto; width: 82px; height: 82px; transform: none; }
html.hp-hw.hwf-cards li.product:nth-child(4n+3)::after { top: 0; right: 0; left: auto; width: 82px; height: 82px; transform: scaleX(-1); }
/* The drawer's panel is inset 10 px; a little spider dangles from its top edge, between the title and the close button. */
html.hp-hw.hwf-cards #hp-cart-drawer::after {
	content: ""; position: absolute; top: 10px; right: 92px; width: 34px; height: 84px; z-index: 5; pointer-events: none;
	background: var(--hw-dspider) no-repeat 50% 0 / 100% 100%;
	transform-origin: 50% 0; animation: hw-dswing 4.6s ease-in-out infinite;
}
@keyframes hw-dswing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ------------------------------------------------------- small / calm / print */
@media (max-width: 767px) {
	.hw-spider-clip { height: 200px; }
	/* The corner webs are thin lines on a small screen: keep them SOLID and a touch heavier, or on a real phone they vanish. */
	.hw-web .hw-web-halo { stroke-opacity: .8; stroke-width: 3.8; }
	.hw-web .hw-web-line { stroke-opacity: 1; stroke-width: 1.8; }
	.hw-spider { width: 42px; left: -21px; }
	.hw-spider svg { width: 42px; }
	/* One smooth warm glow rising from the bottom edge — no drifting blobs on a phone. */
	.hw-fog { display: none; }
	.hw-glow {
		height: 30vh;
		background:
			radial-gradient(130% 95% at 50% 115%, rgba(255, 128, 24, .62), rgba(255, 128, 24, .3) 44%, rgba(255, 128, 24, 0) 78%),
			linear-gradient(to top, rgba(255, 112, 16, .3), rgba(255, 112, 16, 0) 65%);
	}
	html.hp-hw.hwf-cards li.product:nth-child(3n+1)::after,
	html.hp-hw.hwf-cards li.product:nth-child(4n+3)::after { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
	.hw-legs, .hw-pumpkin::before, .hw-face, .hw-fog i, .hw-glow, .hw-fp, .hw-hang, .hw-hthread, .hw-wing, #hp-cart-drawer::after { animation: none !important; }
	.hw-bat { display: none; }
}
@media print { .hw-layer, .hw-defs { display: none !important; } }