/* Haygoodies Themes: the haunted scene, fixed behind the whole site while the Halloween skin is on.
   Artwork from the Haygoodies Haunted kit. */
.hgt-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
	--glow: #ffcf6b; --sil: #0a0714; --moon: #fff4d6;
	background: linear-gradient(180deg, #0c0818 0%, #1b1235 34%, #3b1f4f 62%, #7a3a55 84%, #e0774a 100%); }
html.hgt-scene-on { background: #0c0818 !important; }
html.hgt-scene-on body { background: transparent !important; }
.hh-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hh-stars { position: absolute; inset: 0 0 35% 0; }
.hh-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .8; animation: hh-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
.hh-star.big { width: 3px; height: 3px; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .7); }
.hh-star.sparkle::before, .hh-star.sparkle::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); border-radius: 2px; }
.hh-star.sparkle::before { width: 11px; height: 1.5px; }
.hh-star.sparkle::after { width: 1.5px; height: 11px; }
.hh-moon { position: absolute; right: 12%; top: clamp(150px, 20vh, 230px); width: clamp(150px, 22vw, 260px); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 38% 36%, #fffdf4 0%, var(--moon) 45%, #f1dfae 100%);
	box-shadow: 0 0 60px 18px rgba(255, 240, 200, .28), 0 0 160px 60px rgba(255, 210, 140, .12); }
.hh-moon i { position: absolute; border-radius: 50%; background: rgba(214, 190, 140, .38); }
.hh-wisp { position: absolute; height: 34px; border-radius: 40px; background: rgba(60, 40, 92, .32); filter: blur(10px); animation: hh-wisp 38s linear infinite; }
.hh-land { position: absolute; left: 50%; bottom: 0; width: max(100%, 980px); transform: translateX(-50%); display: block; }
.hh-win { fill: var(--glow); }
.hh-winglow { fill: var(--glow); opacity: .35; filter: blur(6px); animation: hh-flicker 6s ease-in-out infinite; }
.hh-shadow { fill: #1a0f22; transform-box: fill-box; animation: hh-pass var(--sd, 9s) ease-in-out var(--sdl, 0s) infinite; opacity: 0; }
.hh-peek { fill: #1a0f22; transform-box: fill-box; transform-origin: 50% 100%; animation: hh-peek var(--sd, 11s) ease-in-out var(--sdl, 0s) infinite; }
.hh-ghost { position: absolute; left: 0; width: var(--w, 70px); animation: hh-fly var(--f, 26s) linear var(--fd, 0s) infinite; opacity: .9; z-index: 2; }
.hh-ghost .hh-bob { animation: hh-bob 2.6s ease-in-out infinite; }
.hh-ghost svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 12px rgba(230, 220, 255, .55)); }
.hh-ghost.rev { animation-name: hh-flyrev; }
.hh-ghost.rev svg { transform: scaleX(-1); }
.hh-fog { position: absolute; left: -20%; right: -20%; bottom: -10px; height: 120px; z-index: 2;
	background: radial-gradient(ellipse at 20% 60%, rgba(190, 170, 230, .22), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(190, 170, 230, .18), transparent 60%);
	filter: blur(8px); animation: hh-fog 22s ease-in-out infinite alternate; }

/* the rotting arm */
.hh-arm { transform-box: fill-box; transform-origin: 50% 100%; animation: hh-clawout 13s linear infinite; }
.hh-claw { transform-box: fill-box; transform-origin: 50% 100%; animation: hh-curl 13s steps(1, end) infinite; }
.hh-claw.c2 { animation-delay: .09s; } .hh-claw.c3 { animation-delay: .17s; } .hh-claw.c4 { animation-delay: .26s; } .hh-claw.c5 { animation-delay: .05s; }
.hh-rag, .hh-strand { transform-box: fill-box; transform-origin: 50% 0; animation: hh-sway 1.7s ease-in-out infinite alternate; }
.hh-rag.r2 { animation-duration: 1.3s; } .hh-rag.r3 { animation-duration: 2.1s; } .hh-strand.s2 { animation-duration: 1.1s; }
.hh-dirt { transform-box: fill-box; opacity: 0; animation: hh-flick 13s linear infinite; }
.hh-dirt.d2 { animation-delay: .2s; } .hh-dirt.d3 { animation-delay: .35s; } .hh-dirt.d4 { animation-delay: 1.5s; } .hh-dirt.d5 { animation-delay: 1.65s; }

