/*
 * PJ Halloween — todo está aislado bajo #pjh-layer y #pjh-toggle.
 * No se toca ningún selector del tema, de Elementor ni de otros plugins.
 *
 * Capas (z-index):
 *   - #pjh-layer  980  → sobre el contenido, pero BAJO el header sticky, menús off-canvas,
 *                         banner de cookies y lightboxes (que suelen usar ≥ 999).
 *   - #pjh-toggle 990  → mismo criterio; nunca tapa la interfaz del sitio.
 * La capa decorativa tiene pointer-events:none: no intercepta ningún clic, scroll ni toque.
 */

#pjh-layer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 980;
	pointer-events: none;
	overflow: hidden;
	contain: strict;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#pjh-layer.pjh-hidden {
	display: none;
}

#pjh-layer *,
#pjh-toggle * {
	box-sizing: border-box;
	pointer-events: none;
}

#pjh-layer svg,
#pjh-toggle svg {
	display: block;
	max-width: none;
	max-height: none;
	overflow: visible;
}

/* ---------- Calabazas flotantes ---------- */

#pjh-layer .pjh-pumpkin {
	position: absolute;
	bottom: -90px;
	left: var(--pjh-x, 50%);
	width: var(--pjh-s, 44px);
	opacity: 0;
	will-change: transform, opacity;
	animation: pjh-rise var(--pjh-d, 26s) linear var(--pjh-delay, 0s) infinite;
}

#pjh-layer .pjh-sway {
	animation: pjh-sway var(--pjh-sw, 4s) ease-in-out infinite alternate;
	transform-origin: 50% 0;
}

#pjh-layer .pjh-glow {
	animation: pjh-flicker 2.6s ease-in-out infinite;
}

@keyframes pjh-rise {
	0%   { transform: translate3d(0, 0, 0); opacity: 0; }
	8%   { opacity: var(--pjh-o, .92); }
	85%  { opacity: var(--pjh-o, .92); }
	100% { transform: translate3d(0, calc(-100vh - 180px), 0); opacity: 0; }
}

@keyframes pjh-sway {
	0%   { transform: translateX(-16px) rotate(-9deg); }
	100% { transform: translateX(16px) rotate(9deg); }
}

@keyframes pjh-flicker {
	0%, 100% { opacity: 1; }
	45%      { opacity: .82; }
	50%      { opacity: .95; }
	70%      { opacity: .78; }
}

/* ---------- Murciélagos ---------- */

#pjh-layer .pjh-bat {
	position: absolute;
	top: var(--pjh-y, 20vh);
	left: 0;
	width: var(--pjh-s, 46px);
	will-change: transform;
	transform: translate3d(-140px, 0, 0);
	animation: pjh-fly var(--pjh-d, 20s) linear var(--pjh-delay, 0s) infinite;
}

#pjh-layer .pjh-bat.pjh-rtl {
	animation-direction: reverse;
}

#pjh-layer .pjh-bat.pjh-rtl .pjh-bob {
	transform: scaleX(-1);
}

#pjh-layer .pjh-bob svg {
	animation: pjh-bob 1.1s ease-in-out infinite alternate;
}

#pjh-layer .pjh-wing-l,
#pjh-layer .pjh-wing-r {
	transform-box: fill-box;
	animation-duration: .2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

#pjh-layer .pjh-wing-l {
	transform-origin: 100% 40%;
	animation-name: pjh-flap-l;
}

#pjh-layer .pjh-wing-r {
	transform-origin: 0% 40%;
	animation-name: pjh-flap-r;
}

/* El vuelo ocupa ~40 % del ciclo; el resto del tiempo el murciélago espera fuera de pantalla. */
@keyframes pjh-fly {
	0%   { transform: translate3d(-140px, 0, 0); }
	10%  { transform: translate3d(25vw, -34px, 0); }
	20%  { transform: translate3d(50vw, 18px, 0); }
	30%  { transform: translate3d(75vw, -26px, 0); }
	40%  { transform: translate3d(calc(100vw + 140px), 6px, 0); }
	100% { transform: translate3d(calc(100vw + 140px), 6px, 0); }
}

@keyframes pjh-bob {
	0%   { transform: translateY(-4px); }
	100% { transform: translateY(4px); }
}

@keyframes pjh-flap-l {
	0%   { transform: rotate(-14deg) scaleY(1); }
	100% { transform: rotate(16deg) scaleY(.55); }
}

@keyframes pjh-flap-r {
	0%   { transform: rotate(14deg) scaleY(1); }
	100% { transform: rotate(-16deg) scaleY(.55); }
}

