/*
 * Halloween Bats — flight path is pure CSS; the wing-flap itself is a Lottie animation
 * (assets/lottie/bat.json, played into each .hb-bat container by assets/js/hb-lottie-
 * init.js). position:fixed + pointer-events:none keeps it purely decorative — it can
 * never block a click, a form, a Divi popup, or anything else on the page.
 *
 * Flight uses vw/vh transform units (not fixed pixel paths) so it works correctly at
 * any real site's viewport width, from a phone up to an ultrawide monitor.
 */

.hb-bats-wrap {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 999999;
	contain: layout style paint;
}

.hb-bat {
	position: absolute;
	left: -12vw;
	/* The bat frames in bat.json are raster images (baked-in black), not vector shapes,
	   so there's no fill color to override directly. brightness(0) flattens every pixel's
	   RGB to black without touching alpha, then invert(%) remaps that black to a flat
	   grey — dark grey here — while keeping the transparency/antialiasing intact. */
	filter: brightness(0) invert(16%);
}

/* sized to the Lottie file's own 480:270 (16:9) aspect ratio — a mismatched box ratio
   letterboxes the animation, so this must stay in sync with assets/lottie/bat.json. */
.hb-bat-sm { width: 25px; height: 14px; }
.hb-bat-md { width: 33px; height: 19px; }
.hb-bat-lg { width: 42px; height: 24px; }

/* Flight path itself is driven by assets/js/hb-bat-motion.js, not CSS keyframes — a
   hand-authored keyframe loop, even phase-shifted per bat, still shares one underlying
   shape, so every bat ends up pulsing/dipping on the same rhythm and it reads as
   "everyone doing the same thing." The motion script instead gives each bat its own
   randomly-generated frequencies for wander/zoom/speed, so there's no shared pattern
   across bats and no two page loads look identical. It only ever writes
   translate()+scale() to this element's transform — never rotate() — so the sprite's
   own orientation can't change no matter how it moves. --hb-flapdelay below still
   staggers each bat's Lottie wing-flap start (read by hb-lottie-init.js). */
.hb-bat-1 { top: 18%; --hb-flapdelay: 0s; }
.hb-bat-2 { top: 42%; --hb-flapdelay: -0.12s; }
.hb-bat-3 { top: 12%; --hb-flapdelay: -0.2s; }
.hb-bat-4 { top: 58%; --hb-flapdelay: -0.05s; }
.hb-bat-5 { top: 30%; --hb-flapdelay: -0.3s; }
.hb-bat-6 { top: 50%; --hb-flapdelay: -0.15s; }
.hb-bat-7 { top: 22%; --hb-flapdelay: -0.24s; }

@media (max-width: 600px) {
	.hb-bat-lg { width: 30px; height: 17px; }
	.hb-bat-md { width: 24px; height: 14px; }
	.hb-bat-sm { width: 18px; height: 10px; }
}

/* ---------- pumpkins: falling jack-o'-lanterns, pure CSS loop (no JS spawning) ----------
   Fall top-to-bottom (heavy objects don't float upward), and stay in the left/right
   safe zones (0-18% / 82-100% of viewport width) so the center content area — where
   the actual page content sits — stays visually clean. ease-in gives the descent a
   slightly weighted, gravity-pulled feel instead of a constant-speed drift. Since this
   is a looping CSS animation on a fixed set of elements (not JS spawning new DOM nodes
   per pumpkin), there's nothing to "clean up" when one passes below the viewport — the
   same element just loops back to the top on its next iteration, so there's no
   accumulating performance cost either way. */
.hb-lanterns { position: fixed; inset: 0; pointer-events: none; z-index: 998; overflow: hidden; }
.hb-lantern {
	position: absolute;
	top: -60px;
	font-size: 24px;
	opacity: 0;
	animation-name: hb-fall-down;
	animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
	animation-iteration-count: infinite;
}
@keyframes hb-fall-down {
	0%   { transform: translateY(0) translateX(0) rotate(-4deg); opacity: 0; }
	8%   { opacity: .95; }
	50%  { transform: translateY(58vh) translateX(3vw) rotate(4deg); }
	92%  { opacity: .85; }
	100% { transform: translateY(108vh) translateX(-2vw) rotate(-4deg); opacity: 0; }
}
/* Left safe zone (0-18%): lanterns 1, 2, 3, 7. Right safe zone (82-100%): lanterns 4, 5, 6.
   Nothing spawns between 18-82%, so the center content column stays clear. */
.hb-lantern-1 { left: 2%;  animation-duration: 18s; animation-delay: 0s; }
.hb-lantern-2 { left: 9%; font-size: 20px; animation-duration: 22s; animation-delay: -9s; }
.hb-lantern-3 { left: 15%; animation-duration: 20s; animation-delay: -4s; }
.hb-lantern-4 { left: 86%; font-size: 22px; animation-duration: 24s; animation-delay: -14s; }
.hb-lantern-5 { left: 92%; animation-duration: 19s; animation-delay: -17s; }
.hb-lantern-6 { left: 98%; font-size: 21px; animation-duration: 23s; animation-delay: -6s; }
.hb-lantern-7 { left: 17%; animation-duration: 21s; animation-delay: -11s; }

/* ---------- autumn flecks: drifting leaf/ember particles, drawn on a canvas by
   assets/js/hb-leaves.js — no DOM elements per particle, so this stays cheap even with
   dozens of them. ---------- */
#hb-fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 997; }

/* Accessibility: fully respect the visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.hb-bats-wrap,
	.hb-lanterns,
	#hb-fx-canvas {
		display: none;
	}
}