/* bats (scene and the site-wide sky) */
.hh-bat { position: absolute; left: 0; width: var(--w, 46px); z-index: 2; animation: hh-batfly var(--f, 14s) linear var(--fd, 0s) infinite; }
.hh-bat .hh-flutter { animation: hh-batbob 1.1s ease-in-out infinite; }
.hh-bat svg { width: 100%; height: auto; display: block; }
.hh-bat .wl { transform-box: fill-box; transform-origin: 100% 40%; animation: hh-flapL .22s ease-in-out infinite alternate; }
.hh-bat .wr { transform-box: fill-box; transform-origin: 0 40%; animation: hh-flapR .22s ease-in-out infinite alternate; }
.hh-bat.ltr { animation-name: hh-batfly2; }
.hh-bat.loop { animation: hh-batloop 7s linear infinite; }


@keyframes hh-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes hh-wisp { from { transform: translateX(-40vw); } to { transform: translateX(120vw); } }
@keyframes hh-flicker { 0%, 100% { opacity: .35; } 45% { opacity: .5; } 52% { opacity: .18; } 60% { opacity: .45; } }
@keyframes hh-pass { 0%, 8% { transform: translateX(-160%); opacity: 0; } 14% { opacity: .95; } 40% { transform: translateX(10%); opacity: .95; } 52% { transform: translateX(160%); opacity: 0; } 100% { transform: translateX(160%); opacity: 0; } }
@keyframes hh-peek { 0%, 55% { transform: translateY(105%); } 62%, 74% { transform: translateY(18%); } 80%, 100% { transform: translateY(105%); } }
@keyframes hh-fly { 0% { transform: translateX(-160px); opacity: 0; } 6% { opacity: .9; } 90% { opacity: .9; } 100% { transform: translateX(calc(100vw + 60px)); opacity: 0; } }
@keyframes hh-flyrev { 0% { transform: translateX(calc(100vw + 60px)); opacity: 0; } 8% { opacity: .85; } 92% { opacity: .85; } 100% { transform: translateX(-160px); opacity: 0; } }
@keyframes hh-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes hh-fog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@keyframes hh-clawout {
	0%, 14% { transform: translateY(105%) rotate(0); } 16% { transform: translateY(70%) rotate(-3deg); } 17% { transform: translateY(78%) rotate(2deg); } 19.5% { transform: translateY(78%) rotate(1deg); }
	21% { transform: translateY(46%) rotate(-5deg); } 22% { transform: translateY(52%) rotate(3deg); } 23% { transform: translateY(50%) rotate(-1deg); } 25% { transform: translateY(50%) rotate(2deg); }
	26.5% { transform: translateY(22%) rotate(-6deg); } 27.5% { transform: translateY(28%) rotate(4deg); } 29% { transform: translateY(26%) rotate(-2deg); } 31% { transform: translateY(8%) rotate(5deg); }
	32% { transform: translateY(0) rotate(-3deg); } 40% { transform: translateY(2%) rotate(-2deg); } 41% { transform: translateY(0) rotate(6deg); } 42.5% { transform: translateY(1%) rotate(-7deg); } 44% { transform: translateY(0) rotate(4deg); }
	52% { transform: translateY(0) rotate(3deg); } 53% { transform: translateY(4%) rotate(14deg); } 55% { transform: translateY(3%) rotate(18deg); } 56% { transform: translateY(5%) rotate(10deg); } 58% { transform: translateY(3%) rotate(17deg); }
	60% { transform: translateY(0) rotate(0); } 68% { transform: translateY(0) rotate(-2deg); } 70% { transform: translateY(14%) rotate(3deg); } 71% { transform: translateY(10%) rotate(-2deg); }
	74% { transform: translateY(40%) rotate(4deg); } 75% { transform: translateY(34%) rotate(-3deg); } 79% { transform: translateY(72%) rotate(2deg); } 83%, 100% { transform: translateY(105%) rotate(0); } }