/* ---------- Araña colgante ---------- */

#pjh-layer .pjh-spider {
	position: absolute;
	top: -100vh;
	right: clamp(34px, 6vw, 110px);
	width: 40px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform-origin: 50% 0;
	will-change: transform;
	animation: pjh-drop 19s ease-in-out 2.5s infinite;
}

#pjh-layer .pjh-thread {
	flex: 1 1 auto;
	width: 1px;
	background: linear-gradient(to bottom, rgba(110, 110, 120, 0), rgba(110, 110, 120, .75) 35%);
}

#pjh-layer .pjh-spider svg {
	flex: none;
	width: 38px;
	height: 38px;
	margin-top: -6px;
}

#pjh-layer .pjh-legs {
	transform-box: fill-box;
	transform-origin: 50% 30%;
	animation: pjh-wiggle .5s ease-in-out infinite alternate;
}

@keyframes pjh-drop {
	0%, 8%    { transform: translateY(0) rotate(0deg); }
	30%       { transform: translateY(34vh) rotate(.7deg); }
	40%       { transform: translateY(31vh) rotate(-.7deg); }
	50%       { transform: translateY(34vh) rotate(.4deg); }
	60%       { transform: translateY(33vh) rotate(0deg); }
	82%, 100% { transform: translateY(0) rotate(0deg); }
}

@keyframes pjh-wiggle {
	0%   { transform: scaleX(1); }
	100% { transform: scaleX(.88); }
}

/* ---------- Telaraña ---------- */

#pjh-layer .pjh-cobweb {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(90px, 12vw, 170px);
	opacity: .6;
	transform: scaleX(-1);
}

/* ---------- Botón para visitantes ---------- */

#pjh-toggle {
	all: unset;
	position: fixed;
	bottom: 18px;
	z-index: 990;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #1b1b22;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	transition: transform .2s ease, opacity .2s ease;
	-webkit-tap-highlight-color: transparent;
}

#pjh-toggle.pjh-left  { left: 18px; }
#pjh-toggle.pjh-right { right: 18px; }

#pjh-toggle svg {
	width: 30px;
	height: 28px;
}

#pjh-toggle:hover {
	transform: scale(1.08);
}

#pjh-toggle:focus-visible {
	outline: 3px solid #f28a2e;
	outline-offset: 3px;
}

#pjh-toggle.pjh-off {
	opacity: .55;
}

#pjh-toggle.pjh-off svg {
	filter: grayscale(1);
}

#pjh-toggle .pjh-tip {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	white-space: nowrap;
	background: #1b1b22;
	color: #fff;
	font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	padding: 7px 10px;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
}

#pjh-toggle.pjh-left .pjh-tip  { left: 56px; }
#pjh-toggle.pjh-right .pjh-tip { right: 56px; }

@media (hover: hover) {
	#pjh-toggle:hover .pjh-tip,
	#pjh-toggle:focus-visible .pjh-tip {
		opacity: 1;
		visibility: visible;
	}
}

/* ---------- Móviles: más discreto para no tapar la lectura ---------- */

@media (max-width: 767px) {
	#pjh-layer .pjh-spider {
		right: 8px;
		width: 30px;
		animation-name: pjh-drop-sm;
	}

	#pjh-layer .pjh-spider svg {
		width: 28px;
		height: 28px;
	}

	#pjh-layer .pjh-cobweb {
		width: 84px;
		opacity: .45;
	}

	#pjh-toggle {
		bottom: 14px;
		width: 40px;
		height: 40px;
	}

	#pjh-toggle.pjh-left  { left: 14px; }
	#pjh-toggle.pjh-right { right: 14px; }

	#pjh-toggle svg {
		width: 26px;
		height: 24px;
	}
}

@keyframes pjh-drop-sm {
	0%, 8%    { transform: translateY(0); }
	30%, 60%  { transform: translateY(20vh); }
	45%       { transform: translateY(18vh); }
	82%, 100% { transform: translateY(0); }
}

/* ---------- Pausa, accesibilidad, impresión ---------- */

#pjh-layer.pjh-paused,
#pjh-layer.pjh-paused * {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	#pjh-layer .pjh-pumpkin,
	#pjh-layer .pjh-bat {
		display: none;
	}

	#pjh-layer .pjh-spider,
	#pjh-layer .pjh-legs,
	#pjh-layer .pjh-glow {
		animation: none;
	}

	#pjh-layer .pjh-spider {
		transform: translateY(14vh);
	}

	#pjh-toggle {
		transition: none;
	}
}

@media print {
	#pjh-layer,
	#pjh-toggle {
		display: none !important;
	}
}