@keyframes hh-curl {
	0%, 30% { transform: rotate(0) scaleY(1); } 33% { transform: rotate(-18deg) scaleY(.82); } 34.5% { transform: rotate(8deg) scaleY(.95); } 36% { transform: rotate(-26deg) scaleY(.7); }
	37.5% { transform: rotate(4deg) scaleY(1); } 39% { transform: rotate(-30deg) scaleY(.66); } 40.5% { transform: rotate(-6deg) scaleY(.9); } 45% { transform: rotate(-14deg) scaleY(.8); }
	46% { transform: rotate(10deg) scaleY(1); } 47% { transform: rotate(-22deg) scaleY(.72); } 48.5% { transform: rotate(0) scaleY(1); } 53% { transform: rotate(-34deg) scaleY(.6); }
	56% { transform: rotate(-12deg) scaleY(.85); } 58% { transform: rotate(-36deg) scaleY(.58); } 61%, 100% { transform: rotate(0) scaleY(1); } }
@keyframes hh-sway { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes hh-flick { 0%, 15% { opacity: 0; transform: translate(0, 0); } 16% { opacity: 1; } 19% { opacity: 1; transform: translate(-8px, -26px); } 22% { opacity: 0; transform: translate(-12px, 4px); } 26% { opacity: 0; transform: translate(0, 0); } 27% { opacity: 1; } 30% { opacity: 1; transform: translate(10px, -22px); } 33%, 100% { opacity: 0; transform: translate(12px, 4px); } }
@keyframes hh-flapL { from { transform: rotate(-28deg) scaleY(.9); } to { transform: rotate(22deg) scaleY(.6); } }
@keyframes hh-flapR { from { transform: rotate(28deg) scaleY(.9); } to { transform: rotate(-22deg) scaleY(.6); } }
@keyframes hh-batbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hh-batfly { 0% { transform: translateX(calc(100vw + 40px)) translateY(0); } 50% { transform: translateX(45vw) translateY(-30px); } 100% { transform: translateX(-120px) translateY(10px); } }
@keyframes hh-batfly2 { 0% { transform: translateX(-120px) translateY(20px); } 50% { transform: translateX(50vw) translateY(-20px); } 100% { transform: translateX(calc(100vw + 40px)) translateY(-40px); } }
@keyframes hh-batloop { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(60px, -24px) scale(.8); } 50% { transform: translate(0, -44px) scale(.65); } 75% { transform: translate(-60px, -24px) scale(.8); } 100% { transform: translate(0, 0) scale(1); } }
.hgt-backdrop .hh-art { position: absolute; inset: 0; }
.hgt-backdrop .hh-stars { inset: 0 0 40% 0; }
.hgt-backdrop .hh-land { width: max(100%, 1100px); }
@media (max-width: 767px) {
	.hgt-backdrop .hh-moon { right: 6%; top: 10%; width: 96px; }
	.hgt-backdrop .hh-land { width: 1100px; }
}
@media (prefers-reduced-motion: reduce) {
	.hgt-backdrop *, .hgt-backdrop *::before, .hgt-backdrop *::after { animation: none !important; }
	.hgt-backdrop .hh-ghost { left: 18%; } .hgt-backdrop .hh-ghost.g2 { left: 64%; }
	.hgt-backdrop .hh-arm { transform: translateY(30%); } .hgt-backdrop .hh-shadow { opacity: .9; transform: none; } .hgt-backdrop .hh-dirt { opacity: 0; }
	.hgt-backdrop .hh-bat { left: 30%; } .hgt-backdrop .hh-bat.b2 { left: 70%; }
}
@media print { .hgt-backdrop { display: none; } }